"The Custom Properties specification explains: The var() function can be used in place of any part of a value in any property on an element. The var() function can not be used as property names, selectors, or anything else besides property values. (Doing so usually produces invalid syntax, or else a value whose meaning has no connection to the variable.) That's unfortunate, but I recently found a workaround that I'd love to share with you."
"Instead of using a media query, you can use a container style query. A vi unit represents the size of the viewport's inline axis, which by default equals vw in left to right languages. Let me guide you through the steps I took to come up with this solution. Breakdown The first step is to define a custom property for the breakpoint. Then, query the viewport's width and check whether it matches or exceeds the breakpoint."
Custom properties cannot serve as property names, selectors, or media query conditions; the var() function only replaces parts of property values. Container style queries can substitute for media queries by testing a container's computed properties. The vi unit measures the viewport inline axis and defaults to vw in left-to-right languages. Define a custom property to hold a breakpoint and compare the viewport's computed width to that breakpoint using container queries. Compare computed length values rather than raw strings. Use the @property at-rule to declare syntax as <length-percentage>, provide an initial value such as 100vi, and mark the property as inheritable.
Read at Piccalilli
Unable to calculate read time
Collection
[
|
...
]