Container Queries and new CSS to go along with them
The [CSS Containment Module Level 3](https://drafts.csswg.org/css-contain-3/#propdef-container-type) has a formal definition of containers, container queries, and container relative length units. This post contains both parts that are supported in Chromium browsers behind a flag and others that are under development. **It is not production code and should not be used as such**. ## Defining the container Before we use container relative length units we need to define a container that the units will refer to. Containers allow you to create a finer-grained level of sizing for components that will be more specific than regular units (that refer to a window) or viewport units that refer to the viewport (usually the same as the window) If you set a container, then you can choose to size the components based on the container's size rather than the viewport or Window. The following table shows the different values for the `contain` property. Some of these values were defined in the level 2 CSS containment module so I indicate the spec version they were defined in. | Types of Containment | Spec Introduced in | Description | | --- | --- | --- | | **Size** | Level 2 | size: The size of the element can be computed without checking its children, the element dimensions are independent of its contents. | | **Layout** | Level 2 | The internal layout of the element is totally isolated from the rest of the page, it’s not affected by anything outside and its contents cannot have any effect on the ancestors. | | **Style** | Level 2 | The effects of counters and quotes cannot escape this element, so they are isolated from the rest of the page. | | **Paint** | Level 2 | Descendants of the element cannot be displayed outside its bounds, nothing will overflow this element (or if it does it won’t be visible). | | **Inline-size** | Level 3 | Descendants of the element will only respond to changes on the element's width, the inline axis in left-to-write languages. | | **Block-size** | Level 3 | Descendants of the element will only respond to changes on the element's height, the block axis in left-to-write languages. | There are also two compound values that you can use as shorthand for defining multiple types of containment. * **content**: Which is equivalent to contain: layout paint style. * **strict**: This is equivalent to contain: layout paint size style. An example of a container ready to handle container relative sizes could look like this: ```css .card-container { contain: layout content inline-size style; } ``` This container uses the new `inline-size` and the `layout` and `style` containment values from the level 2 specification to indicate the expected behavior for the children of the container. We then define the elements that we want to use inside the container. ```css .card { display: flex; flex-direction: column; flex-wrap: wrap; gap: 1rem; } .card--thumb { aspect-ratio: 1 / 1; flex: 0 0 150px; background-color: #663399; border-radius: 7px; } .card-title { font-weight: bold; font-size: 1.5rem; margin-bottom: 0.5rem; } .card--content { flex: 1; } ``` We then use one or more `@container` at-rule to define the changes that we want to make based on the size of the container. ```css @container (min-width: 400px) { .card { flex-direction: row; } .thumb { flex: 0 0 100px; align-self: flex-start; } } @container (min-width: 600px) { .card--thumb { flex: 0 0 150px; } } @container (min-width: 800px) { .card { position: relative; justify-content: center; align-items: center; min-height: 350px; } .thumb { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0.25; } .content { position: relative; flex: unset; } .title { font-weight: bold; font-size: 1.5rem; margin-bottom: 0.5rem; } .desc { max-width: 480px; margin-left: auto; margin-right: auto; text-align: center; color: #222; } } ``` In the near future, we will have to change the code above to accommodate the new syntax as specified in this tweet:
### Container type !!! note **Note:** The properties described below are different than the contain properties in the CSS Containment Module Level 2. You can use `container-type` without using `contain`. !!! The `container-type` property establishes the element as a query container for the purpose of container queries, allowing style rules styling its descendants to query various aspects of its sizing, layout, and style and respond accordingly. The available values are: `size` : Establishes a query container for size queries on both the inline and block axis. Applies layout, style, and size containment to the principal box. `inline-size` : Establishes a query container for size queries on the container’s own inline axis. Applies layout, style, and inline-size containment to the principal box. `block-size` : Establishes a query container for size queries on the container’s own block axis. Applies layout, style, and block-size containment to the principal box. `style` : Establishes a query container for style queries. `state` : Establishes a query container for state queries. : They have been pushed to the next level of the CSS containment specification ### Container name The container-name property specifies a list of query container names. These names can be used by `@container` rules to filter which query containers are targeted. `none` : The query container has no query container name. `⚠️ Existing Container Query demos are broken in the latest Chrome Canary. It's just a small syntax change:
— Mia, Keeper of All Gates (@TerribleMia) December 3, 2021
🥳 We're adding the ability to query container styles, not just size size. So we have to be explicit about query type, eg:
size(min-width: 30em) and style(--card: large)