-
Oh hey, modern browser support forPermalink On twitter.com
:is()has gotten pretty good. Just a few holdouts. developer.mozilla.org/en-US/docs/Web/CSS/:is#browser_compatibility This clever selector does a few things… 🧵♻️ 43 Retweets ❤️ 173 Favorites Mood +8 🙂
-
Primarily: don't repeat yourself when nesting complex selectors: h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { ... } …becomes: :is(h1, h2, h3, h4, h5, h6) a { ... } Those savings grow with complexity: :is(ol, ul, menu) :is(ol, ul, menu) { … } …represents 9 combined selectorsOn twitter.com
-
It also gives us "forgiving" selector lists. Not every selector inside needs to be valid. The following would fail in all browsers, becausePermalink On twitter.com
::fakenot a valid selector: p, p::fake { ... } But this will match: :is(p, p::fake) { ... } (it always should have been this way) -
When it comes to the cascade, things get interesting.Permalink On twitter.com
:is()doesn't have the specificity of a normal class/pseudo-class/attribute. Instead it "takes the specificity of its most specific argument": :is(#id, .class) { ... } will match any .class with the specificity of an #id -
The whole selector takes on the highest specificity, even if that selector doesn't match anything. :is(#not#on#this#site, h2) { ... } Will match any h2, with a specificity of four ID selectors. If you're looking for weird specificity hacks… 👀Permalink On twitter.com
-
The underlying browser-engine logic is re-used by CSS Nesting: drafts.csswg.org/css-nesting/ And you _could_ pre-process Cascade Layers: @ layer a { … } @ layer b { … } to roughly… :is(#a#a, …) { … } :is(#b#b#b, …) { … } …as a fallback.Permalink On twitter.com