CSSResponsive theo kích thước container thay vì viewport. @container (min-width: 400px) { ... }. Container phải có container-type: inline-size (và tuỳ chọn container-name để query có tên khi dùng nhiều containers lồng nhau).
Ngoài size queries, CSS 2023 còn hỗ trợ container style queries — query giá trị custom property: @container style(--featured: true) { ... }. Browser support: baseline 2023. Lợi thế so với media queries: cùng component có thể hiển thị khác nhau tùy vị trí đặt, không cần biết viewport.
Responsive styling based on the container's size rather than the viewport. @container (min-width: 400px) { ... }. The container must have container-type: inline-size (and optionally a container-name when querying multiple nested containers).
Beyond size queries, CSS 2023 also supports container style queries — querying custom property values: @container style(--featured: true) { ... }. Browser support: baseline 2023. Key advantage over media queries: the same component can display differently depending on where it's placed, without needing to know the viewport size.