Lab
Bite sized demos.
@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.