net - UK (2020-05)

(Antfer) #1
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

Free download pdf