Container queries are sometimes thought-about a contemporary method to responsive net design the place conventional media queries have lengthy been the gold normal — the reason is that we will create layouts made with parts that reply to, say, the width of their containers somewhat than the width of the viewport.
.dad or mum {
container-name: hero-banner;
container-type: inline-size;
/* or container: hero-banner / inline-size; */
}
}
.baby {
show: flex;
flex-direction: column;
}
/* When the container is larger than 60 characters... */
@container hero-banner (width > 60ch) {
/* Change the flex course of the .baby ingredient. */
.baby {
flex-direction: row;
}
}Why care about CSS Container Queries?
- When utilizing a container question, we give parts the flexibility to alter based mostly on their container’s dimension, not the viewport.
- They permit us to outline the entire types for a selected ingredient in a extra predictable means.
- They’re extra reusable than media queries in that they behave the identical irrespective of the place they’re used. So, in case you have been to create a element that features a container question, you might simply drop it into one other undertaking and it’ll nonetheless behave in the identical predictable style.
- They introduce new varieties of CSS size models that can be utilized to dimension parts by their container’s dimension.
Registering Parts as Containers
.playing cards {
container-name: card-grid;
container-type: inline-size;
/* Shorthand */
container: card-grid / inline-size;
}This instance registers a brand new container named card-grid that may be queried by its inline-size, which is a flowery means of claiming its “width” once we’re working in a horizontal writing mode. It’s a logical property. In any other case, “inline” would confer with the container’s “peak” in a vertical writing mode.
- The
container-nameproperty is used to register a component as a container that applies types to different parts based mostly on the container’s dimension and types.
- The
container-typeproperty is used to register a component as a container that may apply types to different parts when it meets sure situations.
- The
containerproperty is a shorthand that mixes thecontainer-nameandcontainer-typeproperties right into a single declaration.
Some Potential Gotchas
- The
container-nameproperty is optionally available. An unnamed container will match any container question that doesn’t goal a selected container, which means it might match a number of situations. - The
container-typeproperty is required if we wish to question a container by itsdimensionorinline-size. Thedimensionrefers back to the container’s inline or block course, whichever is bigger. Theinline-sizerefers back to the container’s width within the default horizontal writing mode. - The
container-typeproperty’s default worth isregular. And by “regular” which means all parts are containers by default, solely they’re referred to as Type Containers and may solely be queried by their utilized types. For instance, we will question a container’sbackground-colorworth and apply types to different parts when the worth is a sure colour worth. - A container can’t change its personal types. Relatively, they alter the types of their contents as an alternative. In different phrases, we can’t change the container’s
background-colorwhen it’s a sure dimension — however we will change thebackground-colorof any ingredient inside the container. “You can’t type what you question” is a means to consider it. - A container can’t be sized by what’s in it. Usually, a component’s contents affect its dimension — as in, the extra content material in it, the bigger it will likely be, and vice versa. However a container should be sized explicitly as a part of a flex or grid format.
Querying a Container
@container my-container (width > 60ch) {
article {
flex-direction: row;
}
}- The
@containerat-rule property informs the browser that we’re working with a container question somewhat than, say, a media question (i.e.,@media).
- The
my-containerhalf in there refers back to the container’s identify, as declared within the container’scontainer-nameproperty.
- The
articleingredient represents an merchandise within the container, whether or not it’s a direct baby of the container or an additional ancestor. Both means, the ingredient should be within the container and it’ll get types utilized to it when the queried situation is matched.
Some Potential Gotchas
- The container’s identify is optionally available. If we go away it out, then any registered container would match when the situations are met.
- A container’s
widthwill be queried with when thecontainer-typeproperty is about to bothdimensionorinline-size. That’s as a result ofdimensioncan question the ingredient’swidthorpeak; in the meantime,inline-sizecan solely confer with thewidth. - You’ll be able to question any size. So, along with
width(i.e.,inline-size), there’s a component’saspect-ratio,block-size(i.e.,peak), and orientation (e.g.portraitandpanorama). - Queries help the vary syntax. Many of the examples up to now have proven “higher than” (
>) and “lower than” (<), however there’s additionally “equals” (=) and mixtures of the three, equivalent to “greater than or equal to” (>=) and “lower than or equal to” (<=). - Queries will be chained. Which means we will write queries that meet a number of situations with logical key phrases, like
and,or, andnot.
Container Queries Properties & Values
Container Queries Properties & Values
container-name
container-name: none | <custom-ident>+;Worth Descriptions
none: The ingredient doesn’t have a container identify. That is true by default, so you’ll doubtless by no means use this worth, as its goal is only to set the property’s default habits.<custom-ident>: That is the identify of the container, which will be something, aside from phrases which are reserved for different capabilities, together withdefault,none,at,no, andor. Notice that the names usually are not wrapped in quotes.
- Preliminary worth:
none - Applies to: All parts
- Inherited: No
- Percentages: N/A
- Computed worth:
noneor an ordered record of identifiers - Canonical order: Per grammar
- Animation: Not animatable
container-type
container-type: regular | dimension | inline-size;Worth Descriptions
regular: This means that the ingredient is a container that may be queried by its types somewhat than dimension. All parts are technically containers by default, so we don’t even have to explicitly assign acontainer-typeto outline a method container.dimension: That is if we wish to question a container by its dimension, whether or not we’re speaking concerning the inline or block course.inline-size: This enables us to question a container by its inline dimension, which is equal towidthin a normal horizontal writing mode. That is maybe essentially the most generally used worth, as we will set up responsive designs based mostly on ingredient dimension somewhat than the scale of the viewport as we’d usually do with media queries.
- Preliminary worth:
regular - Applies to: All parts
- Inherited: No
- Percentages: N/A
- Computed worth: As specified by key phrase
- Canonical order: Per grammar
- Animation: Not animatable
container
container: <'container-name'> [ / <'container-type'> ]?Worth Definitons
If <'container-type'> is omitted, it’s reset to its preliminary worth of regularwhich defines a method container as an alternative of a dimension container. In different phrases, all parts are type containers by default, until we explicitly set the container-type property worth to both dimension or inline-size which permits us to question a container’s dimension dimensions.
- Preliminary worth:
none/regular - Applies to: All parts
- Inherited: No
- Percentages: N/A
- Computed worth: As specified
- Canonical order: Per grammar
- Animation: Not animatable
Container Size Models
Container Width & Top Models
| Unit | Identify | Equal to… |
|---|---|---|
cqw |
Container question width | 1% of the queried container’s width |
cqh |
Container question peak | 1% of the queried container’s peak |
Container Logical Instructions
| Unit | Identify | Equal to… |
|---|---|---|
cqi |
Container question inline dimension | 1% of the queried container’s inline dimension, which is its width in a horizontal writing mode. |
cqb |
Container question block dimension | 1% of the queried container’s inline dimension, which is its peak in a horizontal writing mode. |
Container Minimal & Most Lengths
| Unit | Identify | Equal to… |
|---|---|---|
cqmin |
Container question minimal dimension | The worth of cqi or cqb, whichever is smaller. |
cqmax |
Container question most dimension | The worth of cqi or cqb, whichever is bigger. |
Container Type Queries
Container Type Queries is one other piece of the CSS Container Queries puzzle. As a substitute of querying a container by its dimension or inline-size, we will question a container’s CSS types. And when the container’s types meet the queried situation, we will apply types to different parts. That is the form of “conditional” styling we’ve needed on the internet for a very long time: If these types match over right here, then apply these different types over there.
CSS Container Type Queries are solely accessible as an experimental function in fashionable net browsers on the time of this writing, and even then, type queries are solely able to evaluating CSS {custom} properties (i.e., variables).
Browser Help
The function remains to be thought-about experimental on the time of this writing and isn’t supported by any browser, until enabled by means of function flags.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 128 | No | No | 125 | TP |
Cell / Pill
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 125 | No | 125 | No |
Registering a Type Container
article {
container-name: card;
}That’s actually it! Truly, we don’t even want the container-name property until we have to goal it particularly. In any other case, we will skip registering a container altogether.
And in case you’re questioning why there’s no container-type declaration, that’s as a result of all parts are already thought-about containers. It’s so much like how all parts are place: relative by default; there’s no have to declare it. The one purpose we’d declare a container-type is that if we would like a CSS Container Measurement Question as an alternative of a CSS Container Type Question.
So, actually, there isn’t any have to register a container type question as a result of all parts are already type containers proper out of the field! The one purpose we’d declare container-name, then, is just to assist choose a selected container by identify when writing a method question.
Utilizing a Type Container Question
@container type(--bg-color: #000) {
p { colour: #fff; }
}On this instance, we’re querying any matching container (as a result of all parts are type containers by default).
Discover how the syntax it’s so much like a conventional media question? The most important distinction is that we’re writing @container as an alternative of @media. The opposite distinction is that we’re calling a type() operate that holds the matching type situation. This manner, a method question is differentiated from a dimension question, though there isn’t any corresponding dimension() operate.
On this occasion, we’re checking if a sure {custom} property named --bg-color is about to black (#000). If the variable’s worth matches that situation, then we’re setting paragraph (p) textual content colour to white (#fff).
Customized Properties & Variables
.card-wrapper {
--bg-color: #000;
}
.card {
@container type(--bg-color: #000) {
/* Customized CSS */
}
}Nesting Type Queries
@container type(--featured: true) {
article {
grid-column: 1 / -1;
}
@container type(--theme: darkish) {
article {
--bg-color: #000;
--text: #fff;
}
}
}Specification
CSS Container Queries are outlined within the CSS Containment Module Degree 3 specification, which is at the moment in Editor’s Draft standing on the time of this writing.
Browser Help
Browser help for CSS Container Measurement Queries is nice. It’s simply type queries which are missing help on the time of this writing.
- Chrome 105 shipped on August 30, 2022, with help.
- Safari 16 shipped on September 12, 2022, with help.
- Firefox 110 shipped on February 14, 2023, with help.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 106 | 110 | No | 106 | 16.0 |
Cell / Pill
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 125 | 126 | 125 | 16.0 |
Demos!
Card Element
On this instance, a “card” element modifications its format based mostly on the quantity of obtainable area in its container.
Name to Motion Panel
This instance is so much like these little panels for signing up for an electronic mail publication. Discover how the format modifications thrice in line with how a lot accessible area is within the container. That is what makes CSS Container Queries so highly effective: you’ll be able to fairly actually drop this panel into any undertaking and the format will reply because it ought to, because it’s based mostly on the area it’s in somewhat than the scale of the browser’s viewport.
Stepper Element
This element shows a sequence of “steps” very similar to a timeline. In wider containers, the stepper shows steps horizontally. But when the container turns into sufficiently small, the stepper shifts issues round in order that the steps are vertically stacked.
Icon Button
Generally we like to embellish buttons with an icon to intensify the button’s label with a little bit extra which means and context. And typically we don’t know simply how extensive that button shall be in any given context, which makes it powerful to know when precisely to cover the icon or re-arrange the button’s types when area turns into restricted. On this instance, an icon is exhibited to the fitting fringe of the button so long as there’s room to suit it beside the button label. If room runs out, the button turns into a sq. tile that stacks the icons above the label. Discover how the border-radius is about in container question models, 4cqi, which is the same as 4% of the container’s inline-size (i.e. width) and leads to rounder edges because the button grows in dimension.
Pagination
Pagination is a good instance of a element that advantages from CSS Container Queries as a result of, relying on the quantity of area we’ve got, we will select to show hyperlinks to particular person pages, or cover them in favor of solely two buttons, one to paginate to older content material and one to paginate to newer content material.
Articles & Tutorials
Common Info
Article
on
Oct 4, 2022
Say Whats up to CSS Container Queries
Article
on
Dec 16, 2019
The Origin Story of Container Queries
Article
on
Jun 11, 2021
A Cornucopia of Container Queries
Article
on
Apr 6, 2017
Container Question Dialogue
Article
on
Jul 1, 2015
Container Queries: As soon as Extra Unto the Breach
Article
on
Aug 29, 2022
Subsequent Gen CSS: @container
Article
on
Might 17, 2021
251: Container Queries are the Future
Article
on
Oct 9, 2019
Let’s Not Neglect About Container Queries
Article
on
Dec 2, 2020
Minimal Takes on Faking Container Queries
Article
on
Nov 12, 2020
