Day 54: testing for the support of a selector

posted on

It’s time to get me up to speed with modern CSS. There’s so much new in CSS that I know too little about. To change that I’ve started #100DaysOfMoreOrLessModernCSS. Why more or less modern CSS? Because some topics will be about cutting-edge features, while other stuff has been around for quite a while already, but I just have little to no experience with it.

Support for a CSS property isn’t the only thing you can check with @supports(), you can also check support for a selector.

I knew you can check whether a property is supported by the current browser and apply styles accordingly. 

<div hidden class="grid">
  Your browser supports <code>display: grid</code> 🎉
</div>
@supports (display: grid) {
  .grid {
    display: block
  }
}

What I didn’t know is that you can do the same, but for a selector using the selector() function.

<div hidden class="has">
  Your browser supports <code>:has()</code> 🎉
</div>
@supports selector(:has(a)) {
  .has {
    display: block
  }
}

You can also reverse the query.

@supports not selector(:has(a)) {
  /* You're Firefox, Opera Mini, etc. fallback */
}

See on CodePen

Further reading

Overview: 100 Days Of More Or Less Modern CSS