CSS Container Queries in Production
Container queries let components style themselves based on their parent's size instead of the viewport. Set container-type: inline-size on a parent, then use @container (min-width:…
Read article →Web Components Without a Framework
Web Components are three browser features: Custom Elements, Shadow DOM, and HTML Templates. Together they give you encapsulated components in plain HTML.Define a class extending…
Read article →CSS :has() Is the Missing Selector
The :has() pseudo-class lets you style an element based on its descendants. article:has(img) targets articles that contain an image. label:has(input:checked) styles a label when it…
Read article →CSS @layer for Predictable Cascades
The @layer rule lets you group styles into named cascade layers and explicitly order them. Later layers always win over earlier ones, regardless of specificity…
Read article →CSS color-mix and Modern Colour Functions
color-mix(in oklch, var(--brand) 60%, white) produces a colour halfway between two colours in a perceptual space. It replaces a wall of design-token shades with one…
Read article →theme.json Is the New functions.php (for Styles)
theme.json is the canonical place to configure block editor styles, settings, and tokens. Colour palettes, font sizes, layout sizes, and spacing units all live there.The…
Read article →