@supports (grid-row-gap: 20px){ }This seems like an oddly specific
property, sure – but what we’re really
looking for is any browser support of
grid-row-gap. You might have guessed it
by now – Internet Explorer only partially
supports CSS Grid specification, and
grid-row-gap is one of the many sub-
properties not supported. Oddly specific,
yes, but also potentially critical for layout.
While we’ve spent a lot of time on CSS
Grid, detecting support will likely play a
renewed role in layout and positioning as
subgrid – that is, child grid elements with
properties unique and detached from
parent grid elements – is on track for
growing adoption.other for proper display. It might look
something like this:@supports (display: grid) and (mix-blend-
mode: difference){ }Furthermore, we can also use an
operator to test if one of multiple
properties is supported before then
delivering our CSS accordingly. And in
keeping with the flow of the cascade,
we should also keep in mind that some
older browser versions (and yet again, all
versions of Internet Explorer) do not yet
support Feature Queries.
Something that’s also important to
note: Feature Queries can detect partial
support for varying sub-properties.Essential resources
The go-to guide for browser
support
caniuse.com
As has been noted throughout this
article, there is no better single source of
information regarding browser support to
help inform your Feature Queries than Can
I Use. Developer Alexis Deveria is doing
a yeoman’s work here, with clean and
easily searchable visual guides to browser
support, with historical context included.The magic of Feature Queries
https://www.youtube.com/
watch?v=T8uxmUQZsck
Few developers work harder to share CSS
knowledge and build a community the way
that Jen Simmons does. In her Layout Land
video series, she breaks down a number
of advanced CSS properties into digestible
pieces and in this particular instance,
provides some excellent insights and use
cases for Feature Queries.One-stop testing solution
https://github.com/ireade/feature-queries-
manager
Sometimes we can’t access certain
browsers to properly test our CSS, and
toggling features on and off can be a pain.
Fortunately Ire Aderinokun created this
browser extension to toggle between @
supports() and @supports not() – thereby
showing how our CSS would appear to
users targeted by our Feature Queries.We can use an operator to test
if one of multiple properties is
supported before then delivering
our CSS accordingly
Sometimes, we are faced with browsers
that don’t offer support on multiple
specific fronts. Fortunately, Feature
Queries (in the same way as media
queries) afford us the ability to chain
them with multiple conditions.
Let’s look at an example – pretend
we’d like to employ positioning and
filter properties that are reliant on each
How CSS feature queries work