# Modern CSS and HTML, by how safe it is to ship Tiers come from the `web-features` Baseline dataset at build time, not from anyone’s opinion. Accessible implementations of every entry below are in `css-snippets.md`. Live versions: https://accessible-by-default.dev/showcase.html ## Baseline: widely available Safe to ship unguarded. ### Container queries Components respond to the space they actually get instead of the viewport. **Accessibility payoff:** Layouts that adapt to their space survive 400% zoom and squeezed sidebars alike — low-vision users get reflow (1.4.10) for free. **Feature test (not needed to ship):** `@supports (container-type: inline-size)` **Topics:** layout - [MDN: container queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries) ### Container query units The other half of container queries: cqi units inside clamp() scale type and spacing in proportion to the component’s own space, with no breakpoints and no broken in-between states. **Accessibility payoff:** Spacing in cqi gives text more room in a narrow container, even at 400% zoom; for type, a rem term in the middle and a maximum within 1.5 times the minimum let zoom double the text in every engine. **Feature test (not needed to ship):** `@supports (width: 1cqi)` **Topics:** layout, typography - [MDN: container query length units](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_size_and_style_queries#container_query_length_units) ### :has() relational selector Style an element from its descendants’ state — something no upward selector can do. **Accessibility payoff:** :has() styles states the DOM already knows — no JS class-toggling that can drift from the real, announced state. **Feature test (not needed to ship):** `@supports (selector(:has(a)))` **Topics:** interaction - [MDN: :has()](https://developer.mozilla.org/en-US/docs/Web/CSS/:has) ### Count-aware layouts (quantity queries) The chat-app photo bundle, in pure CSS: the grid counts its own children with exact-count quantity queries — :has(> :nth-child(3):last-child) reads "exactly three" — and re-composes its grid-template-areas per count. **Accessibility payoff:** Count-aware layout keeps items at usable sizes however many a CMS delivers — target size (2.5.8) survives real content. **Feature test (not needed to ship):** `@supports (selector(:has(> :nth-child(2))))` **Topics:** layout - [MDN: :has()](https://developer.mozilla.org/en-US/docs/Web/CSS/:has) - [A List Apart: Quantity Queries for CSS](https://alistapart.com/article/quantity-queries-for-css/) ### Subgrid Nested grids adopt their parent’s tracks, so card internals align across siblings no matter how long the content gets — the kind of alignment that used to require fixed heights or JS. **Accessibility payoff:** Aligned tracks across cards keep visual order and reading order identical — what a screen reader announces matches what eyes scan. **Feature test (not needed to ship):** `@supports (grid-template-rows: subgrid)` **Topics:** layout - [MDN: subgrid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Subgrid) ### Sliding selection indicator A modern way to visualize selection: one pill that travels between options instead of fading per-item. **Accessibility payoff:** The moving highlight is a native radio group underneath — arrow keys, focus, and announcements come from the platform; only the paint animates. **Feature test (not needed to ship):** `@supports (selector(:has(*)))` **Topics:** interaction, motion - [MDN: :has()](https://developer.mozilla.org/en-US/docs/Web/CSS/:has) ### Scroll snap A horizontal strip where each card locks to centre as you scroll — scroll-snap-type on the track, scroll-snap-align on the cards. **Accessibility payoff:** Snap points give wheel, touch, and keyboard scrolling the same stopping places — no JS carousel intercepting arrow keys. **Feature test (not needed to ship):** `@supports (scroll-snap-type: x mandatory)` **Topics:** scroll - [MDN: CSS scroll snap](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_scroll_snap) ### :user-valid / :user-invalid Validation styling with manners — these pseudo-classes match only after the user has actually interacted with a field, so an empty required form isn’t flagged red on first paint. **Accessibility payoff:** Errors wait until someone has actually been in the field — no red flags shouting at screen-magnifier users before they’ve typed a character. **Feature test (not needed to ship):** `@supports (selector(:user-valid))` **Topics:** forms - [MDN: :user-invalid](https://developer.mozilla.org/en-US/docs/Web/CSS/:user-invalid) ## Baseline: newly available Interoperable across current engines, but older installs are still out there. Guard it, and give the fallback a real path. ### text-wrap: balance / pretty Let the browser decide line breaks. **Accessibility payoff:** Better line breaks with zero extra markup — nothing for assistive tech to trip on, and headings stay balanced at every zoom level. **Guard:** `@supports (text-wrap: balance)` **Topics:** typography - [MDN: text-wrap](https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap) ### Popover attribute A real actions menu wired by id alone — the platform hands you Esc-to-close, light (click-outside) dismiss, top-layer rendering, and aria-expanded toggling for free. **Accessibility payoff:** Esc-to-close, light dismiss, and aria-expanded come with the attribute — the keyboard traps of hand-rolled dropdowns never exist. **Guard:** No guard needed. **Topics:** interaction - [MDN: popover](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API) ### Native error squiggles text-decoration-line: spelling-error and grammar-error draw the platform’s own squiggle — the marking every visitor already knows from their spell checker, rendered by the engine on real text. **Accessibility payoff:** Error marking in the OS’s own convention — it tracks wrapped lines, survives zoom, and stays visible in forced colors where painted backgrounds are erased. **Guard:** `@supports (text-decoration-line: spelling-error)` **Topics:** typography, forms - [MDN: text-decoration-line](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-line) ### contrast-color() The browser picks a contrasting text color for any background — user-generated colors, theming APIs, data-viz palettes stay readable without contrast math. **Accessibility payoff:** The browser computes the readable label color for any background — text contrast becomes a guarantee, not a design-review catch. **Guard:** `@supports (color: contrast-color(red))` **Topics:** theming - [MDN: contrast-color()](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/contrast-color) ### Contrast-safe theming One engine, many themes. **Accessibility payoff:** Every derived palette flips text to black or white against its seed — a theme cannot accidentally ship unreadable text (1.4.3 by construction). **Guard:** `@supports (color: oklch(from red l c h))` **Topics:** theming - [MDN: relative colors](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_colors/Relative_colors) - [MDN: contrast-color()](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/contrast-color) ### Contrast-clamped theme picker The same engine, made interactive: pick an accent and drag its lightness, and a pure-CSS clamp snaps it out of the “muddy middle” where no black/white label could reach WCAG AA. **Accessibility payoff:** User color choices are clamped into the contrast-safe range — personalization without letting anyone pick their way into failure. **Guard:** `@supports (color: oklch(from red l c h))` **Topics:** theming, forms - [MDN: relative colors](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_colors/Relative_colors) - [WCAG: Contrast (Minimum) 1.4.3](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html) ### Container style queries · non-color cues Query a container’s custom-property value (not just its size) to restyle descendants with no prop drilling. **Accessibility payoff:** Non-color cues switch on from one inherited flag — meaning stops resting on color alone (1.4.1) with no per-component code. **Guard:** No guard needed. **Topics:** theming - [MDN: style queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_size_and_style_queries) - [WCAG: Use of Color (1.4.1)](https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html) ### shape() responsive clipping Responsive, keyword-based clip paths (lines, arcs, curves) that can use percentages and custom properties — unlike path(), which is frozen SVG coordinates. **Accessibility payoff:** The decorative clip never touches the text flow — zoom, reflow, and screen readers meet ordinary paragraphs underneath. **Guard:** `@supports (clip-path: shape(from 0 0, line to 100% 0))` **Topics:** layout - [MDN: shape()](https://developer.mozilla.org/en-US/docs/Web/CSS/basic-shape/shape) ### content-visibility content-visibility: auto lets the browser skip rendering sections until they approach the viewport, so long pages paint fast with no virtual-scrolling JS. **Accessibility payoff:** Fast first paint without hiding anything from anyone: skipped sections stay findable and announceable — and a lighter main thread is assistive-tech responsiveness, because the accessibility tree is walked on that same thread. **Guard:** `@supports (content-visibility: auto)` **Topics:** scroll, layout - [MDN: content-visibility](https://developer.mozilla.org/en-US/docs/Web/CSS/content-visibility) - [web.dev: content-visibility](https://web.dev/articles/content-visibility) ### @starting-style Animate an element in from display:none — entry transitions with no JS — and out via transition-behavior: allow-discrete. **Accessibility payoff:** Entry and exit animate without JS timers — and display:none keeps closed panels truly gone from the accessibility tree, not just faded. **Guard:** `@supports (transition-behavior: allow-discrete)` **Topics:** motion - [MDN: @starting-style](https://developer.mozilla.org/en-US/docs/Web/CSS/@starting-style) ### field-sizing: content A textarea that grows and shrinks with its content — no scrollHeight measuring, no resize listeners, no JS. **Accessibility payoff:** Inputs grow with their content — screen-magnifier users see their whole answer instead of text scrolling out of a fixed box. **Guard:** `@supports (field-sizing: content)` **Topics:** forms - [MDN: field-sizing](https://developer.mozilla.org/en-US/docs/Web/CSS/field-sizing) ### CSS zoom The newly-interoperable zoom property magnifies an element AND reflows the layout around it — like the browser’s own zoom — where transform: scale() only repaints bigger and overlaps its neighbours. **Accessibility payoff:** zoom scales a component the way real users magnify — a one-line testing lens for reflow and text-resize criteria. **Guard:** `@supports (zoom: 2)` **Topics:** layout - [MDN: zoom](https://developer.mozilla.org/en-US/docs/Web/CSS/zoom) ### Custom Highlight API Paint ranges of text from JS via ::highlight() — styled in CSS, with no wrapper elements inserted and the accessibility tree left untouched. **Accessibility payoff:** Highlights paint without wrapping spans — the text a screen reader reads is untouched by the visual layer. **Guard:** Feature-detect in JS — no CSS condition expresses it. **Topics:** typography - [MDN: CSS Custom Highlight API](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Custom_Highlight_API) ### Invoker commands command and commandfor on a plain