If you haven’t had the pleasure of viewing
developer Diana Smith’s ‘Francine’, an
impeccably detailed baroque-style portrait,
you can see it at https://diana-adrianne.com/
purecss-francine. Prepare to be blown away
by the sheer power of CSS (and the obscene
talent of Smith). That is, if you happen across
it in a more recent version of Chrome.
While Francine was only ever intended
as a fun side project designed to push the
limits of what we know of CSS, it’s also a
fantastic demonstration in code degradation
and browser compliance – loaded up
in Safari, we’re dealt an image missingmany of the finer details and occasionally
bearing some rather unsettling curvature.
Going further back and viewing in varying
versions of Internet Explorer, Francine
begins to resemble some kind of neo-cubist
experimental piece.
Could Feature Queries rescue a complex
piece like Francine? The answer is
complicated – the image’s magic is in its
realism, which will inevitably be sacrificed for
lack of support. But with the proper fallbacks,
we could at least deliver a compelling (if
rudimentary) figure and quell some of the
mutation in non-Chromium browsers.Francine: A browser support case study
Above Flex layout rendering discrepancies between Chrome
and Firefox
Left Backdrop-filter support offers a relatively simple
implementation for a frosted glass effect
Top Swarming bees follow a handful of motion-paths as
supported in Chrome and Firefox
Feature Queries to the
rescue, again
Detecting support (or lack thereof) for
offset-path enables me to tailor my
animation on a per-browser basis. Yes,
it is true that this will mean losing some
of the nuance offered by offset-path,
but in exchange for this we get to see
our bees safely land within the hive –
and ultimately the end user is offered
an experience that feels complete, as
if to say ‘we couldn’t offer you the full
intended experience, but we care about
our users enough in order to offer the
next best thing’.How Feature Queries can
help accessibility
So now that we’ve got the animation
example out of the way, let’s consider
how Feature Queries can also help us
quash on-page animations in the name of
improving accessibility.
Accessibility is a growing frontier - not
only due to recent legal mandates, but
also because of individuals working very
hard in good faith to make sure the web
is as inclusive as possible.
So how can Feature Queries help
us with accessibility and how does
animation factor in? Certain users mayChrome SafariHow CSS feature queries work