Inheriting and Distributing Property Values

ByEditor

Sometimes, I wish I could set a CSS property’s value to match another property’s value, even if it’s unknown or changes later. Unfortunately, this isn’t possible as there’s no CSS function for it.

I believe it would be incredibly useful to have something like this (perhaps using `calc-size()` for interpolation):

“`css
/* Hypothetical example */
button {
border-radius: compute(height, self);
border-radius: compute(height, inherit);
border-radius: compute(height, #this);
}
“`

In 2021, Lea Verou explained why implementing such a function isn’t feasible, despite multiple proposals. However, I’m still hopeful as CSS evolves and the CSSWG process isn’t always linear.

Meanwhile, although no CSS function allows us to get another property’s value, we can achieve similar outcomes using different methods, which we’ll explore today.

### The fool-proof CSS custom properties method

We can use custom properties to get another property’s value, but we need to know the value initially to declare the custom property. This isn’t ideal, but it allows us to achieve some outcomes.

Returning to the example of setting `border-radius` based on `height`, this time we know the height and store it as a CSS custom property for reusability:

“`css
button {
–button-height: 3rem;
height: var(–button-height);
border-radius: calc(var(–button-height) * 0.3);
}
“`

We can declare `–button-height` higher in the CSS cascade for broader availability:

“`css
:root {
–button-height: 3rem;

header {
–header-padding: 1rem;
padding: var(–header-padding);

–header-height: calc(var(–button-height) + (var(–header-padding) * 2));
border-radius: calc(var(–header-height) * 0.3);

button {
height: var(–button-height);
border-radius: calc(var(–button-height) * 0.3);
padding-inline: calc(var(–button-height) * 0.5);
}
}
}
“`

I guess my math teacher was right about needing algebra one day!

### The unsupported `inherit()` CSS function method

The `inherit()` CSS function, unsupported by browsers, would allow us to get a parent’s property value. It’s like the `inherit` keyword but lets us get any parent property value and modify it using functions like `calc()`. The latest CSS Values and Units Module Level 5 spec draft defines how this would work for custom properties, but it doesn’t enable anything we can’t already do. The hope is it will eventually work for all CSS properties:

“`css
header {
height: 3rem;

button {
height: 100%;
border-radius: calc(inherit(height) * 0.3);
padding-inline: calc(inherit(height) * 0.5);
}
}
“`

This method depends on the parent’s fixed height, whereas with custom properties, either the parent or child can have the fixed height.

`inherit()` wouldn’t interpolate values. An `auto` value computed to `3rem` would still be inherited as `auto`, which might compute differently when `inherit()`-ed. Sometimes this is fine, but it can be problematic. I’m hoping interpolation becomes possible, making it more useful than custom properties.

Until then, there are other (mostly property-specific) options.

### The `aspect-ratio` CSS property

Using the `aspect-ratio` CSS property, we can set height relative to width, and vice-versa:

“`css
div {
width: 30rem;

aspect-ratio: 2 / 1;
aspect-ratio: 3 / 1.5;
aspect-ratio: 10 / 5;
aspect-ratio: 1 / 1;
}
“`

Technically, we don’t “get” the `width` or `height`, but we set one based on the other, which is crucial (and since it’s a ratio, you don’t need to know the actual value or unit).

### The `currentColor` CSS keyword

The `currentColor` CSS keyword resolves to the computed `color` property value. It can replace any `` on any property on the same element. For example, if `color` is set to `red`, we could declare `border-color: currentColor` to make the border red too:

“`css
body {
color: red;

button {
color: red;
border-color: currentColor;
border: 0.0625rem solid currentColor;
background: hsl(from currentColor h s 90);
}
}
“`

This allows color reuse without custom properties, and `currentColor` updates automatically if `color` changes.

While not the same as getting the color of anything, it’s still useful

Similar Posts