New in CSS

Lets a component respond to the width of its own container instead of the viewport.

Chrome 105Edge 105Safari 16Firefox 110

Style a parent by what it contains, no JS state class needed.

Chrome 105Edge 105Safari 15.4Firefox 121

Native nesting of rules inside rules, including `&` for the parent, media and container queries nested.

Chrome 120Edge 120Safari 17.2Firefox 117

Later layers win, whatever the specificity of the rule below.

Chrome 99Edge 99Safari 15.4Firefox 97

A nested grid can adopt its parent's row or column tracks, so card titles, bodies and footers align.

Chrome 117Edge 117Safari 16Firefox 71

Mixes two colors in a chosen color space, so you can derive hover, tint and border colors from one brand.

Chrome 111Edge 111Safari 16.2Firefox 113

Perceptually uniform color spaces: equal steps in lightness look equal, and hue stays constant while you.

Chrome 111Edge 111Safari 15.4Firefox 113

Takes an existing color and rewrites its channels: `oklch(from var(--brand) calc(l + .2) c h)` makes a.

Chrome 119Edge 119Safari 16.4Firefox 128

Picks one of two colors depending on the element's `color-scheme`.

Chrome 123Edge 123Safari 17.5Firefox 120

Gives a custom property a type, initial value and inheritance, which makes it animatable.

Chrome 85Edge 85Safari 16.4Firefox 128

Balances line lengths in short blocks of text (headings, captions) so you never get a single orphaned.

Chrome 114Edge 114Safari 17.5Firefox 121

Declarative popovers: any element with `popover` opens in the top layer via a button's `popovertarget`,.

Chrome 114Edge 114Safari 17Firefox 125

Lets you transition from `display:none` and other discrete properties.

Chrome 117Edge 117Safari 17.5Firefox 129

Removes a subtree from focus, clicks and the accessibility tree in one attribute.

Chrome 102Edge 102Safari 15.5Firefox 112

Like `:valid`/`:invalid` but only after the user has interacted with the field, so a required field is.

Chrome 119Edge 119Safari 16.5Firefox 88

Recolors native checkboxes, radios, range sliders and progress bars to your brand color while keeping.

Chrome 93Edge 93Safari 15.4Firefox 92

Math in CSS beyond calc(): snap a fluid value to a grid (`round(nearest, 1.2rem, 4px)`), wrap values.

Chrome 125Edge 125Safari 15.4Firefox 118

Trig in CSS makes circular and radial layouts pure CSS: place N items on a ring with `cos()`/`sin()` and.

Chrome 111Edge 111Safari 15.4Firefox 108

Two animations on one property, added instead of replaced.

Chrome 112Edge 112Safari 16Firefox 115

Moves an element along a path (circle, inset, polygon, SVG path or `shape()`), auto-rotating it to face.

Chrome 116Edge 116Safari 16Firefox 122

Unprefixed `mask` lets you fade, cut and shape any element with gradients or images; combined masks.

Chrome 120Edge 120Safari 15.4Firefox 53

Applies blur/saturate/brightness to whatever is behind an element, the basis of frosted-glass headers,.

Chrome 76Edge 76Safari 18Firefox 103

Standard scrollbar control: reserve the gutter so layout does not shift when a scrollbar appears, make.

Chrome 121Edge 121Safari 26.2Firefox 64

Grouping `<details>` with the same `name` makes an exclusive accordion natively.

Chrome 131Edge 131Safari 18.4Firefox 144

Style arbitrary text ranges (search matches, spellcheck, code tokens) without wrapping them in spans,.

Chrome 105Edge 105Safari 17.2Firefox 140

Wrap a DOM change in `document.startViewTransition()` and the browser animates between the old and new.

Chrome 111Edge 111Safari 18Firefox 144

Matches `<details>`, `<dialog>`, `<select>` and date/color inputs while they are open, replacing.

Chrome 133Edge 133Safari 26.5Firefox 136

Query a container's custom property values: `@container style(--theme: dark)` styles children when the.

Chrome 111Edge 111Safari 18Firefox 151

