Skip to content
Motif
All tracks

Track 6

The modern web platform

Container queries, :has(), subgrid, OKLCH, anchor positioning — the 2026 baseline.

  1. Lesson 1:
    Intermediate15 min

    Container queries

    Container queries let a component respond to the width of its container instead of the viewport — so one card works in a sidebar and a wide column unchanged.

  2. Lesson 2:
    Intermediate14 min

    The :has() selector

    The :has() relational selector styles an element based on what it contains — the long-wished-for parent selector — replacing a lot of state-tracking JavaScript.

  3. Lesson 3:
    Advanced15 min

    CSS anchor positioning

    CSS anchor positioning tethers a floating element to another element — tooltips, popovers, menus — with edge-flipping fallbacks, no JS position math required.

  4. Lesson 4:
    Intermediate12 min

    CSS Subgrid

    Subgrid lets a nested element adopt its parent's grid tracks, so content inside a row of cards lines up across them with no fixed heights or magic numbers.

  5. Lesson 5:
    Intermediate13 min

    The Popover API

    The native popover attribute gives any element show/hide, light-dismiss, Esc, and the top layer for free — menus and tooltips with almost no JavaScript.

  6. Lesson 6:
    Intermediate12 min

    Modern CSS color functions

    color-mix(), light-dark(), and relative color let CSS derive whole palettes and theme by scheme from one source color — no preprocessor needed.

  7. Lesson 7:
    Intermediate12 min

    Scroll-snap carousels

    CSS scroll-snap makes the browser's scroll position the carousel — touch, trackpad, and keyboard work for free, with new pseudo-elements for controls.