71.1 kB

that the platform now does natively, across 5 dependencies in 5 categories. Minified and gzipped. It says "up to" because having a package installed is not proof of how you use it.

Safe today

In every major engine for years. Use these without a fallback.

Colour manipulation

Widely available11.6 kB

If you're using polished for deriving hover, border or muted shades from a single brand colour, color-mix(), oklch() and relative colour syntax covers that case.

You have: polished

Keep it if any of these apply (5)

You need the computed colour value as a string in JavaScript, for a canvas fill, a chart library or an email template. CSS colours only resolve in the browser at paint time.
You need contrast-ratio calculation or WCAG checking, which these functions do not provide.
You need colour-blindness simulation, palette generation or interpolation across more than two stops.
You are generating colours at build time in Node rather than in the browser.
You rely on the relative colour syntax shown above, oklch(from ...). color-mix() and oklch() are Baseline widely available, but reading channels off an existing colour is newer, so check it before shipping.

Modal dialogs

Widely available7.5 kB

If you're using react-modal for building a modal dialog, confirmation prompt or alert, <dialog> with showModal() covers that case.

You have: react-modal

Keep it if any of these apply (5)

You need click-on-the-backdrop to close. <dialog> does not do this, so you still write a small click handler that compares the event target.
You need enter and exit transitions and must support browsers without @starting-style and transition-behavior: allow-discrete.
You need a non-modal overlay that leaves the page interactive. Use popover instead of showModal().
You render the dialog through a portal into a container that is itself inside a transform or filter, which creates a containing block and breaks top-layer assumptions.
Your framework's dialog component is already handling scroll locking and route-driven open state, and the migration is not worth the churn.

Newly available

In every major engine, but recently. Check your support target.

Balanced headings

Newly available1.2 kB

If you're using react-wrap-balancer for stopping a heading or short blurb from breaking with one word on the last line, text-wrap: balance covers that case.

You have: react-wrap-balancer

Keep it if any of these apply (4)

The text runs longer than about four lines. Browsers stop balancing past a line-count cap, so long paragraphs are unaffected. Use text-wrap: pretty there.
You need identical line breaks across every browser, for example to match a design comp pixel for pixel. Balancing is a browser heuristic and the results differ.
You need to balance to a specific ratio or set a maximum line width in characters, which the library exposes and CSS does not.
You are counting on text-wrap: pretty as the fallback for body copy. It has much narrower support than balance, so treat it as an enhancement.

Bleeding edge

Missing from at least one engine. These need a fallback.

Tooltips, dropdowns and popovers

Limited availability30.8 kB

If you're using @floating-ui/react for building a tooltip, dropdown menu or popover anchored to a trigger, The Popover API with CSS anchor positioning covers that case.

You have: @floating-ui/react
Held back by: Anchor positioning

Keep it if any of these apply (5)

You need Baseline-level support for the positioning. Anchor positioning is in all three engines now, but only from Chrome 125, Safari 26 and Firefox 147, so anything older needs a JavaScript fallback or a static position.
You need collision handling beyond position-try-fallbacks, such as shifting along an axis to stay in view rather than flipping.
You need an arrow that tracks the trigger across a flip.
A popover must stay open while a second one opens, or nest inside another. Auto popovers close their ancestors.
You need hover-with-intent timing, which the platform does not cover.

Carousels

Limited availability20.1 kB

If you're using swiper for building a horizontal gallery with prev/next buttons and dot indicators, CSS scroll-snap with ::scroll-button() and ::scroll-marker() covers that case.

You have: swiper
Held back by: ::scroll-button

Keep it if any of these apply (5)

You need Safari or Firefox support today. Both ship scroll-snap but not ::scroll-button() or ::scroll-marker(), so they fall back to a bare scroll container with no buttons and no dots.
You need autoplay, infinite looping, or a coverflow-style 3D effect. None of these have a CSS equivalent.
You render hundreds of slides and rely on the library to virtualise them.
Slides animate as a function of scroll position, for example parallax or a scaling centre slide.
You need programmatic control from JavaScript beyond scrollIntoView, such as pause on hover or a progress bar tied to a timer.