Container queries are sometimes thought-about a contemporary strategy to responsive internet design the place conventional media queries have lengthy been the gold normal — the reason is that we are able to create layouts made with parts that reply to, say, the width of their containers moderately than the width of the viewport.
.mum or dad {
container-name: hero-banner;
container-type: inline-size;
/* or container: hero-banner / inline-size; */
}
}
.little one {
show: flex;
flex-direction: column;
}
/* When the container is bigger than 60 characters... */
@container hero-banner (width > 60ch) {
/* Change the flex path of the .little one factor. */
.little one {
flex-direction: row;
}
}
Why care about CSS Container Queries?
- When utilizing a container question, we give parts the power to alter primarily based on their container’s dimension, not the viewport.
- They permit us to outline the entire types for a specific factor in a extra predictable approach.
- They’re extra reusable than media queries in that they behave the identical regardless of the place they’re used. So, should you have been to create a element that features a container question, you would 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 elaborate approach of claiming its “width” after we’re working in a horizontal writing mode. It’s a logical property. In any other case, “inline” would discuss with the container’s “top” in a vertical writing mode.
- The
container-name
property is used to register a component as a container that applies types to different parts primarily based on the container’s dimension and types.
- The
container-type
property is used to register a component as a container that may apply types to different parts when it meets sure situations.
- The
container
property is a shorthand that mixes thecontainer-name
andcontainer-type
properties right into a single declaration.
Some Potential Gotchas
- The
container-name
property is optionally available. An unnamed container will match any container question that doesn’t goal a particular container, that means it might match a number of situations. - The
container-type
property is required if we need to question a container by itsdimension
orinline-size
. Thedimension
refers back to the container’s inline or block path, whichever is bigger. Theinline-size
refers back to the container’s width within the default horizontal writing mode. - The
container-type
property’s default worth isregular
. And by “regular” which means all parts are containers by default, solely they’re referred to as Model Containers and may solely be queried by their utilized types. For instance, we are able to question a container’sbackground-color
worth and apply types to different parts when the worth is a sure colour worth. - A container can not change its personal types. Fairly, they modify the types of their contents as a substitute. In different phrases, we can not change the container’s
background-color
when it’s a sure dimension — however we are able to change thebackground-color
of any factor inside the container. “You can not type what you question” is a approach 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 is going to 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
@container
at-rule property informs the browser that we’re working with a container question moderately than, say, a media question (i.e.,@media
).
- The
my-container
half in there refers back to the container’s identify, as declared within the container’scontainer-name
property.
- The
article
factor represents an merchandise within the container, whether or not it’s a direct little one of the container or an additional ancestor. Both approach, the factor 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
width
may be queried with when thecontainer-type
property is about to bothdimension
orinline-size
. That’s as a result ofdimension
can question the factor’swidth
ortop
; in the meantime,inline-size
can solely discuss with thewidth
. - You possibly can question any size. So, along with
width
(i.e.,inline-size
), there’s a component’saspect-ratio
,block-size
(i.e.,top
), and orientation (e.g.portrait
andpanorama
). - Queries help the vary syntax. Many of the examples up to now have proven “better than” (
>
) and “lower than” (<
), however there may be additionally “equals” (=
) and mixtures of the three, corresponding to “greater than or equal to” (>=
) and “lower than or equal to” (<=
). - Queries may be chained. Which means we are able to 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 factor doesn’t have a container identify. That is true by default, so you’ll seemingly by no means use this worth, as its goal is solely to set the property’s default conduct.<custom-ident>
: That is the identify of the container, which may be something, aside from phrases which might be reserved for different capabilities, together withdefault
,none
,at
,no
, andor
. Notice that the names aren’t wrapped in quotes.
- Preliminary worth:
none
- Applies to: All parts
- Inherited: No
- Percentages: N/A
- Computed worth:
none
or an ordered checklist of identifiers - Canonical order: Per grammar
- Animation: Not animatable
container-type
container-type: regular | dimension | inline-size;
Worth Descriptions
regular
: This means that the factor is a container that may be queried by its types moderately than dimension. All parts are technically containers by default, so we don’t even have to explicitly assign acontainer-type
to outline a method container.dimension
: That is if we need to question a container by its dimension, whether or not we’re speaking in regards to the inline or block path.inline-size
: This permits us to question a container by its inline dimension, which is equal towidth
in an ordinary horizontal writing mode. That is maybe probably the most generally used worth, as we are able to set up responsive designs primarily based on factor dimension moderately 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 regular
which defines a method container as a substitute of a dimension container. In different phrases, all parts are type containers by default, except 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 Items
Container Width & Peak Items
Unit | Title | Equal to… |
---|---|---|
cqw |
Container question width | 1% of the queried container’s width |
cqh |
Container question top | 1% of the queried container’s top |
Container Logical Instructions
Unit | Title | 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 top in a horizontal writing mode. |
Container Minimal & Most Lengths
Unit | Title | 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 Model Queries
Container Model 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 are able to question a container’s CSS types. And when the container’s types meet the queried situation, we are able to apply types to different parts. That is the kind 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 Model Queries are solely obtainable as an experimental function in trendy internet 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, except enabled by way of function flags.
Desktop
Chrome | Firefox | IE | Edge | Safari |
---|---|---|---|---|
128 | No | No | 125 | TP |
Cellular / Pill
Android Chrome | Android Firefox | Android | iOS Safari |
---|---|---|---|
125 | No | 125 | No |
Registering a Model Container
article {
container-name: card;
}
That’s actually it! Truly, we don’t even want the container-name
property except we have to goal it particularly. In any other case, we are able to skip registering a container altogether.
And should 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 loads like how all parts are place: relative
by default; there’s no have to declare it. The one motive we’d declare a container-type
is that if we wish a CSS Container Dimension Question as a substitute of a CSS Container Model Question.
So, actually, there is no such thing as a have to register a container type question as a result of all parts are already type containers proper out of the field! The one motive we’d declare container-name
, then, is solely to assist choose a particular container by identify when writing a method question.
Utilizing a Model 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 loads like a conventional media question? The largest distinction is that we’re writing @container
as a substitute of @media
. The opposite distinction is that we’re calling a type()
perform that holds the matching type situation. This manner, a method question is differentiated from a dimension question, though there is no such thing as a corresponding dimension()
perform.
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 Model 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 Dimension Queries is nice. It’s simply type queries which might be 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 |
Cellular / Pill
Android Chrome | Android Firefox | Android | iOS Safari |
---|---|---|---|
125 | 126 | 125 | 16.0 |
Demos!
Card Element
On this instance, a “card” element adjustments its format primarily based on the quantity of accessible house in its container.
Name to Motion Panel
This instance is loads like these little panels for signing up for an electronic mail publication. Discover how the format adjustments 3 times in line with how a lot obtainable house is within the container. That is what makes CSS Container Queries so highly effective: you possibly can fairly actually drop this panel into any undertaking and the format will reply because it ought to, because it’s primarily based on the house it’s in moderately than the scale of the browser’s viewport.
Stepper Element
This element shows a collection of “steps” very like 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 bit of extra that means and context. And typically we don’t know simply how huge that button might be in any given context, which makes it robust to know when precisely to cover the icon or re-arrange the button’s types when house turns into restricted. On this instance, an icon is exhibited to the suitable 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 house we now have, we are able to 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
Basic Info
Article
on
Oct 4, 2022
Say Hey 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
Could 17, 2021
251: Container Queries are the Future
Article
on
Oct 9, 2019
Let’s Not Overlook About Container Queries
Article
on
Dec 2, 2020
Minimal Takes on Faking Container Queries
Article
on
Nov 12, 2020