Lab
Bite sized demos.
sibling-index() and sibling-count() — position-aware CSS without the :nth-child() ladder
CSS sibling-index() and sibling-count() turn an element's position and its parent's child count into numbers you can calc() with — staggered animations, distributed hues, and self-balancing layouts with no numbered classes or JS loops.
text-box-trim: padding that hugs the letters
CSS text-box-trim cuts the invisible space fonts add above their capitals and below the baseline, so headings sit flush, pills hug their labels, and padding means what it says.
field-sizing: content — auto-growing textareas without the scrollHeight dance
CSS field-sizing lets text inputs and textareas grow with their content, with ordinary controls as the fallback and min/max sizes keeping the layout under control.
scroll-target-group: highlight the section you're reading
scroll-target-group and :target-current let CSS highlight the link for the section you're reading without scroll listeners or active-class bookkeeping.
@container style(): components that read parent tokens
CSS container style queries let child components react to custom properties on their parent, so theme, tone, and density can come from context instead of extra modifier classes.
contrast-color(): readable text from one color
CSS contrast-color() lets the browser pick black or white text from a dynamic background color, which is perfect for badges, buttons, chips, and user-picked themes.
@starting-style: entry transitions without setTimeout
CSS @starting-style gives newly inserted elements a real transition starting point, so dialogs, popovers, and toast UI can animate in without JS timing hacks.
Temporal
Temporal is Stage 4. JavaScript finally has a real date API, which means your date library can start looking like dead weight.
color-mix(): one brand color, every state
Generate hover states, disabled states, and tinted variants from one brand custom property with pure CSS color-mix().
text-wrap: balance & pretty
Two CSS one-liners that fix ugly text wrapping. balance evens out headings, pretty kills paragraph orphans. No JS required.
attr() + content
Pull data attributes into rendered text with zero JavaScript using CSS attr() and the content property on pseudo-elements.
scroll-margin-top: Stop Hiding Content Behind Sticky Headers
CSS's scroll-margin-top property prevents content from hiding behind sticky headers when using anchor links.