First a container must be registered, and it can be queried.
Register a Container
Use a selector to register a container
.
.parent {
container-name: myname;
container-type: inline-size;
... other code
}
or, use the shorthand option
.parent {
container: myname / inline-size;
... other code
}
At the time of registration, two details - type
and name
- have to specified.
Container Type
container-type: ...
size
inline-size
normal
Container Name
container-name: <nameofcontainer>;
<nameofcontainer>
identifies the container especially useful if you may a scenario of multiple containers.
Query a Container
The container query starts with the @container
at-rule followed by the name of the container and the feature query.
div {
font-size: 2em;
}
@container myname (width: > 30ch)
{
div {
font-size: 3em;
}
}
container query to set font-size
for the div
inside the myname
container to 3em
if the feature width
is greater than 30ch
.
Features to Query
size-query...
width
height
inline-size
block-size
aspect-ratio
orientation
style-query...
style(property: value)
property
to be checked for value
.
for eg
@container contname style('background-color: blue') {
...
styles
...
}
The container query to apply styles if the background-color
of the container contname
is blue
Compound Queries
and
, or
and not
can be used to create compound queries
for eg
@container myname (width>30ch) and (height>100px) {
...
}
@container myname not (color: blue) {
...
}
Nested Container Queries
Container queries can be nested within other container queries.
for eg
@container myname (width>30ch) {
...
@container myname (background-color: blue) {
...
}
@container myname (background-color: red) {
...
}
}
Top comments (0)