Customized Property Mind Twisters

No Comments

I’m a part of that 82% that obtained it incorrect in Lea’s quiz (tweet model).

Right here’s the code:

:root {
–accent-color: skyblue;

div {
–accent-color: revert;
background: var(–accent-color, orange);

So what background do I count on <div> to have?

My mind goes like this:

Properly, –accent-color is said, so it’s undoubtedly not orange (the fallback). The worth for the background is revert, so it’s basically background: revert;The background property doesn’t inherit although, and even when you pressure it to, it could inherit from the <physique>, not the basis. So… clear.



[Because the value is revert it] cancels out any creator types, and resets again to no matter worth the property would have from the person stylesheet and UA stylesheet. Assuming there is no such thing as a –accent-color declaration within the person stylesheet, and naturally UA stylesheets don’t set customized properties, then meaning the property doesn’t have a price.

Since customized properties are inherited properties (until they’re registered with inherits: false, however this one just isn’t), this implies the inherited worth trickles in, which is — you guessed it — skyblue.

Stephen posted an analogous quiz the opposite day:

CSS variable riddle: What colour will the <p> factor be?

— Shaw (@shshaw) June 4, 2021

Once more, my mind does it completely incorrect. It goes:

OK, effectively, –color is said, so it’s not blue (the fallback). It’s not purple as a result of the second declaration will override that one. So, it’s basically like p { colour: inherit; }.The <p> will inherit yellow from the <physique>, which it could have executed naturally anyway, however no matter, it’s nonetheless yellow.


Apparently inherit there may be truly inheriting from the subsequent place up the tree that units it, which html does, so inexperienced. That truly is now regular inheriting works. It’s only a mind tornado as a result of it’s simple to conflate colour the property with –color the customized property.

It additionally is likely to be helpful to know that once you truly declare a customized property with @property you’ll be able to say whether or not you need it to inherit or not. So that may change the sport with these mind twisters!

@property –property-name {
syntax: ‘<colour>’;
inherits: false;
initial-value: #c0ffee;

The publish Customized Property Mind Twisters appeared first on CSS-Tips. You may assist CSS-Tips by being an MVP Supporter.

    About Marketing Solution Australia

    We are a digital marketing company with a focus on helping our customers achieve great results across several key areas.

    Request a free quote

    We offer professional SEO services that help websites increase their organic search score drastically in order to compete for the highest rankings even when it comes to highly competitive keywords.

    Subscribe to our newsletter!

    More from our blog

    See all posts

    Leave a Comment