net - UK (2020-05)

of layout (including the Holy Grail of

CSS - vertical centering). Problem was,

however, browser adoption of Flex was

just too darned slow.

So help is needed when a property

doesn’t have full support across browsers

(which is quite often). This is where

Feature Queries work their magic. They

use a standard CSS query format – not

unlike the media queries we use to serve

properly scaled content - meaning that

we are able to offer up styles tailored

to our users’ browser capability range.

This doesn’t preclude us from writing

fallbacks, but it does ensure that we can

always employ the best possible styles

whenever possible.

Working with backdrop-

filter

While vertical centering in two lines is

pretty neat, have you ever tried achieving

a frosted-glass background effect with

just one? You’ll be delighted to know (in

case you didn’t already) that backdrop-

filter is a thing and it can do just that –

unless of course you happen to be an avid

Firefox fan.

Now we’ll admit, it’s highly unlikely

that a frosted glass blurred backdrop

effect is a make-or-break factor of

your user experience. But it is entirely

plausible that the absence of this filter

will make a particular component look

pretty janky, because the contrast

between the blurred background content

and the overlaying text creates a very

necessary visual distinction.

So here’s the part where @supports

works its magic. If background content

cannot be blurred to create that

separation, then as a handy fallback and

a helpful pseudo element the opacity on

the overlay is increased. This doesn’t

create the exact effect, but it’s certainly

the next best thing using the properties

that happen to be available, which is

exactly the kind of use case Feature

Queries are just perfect for.

Using properties without

any support

Let’s take a look at another example of

a shiny new CSS property that could go

very, very wrong without proper browser

support: motion-path. In this CodePen

example by this article’s author - https://

codepen.io/cobra_winfrey/pen/yrxddx – I

have taken an email capture, split up the

user input by characters and got them to

‘fly’ into a hive upon submission. In order

to achieve a sort of random, frenetic bee-

like flight behaviour, I used the relatively

newly implemented offset-path property.

For the uninitiated, offset-path enables

us to leverage CSS to transition, animate

or simply place an element along an

SVG path, giving us the sort of precision

motion control that would otherwise be

incredibly tedious if having to use other

positioning properties.

Awesome, right? But here’s where our

troubles begin: after a quick check of

Can I Use (caniuse.com), it would seem

that compatibility for offset-path only

appears in later versions of Firefox and

Chrome. While we’ve grown accustomed

to support for advanced features ending

at Internet Explorer (which still might

merit some consideration for graceful

degradation yet does not support Feature

Queries), there are still many outliers

like this. And running this animation

without the presence of offset-path will

only result in – as you might expect – an

unpolished mess.

Feature Queries use a standard CSS

query format, meaning that we are

able to offer up styles tailored to our

users’ browser capability range

FEATURESFEATURES
How CSS feature queries work