CSS

Reference cards for CSS modules: layout, colour, animations, and typography. Each card cites a normative spec.

• CSS :has() — the parent selector

  :has(...) matches an element if any of its descendants match the inner selector. The first general-purpose 'parent' selector in CSS, with quadratic-time pitfalls if used carelessly.

• CSS @layer — explicit cascade layers

  @layer creates named, ordered slots in the cascade so authors can predict which rule wins without specificity wars or !important escalation. The single largest improvement to cascade authoring since custom properties.

• CSS color spaces and contrast

  CSS Color 4 brings device-independent colour spaces (display-p3, lch, oklch) and the relative-colour syntax. Picking colours in a perceptually uniform space makes contrast tuning predictable.

• CSS layout primitives: flow, flex, grid, container

  Modern CSS layout is built from four primitives: normal flow, flexbox, grid, and container queries. Knowing which to reach for is the largest determinant of layout quality.

• CSS View Transitions

  View Transitions snapshot the page before and after a state change, then animate between the two snapshots. The single API turns 'navigation requires a SPA framework' into 'add five lines of CSS'.