The stunning conduct of !essential in CSS customized property values

Huh! I didn’t notice that CSS customized properties had their very own decision conduct for the way !essential works of their values. Uh, regardless of writing a information about them. 😬 However hey it’s now up to date.

Stefan Judis paperwork it clearly. The deal is that !essential is in no way used within the ultimate worth. So:

div {
–color: crimson !essential;
coloration: var(–color);
coloration: yellow;
}

It kinda looks like crimson ought to win, however as a result of !essential is finally stripped from the customized property worth, yellow wins it out. And it’s not as a result of the colour declaration comes final — if coloration: crimson !essential; was the primary declaration, then crimson would win.

However it’s not like !essential is simply stripped and ignored; it’s utilized in a scoped approach, affecting which customized property worth wins. However then !essential is gone when that worth is utilized. Stefan’s instance:

div {
/*
`!essential` overrules the
different `–color` definitions
*/
–color: crimson !essential;
coloration: var(–color);
}

.class {
–color: blue;
}

#id {
–color: yellow;
}

This feels bizarre (to me) as you’d assume yellow declared on #id would win as a result of it has the best specificity. However that’s the take care of the scoped conduct — !essential makes crimson the winner, then is utilized to the colour as such.

To Shared Hyperlink — Permalink on CSS-Tips