"Sometimes I want to set the value of a CSS property to that of a different property, even if I don't know what that value is, and even if it changes later. Unfortunately though, that's not possible (at least, there isn't a CSS function that specifically does that). In my opinion, it'd be super useful to have something like this (for interpolation, maybe you'd throw in there as well): /* Totally hypothetical */ button { border-radius: compute(height, self); border-radius: compute(height, inherit); border-radius: compute(height, #this); }"
"Let's jump back to the example from the intro where we try to set the border-radius based on the height, only this time we know what the height is and we store it as a CSS custom property for reusability, and so we're able to achieve our outcome: button { --button-height: 3rem; height: var(--button-height); border-radius: calc(var(--button-height) * 0.3); } We can even place that --button-height custom property higher up in the CSS cascade to make it available to more containment contexts."
A general-purpose CSS function to reference or compute one property from another is not currently available and is considered infeasible to implement in general. Practical outcomes can be achieved by using CSS custom properties to store known values and reuse them across properties. Declaring a custom property like --button-height allows height and border-radius to derive from the same source via var() and calc(). Placing custom properties higher in the cascade, such as :root, makes those values available across more containment contexts for consistent reuse and maintainability.
Read at CSS-Tricks
Unable to calculate read time
Collection
[
|
...
]