As a user:
As a developer:
As a user:
As a developer:
.widget { inline-size: 100%; }
@media (inline-size >= 480px) {
.widget { inline-size: 100%; }
}
@media (inline-size >= 768px) {
.widget { inline-size: 50%; }
}
@media (inline-size >= 1024px) {
.widget { inline-size: 33.33%; }
}
.widget { inline-size: 100%; }
@media (inline-size >= 480px) {
.widget { inline-size: 50%; }
}
@media (inline-size >= 768px) {
.widget { inline-size: 33.33%; }
}
.widget { inline-size: 100%; }
@media (inline-size >= 480px) {
.widget.page-article { inline-size: 50%; }
}
@media (inline-size >= 768px) {
.widget { inline-size: 50%; }
.widget.page-article { inline-size: 33.33%; }
}
@media (inline-size >= 1024px) {
.widget { inline-size: 33.33%; }
}
.widget { inline-size: 100%; }
@media (inline-size >= 480px) {
.widget.page-article { inline-size: 50%; }
.widget.page-contact-form { inline-size: 89%; }
}
@media (inline-size >= 768px) {
.widget { inline-size: 50%; }
.widget.page-article { inline-size: 33.33%; }
.widget.page-contact-form { inline-size: 12.78%; }
}
@media (inline-size >= 1024px) {
.widget { inline-size: 33.33%; }
.widget.page-contact-form { inline-size: 52%; }
}
.widget { inline-size: 100%; }
@media (inline-size >= 480px) { /* ... */ }
@media (inline-size >= 661px) {
.page-whateva { inline-size: 651%; }
}
@media (inline-size >= 768px) { /* ... */ }
@media (inline-size >= 678px) {
.page-whateva { inline-size: 56%; }
}
<internal-dashboard>
<bar-widget />
<pie-widget />
<weather-widget size="large" />
<users-widget />
</internal-dashboard>
internal-dashboard {}
weather-widget {}
weather-widget[size="large"] {}
weather-widget[size="small"] {}
weather-widget {}
@media (inline-size >= 480px) {
weather-widget[size="large"] {}
weather-widget[size="small"] {}
}
@media (inline-size >= 768px) {
weather-widget[size="large"] {}
weather-widget[size="small"] {}
}
@media (inline-size >= 1024px) {
weather-widget[size="large"] {}
weather-widget[size="small"] {}
}
weather-widget {}
@media (inline-size >= 480px) {
weather-widget[size="large"] {}
weather-widget[size="small"] {}
.page-whateva weather-widget[size="large"] {}
.page-whateva weather-widget[size="small"] {}
}
@media (inline-size >= 768px) {
weather-widget[size="large"] {}
weather-widget[size="small"] {}
.page-whateva weather-widget[size="large"] {}
.page-whateva weather-widget[size="small"] {}
}
@media (inline-size >= 1024px) {
weather-widget[size="large"] {}
weather-widget[size="small"] {}
.page-whateva weather-widget[size="large"] {}
.page-whateva weather-widget[size="small"] {}
}
const $widget = document.querySelector(".widget");
const resizeObserver = new ResizeObserver((entries) => {
for (let entry of entries) {
if (entry.target.width > 640) {
entry.target.classList.add("widget--large");
} else {
entry.target.classList.remove("widget--large");
}
}
});
resizeObserver.observe($widget);
Which container can be queried for it’s size?
.product {
container-type: size;
}
container-type values | ||
size | x- and y-axis | |
inline-size | x-axis | |
normal | Disable element as query container for container size queries |
For what condition should we query?
@container (inline-size >= 400px) {}
Single condition
.product {
container-type: inline-size;
}
.product-body {
@container (inline-size >= 400px) {
/* ... */
}
}
Multiple conditions
.product {
container-type: size;
}
.product-body {
@container (inline-size >= 400px) and (block-size >= 200px) {
/* ... */
}
}
Target multiple containers
.page {
container-type: size;
container-name: folio;
}
.product-list {
container-type: inline-size;
container-name: list;
}
.product {
@container folio (inline-size >= 400px) and (block-size >= 200px) { /* ... */ }
@container list (inline-size >= 800px) { /* ... */ }
}
container
shorthand
.page {
container: folio / size;
}
.product-list {
container: list / inline-size;
}
.product {
@container folio (inline-size >= 400px) and (block-size >= 200px) { /* ... */ }
@container list (inline-size >= 800px) { /* ... */ }
}
Containment always has to be set on an ancestor.
.ancestor {
container-type: inline-size;
}
@container (inline-size >= 800px) {
.ancestor {
/* NOPE */
}
}
Containment always has to be set on an ancestor, because of the normal flow.
Credits: Normal Flow by Miriam Suzanne
.product {
container-type: size;
}
.product-grandchild {
block-size: 100cqb;
}
unit | relative to |
---|---|
cqw | 1% of a query container’s width |
cqh | 1% of aquery container’s height |
cqi | 1% of a query container’s inline size |
cqb | 1% of a query container’s block size |
cqmin | The smaller value of cqi or cqb |
cqmax | The larger value of cqi or cqb |
Query computed styles of query container.
.product {
container-type: normal;
}
.product-body {
@container style(background: red) {
/* ... */
}
}
= CSS conditionals
.dashboard {}
.page-whateva .dashboard {}
weather-widget {}
/* ... */
@media (inline-size >= 480px) {
weather-widget[size="large"] {}
weather-widget[size="small"] {}
.page-whateva weather-widget[size="large"] {}
.page-whateva weather-widget[size="small"] {}
}
@media (inline-size >= 768px) {
weather-widget[size="large"] {}
weather-widget[size="small"] {}
.page-whateva weather-widget[size="large"] {}
.page-whateva weather-widget[size="small"] {}
}
@media (inline-size >= 1024px) {
/* ... */
}
/* ... */
/* weather-widget.css */
.widget {
container-type: inline-size;
}
.widget-body {
@container (inline-size >= 480px) {}
@container (inline-size >= 768px) {}
@container (inline-size >= 1024px) {}
}
/* weather-widget.css */
.widget {
container-type: inline-size;
--wdgt-feature-a: false;
}
.widget-body {
@container (inline-size >= 480px) {
--wdgt-feature-a: true;
}
}
.widget-temperature {
display: none;
@container style(--wdgt-feature-a: true) {
display: block;
}
}
Container queries
Support in all major browser engines:
Partial support in Chrome