Modern CSS

Container queries, :has(), subgrid, scroll-driven animations — what shipped recently, what's still shaky, and the @supports fallback for each.

0 of 30 lessons complete~338 min total

Start track

Sort

Cascade Layers (@layer)IntermediateThe cascade normally resolves conflicts by specificity and source order, which is why large codebases end up in specificity arms races. @layer lets you sidestep that fight by declaring priority explicitly.12 min · 0/3 questions correct
Native CSS NestingIntermediateSass popularized writing nested selectors two decades ago. Now the browser does it natively — no build step, with one syntax quirk Sass never made you think about.11 min · 0/3 questions correct
Custom Properties (CSS Variables) Deep DiveIntermediateCustom properties are CSS variables is the beginner explanation. The interview-relevant part is how they inherit, cascade, and fail silently when they're wrong.12 min · 0/3 questions correct
:is() and :where() SelectorsIntermediateTwo selectors that look interchangeable and mostly are, except for one specificity difference that decides whether your reset is easy to override or a fight waiting to happen.10 min · 0/3 questions correct
Logical PropertiesIntermediatemargin-left assumes the page always flows left-to-right. The moment a product needs Arabic or Hebrew support, that assumption becomes a bug — logical properties are the fix that doesn't require a separate RTL stylesheet.11 min · 0/3 questions correct
Container QueriesIntermediateA media query only ever knows about the viewport. Container queries let a component react to the space its actual parent gives it — a sidebar vs. a full-width section — which is what finally makes a truly reusable component possible.13 min · 0/3 questions correct
SubgridIntermediateNesting a grid inside a grid item normally gives you two unrelated coordinate systems. subgrid lets the inner grid borrow the outer grid's actual track lines, so content in different items can finally line up.12 min · 0/3 questions correct
The aspect-ratio PropertyIntermediateBefore aspect-ratio existed, holding an element to a fixed width-to-height ratio meant exploiting the fact that padding percentages resolve against width. One property replaces that entire hack.10 min · 0/3 questions correct
gap in Flexbox and GridIntermediategap started as a grid-only property, then landed in flexbox too — and quietly retired a whole category of margin-based spacing hacks along the way.9 min · 0/3 questions correct
Fluid Sizing with clamp(), min(), and max()IntermediateScaling type or spacing across breakpoints used to mean a jumpy staircase of fixed values in media queries. clamp() replaces the staircase with one continuously fluid value that scales smoothly between a floor and a ceiling.12 min · 0/3 questions correct
The :has() SelectorIntermediateCSS selectors have only ever been able to look at an element's own state or what came before it. :has() breaks that rule — it lets a selector match based on what's inside or after it.13 min · 0/3 questions correct
:focus-visibleIntermediateThe old :focus selector couldn't tell a keyboard tab from a mouse click, which pushed teams toward the same broken workaround: strip focus styles entirely. :focus-visible fixes the actual problem.10 min · 0/3 questions correct