Generally I wish to set the worth of a CSS property to that of a distinct property, even when I don’t know what that worth is, and even when it adjustments later. Sadly although, that’s not attainable (at the least, there isn’t a CSS operate that particularly does that).
In my view, it’d be tremendous helpful to have one thing like this (for interpolation, perhaps you’d throw calc-size() in there as effectively):
/* Completely hypothetical */
button {
border-radius: compute(peak, self);
border-radius: compute(peak, inherit);
border-radius: compute(peak, #this);
}In 2021, Lea Verou defined why, regardless of being proposed quite a few occasions, implementing such a general-purpose CSS operate like this isn’t possible. Having mentioned that, I do stay hopeful, as a result of issues are all the time evolving and the CSSWG course of isn’t all the time linear.
Within the meantime, though there isn’t a CSS operate that permits us to get the worth of a distinct property, you may have the ability to obtain your end result utilizing a distinct technique, and people strategies are what we’re going to take a look at right this moment.
The fool-proof CSS customized properties technique
We will simply get the worth of a distinct CSS property utilizing customized properties, however we’d have to know what the worth is with a purpose to declare the customized property to start with. This isn’t perfect, but it surely does allow us to attain some outcomes.
Let’s bounce again to the instance from the intro the place we attempt to set the border-radius based mostly on the peak, solely this time we all know what the peak is and we retailer it as a CSS customized property for reusability, and so we’re in a position to obtain our end result:
button {
--button-height: 3rem;
peak: var(--button-height);
border-radius: calc(var(--button-height) * 0.3);
}We will even place that --button-height customized property increased up within the CSS cascade to make it out there to extra containment contexts.
:root {
/* Declare right here to make use of anyplace */
--button-height: 3rem;
header {
--header-padding: 1rem;
padding: var(--header-padding);
/* Top is unknown (however we are able to calculate it) */
--header-height: calc(var(--button-height) + (var(--header-padding) * 2));
/* Which suggests we are able to calculate this, too */
border-radius: calc(var(--header-height) * 0.3);
button {
/* In addition to these, after all */
peak: var(--button-height);
border-radius: calc(var(--button-height) * 0.3);
/* Oh, what the heck */
padding-inline: calc(var(--button-height) * 0.5);
}
}
}I assume when my math instructor mentioned that I’d want algebra at some point. She wasn’t mendacity!
The unsupported inherit() CSS operate technique
The inherit() CSS operate, which isn’t at the moment supported by any net browser, will allow us to get the worth of a mum or dad’s property. Assume: the inherit key phrase, besides that we are able to get the worth of any mum or dad property and even modify it utilizing worth capabilities resembling calc(). The newest draft of the CSS Values and Items Module Degree 5 spec defines how this’d work for customized properties, which wouldn’t actually allow us to do something that we are able to’t already do (as demonstrated within the earlier instance), however the hope is that it’d work for all CSS properties additional down the road in order that we wouldn’t want to make use of customized properties (which is only a tad longer):
header {
peak: 3rem;
button {
peak: 100%;
/* Get peak of mum or dad however use it right here */
border-radius: calc(inherit(peak) * 0.3);
padding-inline: calc(inherit(peak) * 0.5);
}
}There may be one distinction between this and the customized properties strategy, although. This technique relies on the mounted peak of the mum or dad, whereas with the customized properties technique both the mum or dad or the kid can have the mounted peak.
Which means that inherit() wouldn’t interpolate values. For instance, an auto worth that computes to 3rem would nonetheless be inherited as auto, which could compute to one thing else when inherit()-ed., Generally that’d be superb, however different occasions it’d be a difficulty. Personally, I’m hoping that interpolation turns into a chance sooner or later, making it much more helpful than the customized properties technique.
Till then, there are another (principally property-specific) choices.
The aspect-ratio CSS property
Utilizing the aspect-ratio CSS property, we are able to set the peak relative to the width, and vice-versa. For instance:
div {
width: 30rem;
/* peak shall be half of the width */
aspect-ratio: 2 / 1;
/* Identical factor */
aspect-ratio: 3 / 1.5;
/* Identical factor */
aspect-ratio: 10 / 5;
/* width and peak would be the similar */
aspect-ratio: 1 / 1;
}Technically we don’t “get” the width or the peak, however we do get to set one based mostly on the opposite, which is the essential factor (and because it’s a ratio, you don’t have to know the precise worth — or unit — of both).
The currentColor CSS key phrase
The currentColor CSS key phrase resolves to the computed worth of the coloration property. Its knowledge kind is coloration to crimson (or one thing that resolves to crimson), or if the coloration is computed as crimson by way of inheritance, we might then declare border-color: currentColor to make the border crimson too:
physique {
/* We will set coloration right here (and let it's inherited) */
coloration: crimson;
button {
/* Or set it right here */
coloration: crimson;
/* After which use currentColor right here */
border-color: currentColor;
border: 0.0625rem strong currentColor;
background: hsl(from currentColor h s 90);
}
}This permits us to reuse the colour with out having to arrange customized properties, and naturally if the worth of coloration adjustments, currentColor will routinely replace to match it.
Whereas this isn’t the identical factor as with the ability to get the colour of actually something, it’s nonetheless fairly helpful. Truly, if one thing akin to compute(background-color) simply isn’t attainable, I’d be proud of extra CSS key phrases like currentColor.
The truth is, currentBackgroundColor/currentBackground has already been proposed. Utilizing currentBackgroundColor for instance, we might set the border coloration to be barely darker than the background coloration (border-color: hsl(from currentBackgroundColor h s calc(l - 30))), or combine the background coloration with one other coloration after which use that because the border coloration (border-color: color-mix(currentBackgroundColor, black, 30)).
However why cease there? Why not currentWidth, currentHeight, and so forth?
The from-font CSS key phrase
The from-font CSS key phrase is unique to the text-decoration-thickness property, which can be utilized to set the thickness of underlines. When you’ve ever hated the truth that underlines are all the time 1px whatever the font-size and font-weight, then text-decoration-thickness can repair that.
The from-font key phrase doesn’t generate a worth although — it’s optionally supplied by the font maker and embedded into the font file, so that you won’t like the worth that they supply, if they supply one in any respect. In the event that they don’t, auto shall be used as a fallback, which net browsers resolve to 1px. That is superb in the event you aren’t choosy, but it surely’s nonetheless unreliable (and clearly fairly area of interest).
We will, nevertheless, specify a proportion worth as an alternative, which can be sure that the thickness is relative to the font-size. So, if text-decoration-thickness: from-font simply isn’t reducing it, then we’ve that as a backup (one thing between 8% and 12% ought to do it).
Don’t underestimate CSS models
You most likely already find out about vw and vh models (viewport width and viewport peak models). These characterize a proportion of the viewport’s width and peak respectively, so 1vw for instance could be 1% of the viewport’s width. These models might be helpful by themselves or inside a calc() operate, and used inside any property that accepts a
Nonetheless, there are many different, lesser-known models that may be helpful in an identical manner:
1ex: equal to the computed x-height1cap: equal to the computed cap peak1ch: equal to the computed width of the0glyph1lh: equal to the computedline-height(so long as you’re not trimming or including to its content material field, for instance utilizingtext-boxorpadding, respectively,lhmodels might be used to find out the peak of a field that has a set variety of traces)
And once more, you should utilize them, their logical variants (e.g., vi and vb), and their root variants (e.g., rex and rcap) inside any property that accepts a
As well as, in the event you’re utilizing container measurement queries, you’re additionally free to make use of the next container question models inside the containment contexts:
1cqw: equal to 1% of the container’s computed width1cqh: equal to 1% of the container’s computed peak1cqi: equal to 1% of the container’s computed inline measurement1cqb: equal to 1% of the container’s computed block measurement1cqmin: equal to1cqior1cqb, whichever is smallest1cqmax: equal to1cqior1cqb, whichever is largest
That inherit() instance from earlier, you understand, the one which isn’t at the moment supported by any net browser? Right here’s the identical factor however with container measurement queries:
header {
peak: 3rem;
container: header / measurement;
@container header (width) {
button {
peak: 100%;
border-radius: calc(100cqh * 0.3);
padding-inline: calc(100cqh * 0.5);
}
}
}Or, since we’re speaking a couple of container and its direct little one, we are able to use the next shorter model that doesn’t create and question a named container (we don’t want to question the container anyway, since all we’re doing is stealing its models!):
header {
peak: 3rem;
container-type: measurement;
button {
peak: 100%;
border-radius: calc(100cqh * 0.3);
padding-inline: calc(100cqh * 0.5);
}
}Nonetheless, remember that inherit() would allow us to inherit something, whereas container measurement queries solely allow us to inherit sizes. Additionally, container measurement queries don’t work with inline containers (that’s why this model of the container is horizontally stretched), to allow them to’t remedy each drawback anyway.
In a nutshell
I’m simply going to throw compute() on the market once more, as a result of I feel it’d be a extremely nice method to get the values of different CSS properties:
button {
/* self might be the default */
border-radius: compute(peak, self);
/* inherit might work like inherit() */
border-radius: compute(peak, inherit);
/* Good to have, however not as essential */
border-radius: compute(peak, #this);
}But when it’s simply not attainable, I actually like the concept of introducing extra currentColor-like key phrases. Apart from key phrases like from-font the place the font maker supplies the worth (or not, sigh), key phrases resembling currentWidth and currentHeight could be extremely helpful. They’d make CSS simpler to learn, and we wouldn’t need to create as many customized properties.
Within the meantime although, customized properties, aspect-ratio, and sure CSS models might help us in the fitting circumstances, to not point out that we’ll be getting inherit() sooner or later. These are closely geared in direction of getting widths and heights, which is ok as a result of that’s undoubtedly the most important drawback right here, however hopefully there are extra CSS options on the horizon that permit values for use in additional locations.
