Learn CSS layout in-depth:
Chris Coyier
wrote about this recently
over at Frontend Masters.
As he (and several comments) mention,
grid and flexbox make
layout more responsive without
the need for queries.
That’s true!
But looking at the numbers,
I think we’re asking the wrong question.
Container (size) queries
shipped in Firefox on February 14, 2023 –
the last major browser to ship the feature.
Chrome/Edge and Safari shipped
a few months earlier,
in the fall of 2022.
CanIUse lists size queries support
in 93.49% of all tracked browsers,
with a Baseline status of
Newly Available.
In contrast,
Safari shipped CSS grid on March 27, 2017 –
and Edge un-prefixed the feature
on October 17 that same year.
CanIUse lists grid support
in 99.39% of all tracked browsers,
with a Baseline status of
Widely Available.
These are the two ‘stages’
of Baseline support,
as described on Google’s web.dev:
- Newly available:
The feature becomes supported
by all of the core browsers,
and is therefore interoperable.
- Widely available:
30 months has passed
since the newly interoperable date.
The feature can be used by most sites
without worrying about support.
Even in single-digits,
6% of the web
is still a big difference
in support.
Firefox was the first to support
flexbox behind a prefix,
and the last to un-prefix the feature
on March 18, 2014.
CanIUse shows flexbox support
in 99.9% of all tracked browsers.
Solidly in the wide support category
for Baseline,
but only a fraction more
than grid support.
Chris links the Chrome usage counters
for container queries.
I’m warned these numbers are extremely unreliable –
easily triggered by feature checks (e.g. Modernizr),
unused code in third-party libraries,
or popular outliers skewing the data –
so take this with truckloads of salt.
Here’s what I see:
The State of CSS survey
attempts to measure
how many web authors are using a feature.
This is also suspect, but
26.7% of 2023 respondents
‘have used’ container queries).
They didn’t have questions
about grid and flexbox.
With popular tools like Bootstrap
shipping flexbox-based grid systems,
it’s not surprising
to see it highly represented
in the Chrome use counter.
Maybe this data is meaningless.
But anecdotally,
it does seem like most developers are using flexbox,
a few are also using grid,
and everyone still has container queries
on their to-do list
once it has better support.
Container queries are basically brand new.
But what’s going on with grids?
The CanIUse defaults are broken:
By default,
CanIUse will show you
% of all users,
which is a very misleading number.
Since nearly 3% of browsers are untracked,
those support numbers will never go over 97% for new features.
I recommend opening the
CanIUse default display settings,
and selecting All tracked users.
You might also want to apply the ‘filtered’ view,
to see only browsers with more than
0.5% usage by default.
We can’t measure time in features released
As close observers of CSS
we often overestimate how long
these features have been around.
Especially with newer features
shipping every few months.
Our scale is off!
You’re still talking about container queries?!
That was before
color mixing and selector nesting, last year!
Try to keep up!
If you’re not learning
view transitions with anchor positions now,
you’ll be left behind!
I get it.
I’m in the CSS Working Group,
regularly discussing features
that won’t even become newly available
for another year or three.
At OddBird,
we often work on internal tools for clients –
building from scratch,
with little need for legacy support.
I’ve been thinking about
(and playing with)
container queries
for much longer than the
baseline wide support 30 months.
I wrote the specification,
and started building
demos in January 2021
(this demo is broken,
since the syntax changed several times).
But actual browser support
is barely over half-way there –
reaching 16 months next week.
This is still a very new feature,
despite our hype cycles moving on.
Large sites (and core features) are slow to change
Many developers are working in a context
with much more conservative legacy support policies –
often waiting for ‘full’ support of a new feature
before they even consider using it in production.
In conversations,
I especially hear concerns
about browsers like iOS Safari
that update more slowly,
sometimes requiring a much heavier OS update.
Safari on Mac may update in monthly-ish cycles,
but users with an old phone
are more often out-of-date.
Big sites are container ships
that will get stuck in the Suez Canal
during high winds,
or decimate the Francis Scott Key bridge
when there’s a power issue.
These ships are not easy to maneuver.
Sometimes they are maintaining essential resources
for a long tail of users on older devices –
sometimes they are weighed down
by the sheer scale of their organization.
Either way,
it takes some time to change course.
But it’s not just the sites
that are difficult to move.
Developers can start sprinkling
text-wrap: balance on headings
with a 5-minute pull request,
no matter how large the project.
But Layout Systems are core features,
and often rely on third-party tooling.
It’s one thing to install new light fixtures,
it’s another thing to replace
the entire hull of a ship.
Even with a smaller team,
a smaller project,
and a lighter browser-support matrix –
it doesn’t make sense to re-write your code base
or design system
every time a new feature comes out.
We started phasing out Susy
(our light-weight grid system)
on OddBird projects in 2015.
By 2017,
we were
recommending others do the same,
and we
officially deprecated
the project
on Jul 14, 2020.
Four years later,
OddBird.net/susy
still has the highest traffic of anything on our site,
and the susy package gets
nearly 19k weekly downloads on npm.
Learn CSS grid (yes, you need it)
There’s no rush to rip out
all your media queries,
and replace them with containers.
You’ll be fine waiting for
widely available support
and your next scheduled re-factor.
But if you’re still avoiding grid –
whatever your reasons –
you are, in fact, missing out.
CSS grid is one of the best features in CSS,
and one of the biggest time-savers
on every site we build.
I can imagine
it’s hard to re-write
a system built on flexbox.
Flexbox is a great feature,
and part of the web platform.
What more do you need?
But flexbox is designed for
content-out distribution,
not system-wide page layouts.
Using flexbox alone
is like only using inline text,
without paragraphs, divs, and other block elements.
You’re using half the system,
and it’s the more complicated half to manage.
At some point
people looked at grid and thought
“that looks complicated” –
then spent nearly a decade
over-complicating flexbox to compensate.
People still rely on third-party grid systems
like Bootstrap,
because flexbox needs to be coerced
into doing this job.
No!
Stop.
It’s time to learn grid. Right now.
You might not think you need it,
but you do.
Set down container queries,
and go learn grid.
