5 exercises on modern CSS features — container queries, @layer, :has(), and subgrid.
0 / 5 completed
1 / 5
What problem do CSS container queries solve that media queries cannot?
Container queries: a card component used in a narrow sidebar and a wide main column may need different layouts, but the viewport size is the same. Container queries let the card adapt to its containing element's size, enabling truly reusable components.
2 / 5
What does the @layer CSS rule do?
@layer: rules in later layers win over earlier ones, regardless of specificity. You can declare order with @layer reset, base, utilities; and then fill each layer, so utilities beat base styles without needing high specificity selectors.
3 / 5
What does the CSS :has() pseudo-class select?
:has():form:has(input:invalid) selects any form that contains an invalid input. Called the "parent selector", it allows styling ancestors based on descendant state, something previously impossible in CSS alone.
4 / 5
What is CSS subgrid?
Subgrid: with grid-template-columns: subgrid, a child element participates in its parent's column tracks. Cards inside a grid row can align their headings, bodies, and footers across all cards without knowing each other's heights.
5 / 5
What must you set on a container element before using container queries against it?
container-type: without it the element is not a containment context. inline-size tracks width changes (the most common case). You can also name the container with container-name to query a specific ancestor.