Selector Support Queries

Firefox 69 was the first to implement selector feature queries, but other browsers are following suit. I’ll show you how it works, and how to start using this new feature query right away.

Part of a series tagged 'mozilla developer'

Styling Lists in CSS – October 1, 2019
Why is CSS so Weird? – October 3, 2019
What does <code>revert</code> do in CSS? – October 9, 2019
Faster Layouts with CSS Grid – October 14, 2019
Subgrid for Better Card Layouts – October 15, 2019
Laying out Forms using Subgrid – October 16, 2019
Why isn’t this CSS doing anything? – October 21, 2019
Inner & Outer Values of the Display Property – October 28, 2019
Scroll Snap in CSS – October 31, 2019
How do you wrap long words in CSS? – November 6, 2019
Use new selectors responsibly with selector queries – November 20, 2019

There are many ways to start using a new feature in CSS without waiting for full cross-browser support, but “feature queries” are the most clear and explicit. We can use them to test for browser support, and provide targeted styles only where they are supported. Now we can do the same with new selectors, like ::marker or :focus-visible!

Selector queries allow us to finesse browser-support in new ways

Data on support for the mdn-css_at-rules_supports_selector feature across the major browsers from caniuse.com