Scopes rules to a subtree with an optional lower boundary ("donut scope"): `@scope (.card) to.

Chrome 118Edge 118Safari 17.4Firefox 146

Makes inputs, textareas and selects size themselves to their content, so a textarea grows as the user.

Chrome 123Edge 123Safari 26.2Firefox 152

Returns black or white, whichever contrasts more with the given color.

Chrome 147Edge 147Safari 26Firefox 146

A path syntax written in CSS units and math instead of SVG's unitless numbers, so clip shapes can be.

Chrome 135Edge 135Safari 18.4Firefox 148

Numeric functions that return an element's 1-based position among its siblings and the total count.

Chrome 138Edge 138Safari 26.2Firefox 154

Trims the extra space above cap height and below the baseline inside a line box, so text is optically.

Chrome 133Edge 133Safari 18.2Firefox 154

Tooltips and menus attach to their trigger and flip at the edge.

Chrome 125Edge 125Safari 26Firefox 147

`@container name { }` with no condition matches whenever a named container exists, which is a clean way.

Chrome 148Edge 148Safari 26.4Firefox 149

`lh` is the element's line-height, `rlh` the root's, so spacing can be expressed in lines: icons that.

Chrome 109Edge 109Safari 16.4Firefox 120

Native modal dialogs have the right focus trapping, inertness of the page and Escape handling.

Chrome 134Edge 134Safari noFirefox 137

Drives a keyframe animation by scroll position instead of time: reading progress bars, reveal-on-scroll,.

Chrome 115Edge 115Safari 26Firefox flag (158 nightly)

Opt a multi-page site into animated navigations with one at-rule in both pages; shared.

Chrome 126Edge 126Safari 18.2Firefox no

Better paragraph wrapping: avoids orphan words, improves hyphenation and evens out rag on the whole.

Chrome 117Edge 117Safari 26Firefox no

A tooltip-class popover that does not close open `auto` popovers and closes when another hint opens.

Chrome 133Edge 133Safari noFirefox 149

Declares how a `<dialog>` may close: `any` (Escape, click outside, or programmatic), `closerequest`.

Chrome 134Edge 134Safari noFirefox 137

`color-mix()` now takes any number of colors with weights, and `light-dark()` accepts images/gradients,.

Chrome 150Edge 150Safari noFirefox 150

Removes the margins of the first and last children at the container's edges, so a card's padding stays.

Chrome 155 (upcoming)Edge 155 (upcoming)Safari 16.4Firefox no

Truncates a block to N lines with an ellipsis.

Chrome flagEdge flagSafari legacyFirefox flag

A typed JavaScript API for CSS values: read `el.computedStyleMap().get('width')` as a `CSSUnitValue`.

Chrome 66Edge 66Safari 16.4Firefox flag

A cascade keyword that acts as if the current rule did not set the property, letting the next matching.

Chrome 148Edge 148Safari 27 betaFirefox 150

Opt in with `interpolate-size: allow-keywords` and you can transition `height: 0` to `height: auto` (or.

Chrome 129Edge 129Safari noFirefox no

Changes what `border-radius` draws: `squircle` (iOS-style continuous curves), `scoop` (inward), `notch`.

Chrome 139Edge 139Safari noFirefox no

Inline conditions in a value: `if(style(--variant: primary): #2563eb; else: #e5e7eb)`.

Chrome 137Edge 137Safari TPFirefox no

Author-defined functions with typed parameters and a `result` descriptor, usable anywhere a value goes.

Chrome 139Edge 139Safari TPFirefox no

Makes keyboard focus and screen-reader order follow the visual order of flex and grid layouts.

Chrome 137Edge 137Safari noFirefox no

Pure-CSS carousels: a scroll-snap container grows previous/next buttons and a dot/tab navigation as.

Chrome 135Edge 135Safari noFirefox no

Style an element based on scroll state: a sticky header that gets a shadow when stuck, a snapped slide.

Chrome 133Edge 133Safari noFirefox no

Scales a heading's font size so the line exactly fills its container, the CSS answer to "fit text" JS plugins.

Chrome 150Edge 150Safari noFirefox no

Clips a background to the border box minus the padding box, so a gradient border is one declaration,.

Chrome 150Edge 150Safari noFirefox no

Draws rules inside grid/flex gaps with `column-rule` and `row-rule` (plus `*-rule-inset` and `-outset`),.

Chrome 149Edge 149Safari noFirefox no

`random(min, max, step)` yields a stable random value per page load (or per element with.

Chrome noEdge noSafari 26.2 / 26.0Firefox flag

A masonry-style layout where items flow into the shortest column lane, expressed with `display:.

Chrome flagEdge flagSafari 26.4Firefox flag

Opts a native `<select>` into fully stylable rendering: style the button, the dropdown.

Chrome 135Edge 135Safari 27 betaFirefox no

`attr()` now works in any property and can parse the attribute as a type (`type(<length>)`,.

Chrome 133Edge 133Safari TPFirefox flag