Summary

  • The W3C's first public CSS Containment Level 3 draft of 21 December 2021 introduced container queries as a way to test an element's surroundings within the document. An eligible ancestor supplies the dimensions; @container selects styles for descendants.
  • The 18 August 2022 Working Draft refined the syntax, including container-type: inline-size, named containers and container-relative units. Its main-column/sidebar example shows one media object changing layout according to local space.

The card was perfectly dressed for the main column: picture on the left, text on the right, generous space between them. Then the editor placed the same card in a sidebar. The image and paragraph squeezed into a strip that looked like a railway timetable after a fight. A media query could inspect the desktop browser window and declare it wide. It would be right about the window and useless to the card. The card's problem was the width of its immediate room.

The first public W3C CSS Containment Level 3 draft of 21 December 2021 stated the distinction plainly. Media queries can ask about the device or viewing environment, such as viewport dimensions. Container queries ask about elements inside the document: their boxes, and in the draft's wider design, aspects of their computed styles. A reusable component can live in several places on the same page. Its surroundings are a better tailor than the size of the whole shop.

The proposal put a contract between the host box and the contents. An author marks an eligible ancestor as a query container with container-type. Descendant styles inside an @container rule apply when that container meets the condition. Give the card enough inline space and its picture can sit beside the text; squeeze it into the sidebar and the picture stacks above. The same browser window can host both arrangements at once. The publisher decides where the card goes. CSS takes the measurements at each placement.

That measurement needs boundaries. If a box's width depended on the child layout selected by a query about that width, the design could chase its own tail. The W3C's 2021 architecture demonstration explained the practical step: define query containers and turn off content-based sizing where necessary. Containment makes the local measurement usable as an input to styling the descendants. The constraint is part of the bargain that gives a component honest information about its room.

The 18 August 2022 Working Draft gave readers a concrete main-content and sidebar example. It described a .media-object that changes from vertical to horizontal depending on the size of its container. container-type: inline-size makes an ancestor eligible for queries along the inline axis; size covers fuller size containment. A named container can give @container a specific target. The condition applies to descendants of that eligible container, so the rule stays attached to the component's local setting.

The draft also defined lengths such as cqw and cqi, expressed relative to a query container's width or inline size. A designer can therefore size a detail in proportion to the box the card actually occupies. Move the card, and the numbers travel with its room. The CSS Working Group's August announcement called out the inline-size containment, units and at-rule as the package of ideas in that update.

The syntax was being worked out in public. The 2021 first draft carried broader exploratory container-type options, including block-size and state. The 2022 draft's changes removed the single-axis block-size option and refined the initial value and shorthand. The W3C publication history records the first public draft in December 2021 and the revised Working Draft in August 2022. Those dates trace a design being narrowed toward workable local measurements, rather than a single rule arriving fully tailored.

Media queries kept their job: the whole window and device environment still matter. Container queries gave components their own ruler. The sidebar no longer had to pretend it was as wide as the desktop screen around it. The card could carry one design idea between rooms and dress for the room it was actually in.