One of the goals when writing CSS is to build component parts that will adapt well to different (and unexpected) contexts. Ideally, a component can be placed inside any “container” element without it feeling broken or out of place. How can you accomplish this in a complex layout like a store where the primary component – the “product” – has to fit into a variety of list layouts, including the sidebar?
By default, 1cqi (1/100 container query inline size) is the same as 1svi
(1/100 small viewport inline size) because the “small”
viewport
acts as the initial container for any web page. In order to take full advantage
of the cqi unit, you need to define additional “containers” within the page.
The primary layout containers on this page are the product-list and
shopping-cart – so they are set to expose their inline-size.
product-list,
shopping-cart {
container-type: inline-size;
}Container units are powerful, but sometimes it’s useful to make more dramatic
changes in a component layout when the available size crosses a threshold. These
are often called breakpoints – since the fix is applied at the point when a
given layout begins to break. You may already be familiar with using @media to
add breakpoints based on the viewport size. The new @container rule works the
same way, but measuring container elements instead of the page!
See the Pen Baseline Bakery by @web-dot-dev on CodePen.
I chat with Bruce Lawson about all things CSS. We geek out over the latest and greatest features like Cascade Layers, @Scope, Mixins, and Container Queries – exploring how these features impact web design.
CSS Working Group updates from July
Over the last month, the CSS Working Group has determined we can loosen containment restrictions for query containers, and agreed on a syntax for special-case support queries (like support for the gap property in a flex context, or support for align-content in a block flow context).
What I’ve been working on as an Invited Expert
The CSS Working Group has regular face-to-face meetings (hybrid online/in-person) throughout the year, and they always result in a flurry of activity! Here’s a rundown of some highlights from the last few months, with a focus on the features I maintain.