7 min read
|
Saved February 14, 2026
|
Copied!
Do you care about this?
This article discusses methods for achieving CSS property value inheritance, especially when direct inheritance isn't supported. It explores using custom properties, the hypothetical inherit() function, aspect-ratio, currentColor, and other CSS techniques to work around limitations.
If you do, here's more
CSS currently lacks a built-in function that allows you to set one property’s value based on another’s, even if that value changes. A hypothetical function like `compute(height, self)` could offer this flexibility, but as Lea Verou pointed out in 2021, such proposals haven’t succeeded due to feasibility issues. In the absence of this functionality, the article offers alternative methods to achieve similar results, primarily through CSS custom properties.
Using custom properties allows developers to define values that can be reused across different properties. For instance, a button's height can be stored as a custom property, making it easy to set the border-radius based on that height. This method requires knowing the height beforehand, which isn’t always ideal but still provides a way to create responsive designs. The article also discusses the theoretical `inherit()` function, which could allow properties to inherit values from parent elements with the added ability to modify them using functions like `calc()`. However, this feature is not yet supported in any browsers.
Other CSS properties like `aspect-ratio` and keywords like `currentColor` provide additional options for setting dimensions and colors based on existing values. The `aspect-ratio` property allows you to maintain proportions without needing to know specific dimensions. Meanwhile, `currentColor` resolves to the element's color, making it easy to keep consistent styles without defining multiple values. The piece also touches on the `from-font` keyword for text-decoration thickness, which aims to adjust underline thickness based on font characteristics, though its reliability can vary based on the font used. Overall, while there are workarounds, a more versatile CSS function would greatly enhance design capabilities.
Questions about this article
No questions yet.