What this site uses
This site is built from the catalog it publishes. Every feature below is doing real work here, and every one that is not Baseline sits behind an @supports check with a stated fallback, which is what the rules themselves ask you to do.
The one it does not use
View transitions. Next.js drives navigation through its client router, so the cross-document version of the API never fires, and wiring up the same-document one would be a claim about this site that is not true yet. The rule is in the catalog on its merits, not because this site ships it.
19 features in use
field-sizing
Newly available
Chrome123
Edge123
Firefox152
Safari26.2
- Here
- The paste box on the home page grows as you type.
- Instead of
- react-textarea-autosize, or a hidden mirror element to measure.
- Without it
- A fixed-height textarea that scrolls.
:has()
Widely available- Chrome105
- Edge105
- Firefox121
- Safari15.4
- Here
- The tier filter on the catalog page, and the hint under the submit button.
- Instead of
- Component state and a re-render on every change.
- Without it
- None needed. :has() is Baseline widely available, so this works everywhere.
<dialog>
Widely available- Chrome37
- Edge79
- Firefox98
- Safari15.4
- Here
- The 'How this is measured' modal.
- Instead of
- react-modal, or a hand-built focus trap.
- Without it
- None needed. The top layer, backdrop, focus trap and Escape are all the element's own behaviour.
Invoker commands
Newly available- Chrome135
- Edge135
- Firefox144
- Safari26.2
- Here
- Opening and closing that modal, with command and commandfor.
- Instead of
- An onClick handler calling showModal(), which needs a client component.
- Without it
- The button does nothing. The data dates and web-features version are printed in the page footer regardless, so nothing load-bearing is only in the modal.
<dialog closedby>
Limited availability- Chrome134
- Edge134
- Firefox141
- Safari-
- Here
- closedby='any' on that modal, so clicking the backdrop closes it.
- Instead of
- A click handler comparing event.target, which is what the dialog rule warns you still have to write.
- Without it
- The backdrop does not dismiss. Escape and the Close button still do.
Popover
Newly available- Chrome116
- Edge116
- Firefox125
- Safari17
- Here
- The 'What do the tiers mean?' explainer.
- Instead of
- @floating-ui/react.
- Without it
- Anchor positioning is Chromium-only, so elsewhere the popover opens centred rather than tethered to its trigger. It still opens, dismisses and traps focus.
Anchor positioning
Limited availability- Chrome-
- Edge-
- Firefox-
- Safari-
- Here
- Tethering that same popover to its button.
- Instead of
- JavaScript measuring the trigger on every scroll and resize.
- Without it
- The popover centres itself in the viewport.
Container queries
Widely available- Chrome105
- Edge105
- Firefox110
- Safari16
- Here
- Findings reflow on their own width, not the viewport's.
- Instead of
- react-resize-detector and a ResizeObserver.
- Without it
- None needed. Baseline widely available.
Scroll snap
Widely available- Chrome69
- Edge79
- Firefox68
- Safari11
- Here
- The featured rules strip on the home page.
- Instead of
- swiper or embla-carousel.
- Without it
- None needed. Baseline widely available.
::scroll-button
Limited availability- Chrome-
- Edge-
- Firefox-
- Safari-
- Here
- The arrows beside that strip, generated by the browser.
- Instead of
- The library's arrow markup, plus its disabled-state logic.
- Without it
- No arrows. Dragging, the scrollbar and the keyboard still work.
Scroll markers
Limited availability- Chrome135
- Edge135
- Firefox-
- Safari-
- Here
- The dots under that strip, generated by the browser.
- Instead of
- The same carousel library, plus its dot markup and ARIA.
- Without it
- A thin scrollbar instead of dots. The strip still snaps and still scrolls.
color-mix()
Widely available- Chrome111
- Edge111
- Firefox113
- Safari16.2
- Here
- Every derived shade: hover states, borders, selection.
- Instead of
- polished or color2k.
- Without it
- None needed. Baseline widely available.
light-dark()
Newly available- Chrome123
- Edge123
- Firefox120
- Safari17.5
- Here
- The whole palette follows your OS preference.
- Instead of
- A theme provider and a class on <html>.
- Without it
- An explicit dark palette behind @supports. The site stops following the OS and stays dark.
text-wrap: balance
Newly available- Chrome114
- Edge114
- Firefox121
- Safari17.5
- Here
- Every heading.
- Instead of
- react-wrap-balancer.
- Without it
- Ordinary wrapping, which occasionally orphans a word.
interpolate-size
Limited availability- Chrome129
- Edge129
- Firefox-
- Safari-
- Here
- The 'keep it if' disclosures animate open.
- Instead of
- react-collapse, or measuring the panel and animating to pixels.
- Without it
- The panel opens instantly, which is the normal behaviour.
@starting-style
Newly available- Chrome117
- Edge117
- Firefox129
- Safari17.5
- Here
- The modal and popover fade and lift in, and back out.
- Instead of
- framer-motion, or keeping the element mounted to animate it out.
- Without it
- They appear and disappear without a transition.
Scroll-driven animations
Limited availability- Chrome115
- Edge115
- Firefox-
- Safari26
- Here
- The reading progress bar on a rule page.
- Instead of
- A scroll listener updating a width on every frame.
- Without it
- No progress bar. Nothing else changes.
text-box
Limited availability- Chrome133
- Edge133
- Firefox-
- Safari18.2
- Here
- Headings sit flush against the space above them.
- Instead of
- capsize, or hand-tuned negative margins.
- Without it
- The font's built-in leading stays, so spacing is slightly looser.
scrollbar-gutter
Newly available- Chrome94
- Edge94
- Firefox97
- Safari18.2
- Here
- The page does not shift sideways when content gets tall.
- Instead of
- Measuring the scrollbar and padding for it.
- Without it
- A small horizontal shift when a scrollbar appears.