Now that the latest Chrome / Chromium browsers added support for CSS container queries without experimental flags, it is time for early adopters to review our existing code and update the syntax according to the current best practice.
Thanks to Una for suggesting to update my CSS container queries example here on The Practical DEV which had been inspired by Heydon Pickering's "Holy Albatross".
A CSS container queries example
Ingo Steinke, web developer ・ Jan 11 '22
How to Update Legacy Container Queries Code
Take this code written to work with the experimental container queries implementation in 2021. I will not use a code block so nobody can copy and paste the wrong code mistakenly.
Even without updating or extending Stylelint we are lucky that WebStorm/PhpStorm does not like our experimental contain
declaration which already looked hacky and unintuitive in the first place. So let's forget about the verbose style
and layout
values and use the new container-type
property to specify that our containment should be based on inline-size
.
Container-Type obsoletes the Contain Property
So here is updated code:
.container {
container-type: inline-size; /* obsoletes contain: */
}
@container (max-width: 640px) {
.container > * {
flex-basis: 100%;
}
}
That's all we have to do.
But let's proceed one step beyond the necessary changes to understand the new container-type
property.
Understanding the Container-Type Property
MDN informs us that
The container-type property can have the following values:
size
,inline-size
,block-size
,style
,state
.
But what do these container-type values do?
inline-size
As used in our example, inline-size
establishes a query container for dimensional queries on the inline axis of the container. Applies layout, style, and inline-size containment to the element.
This seems to be a typical use case for layout that can have one or more columns depending on the horizontal width available based on a real-world flexbox example. And if I understand correctly, just like we can use generic style properties like flex-start
or margin-block-start
to make our designs more independent from writing modes (directions of text flow), the inline axis does not necessarily have to be the horizontal width axis in any case so we prefer to use more generic names.
size
The size
value adds support for the block axis.
block-size
While block-size
only works with the block axis, but not the inline axis.
style
and state
Last but not least, both style
and state
sound so generic that even MDN leaves all the details to our imagination at the time of writing, so we don't care either now.
Obsolete properties
In older, experimental container query implementations (using contain:
instead of container-type
) we needed more verbose settings, but we can forget about this now as container queries have reached stable browser support without experimental feature flags in 2022.
So we don't need to define the containment for layout
anymore to enable container queries, neither do we need any style
to prevent dynamic style calculation causing infinite loops. Both is implicitly handled correctly using container-type
.
Top comments (0)