CSS Interop 2027

An experimental pseudo-element part of the customizable select API that allows styling the checkmark icon in dropdown menus.

A new pseudo-element that allows you to style the 'up', 'down', 'left', and 'right' buttons that appear in scrollable containers (like scrollbars).

A new experimental pseudo-element that represents an individual navigation dot in a carousel. You can style these dots (like an active/inactive state) directly in CSS.

A new experimental pseudo-element that acts as a container for individual 'scroll markers'. It's used to create native CSS carousels with built-in navigation dots.

Matches a 'slot' in the Shadow DOM if it contains content that matches the selector. It's used within Web Components to style slots based on what's been put inside them.

An experimental at-rule that lets you define your own custom CSS functions with logic and return values, very similar to functions in programming languages like JavaScript.

An experimental function that allows performing math on 'intrinsic' sizes like 'auto', 'min-content', or 'fit-content'. This is a key part of making it possible to animate from 'height: 0' to 'height: auto'.

Represents the specific keywords (like 'round', 'angle', 'bevel') that define how a corner should be shaped.

An experimental function that allows you to apply different values based on a condition (like a media query or a variable state) directly within a property value.

A new CSS math function that picks a random value from a range of possibilities. This allows for native CSS randomness without needing JavaScript.

Controls how an element's fragments (like when a line of text wraps or breaks across pages) are styled. 'Clone' repeats the padding and borders on every fragment, while 'slice' cuts them off.

An experimental property that allows setting a specific height for columns in a multi-column layout.

An experimental property to control whether content should wrap into new columns or overflow in a multi-column layout.

A master shorthand property that allows you to set the shape of all four corners of an element. This is the cornerstone of the new 'CSS Borders 4' features for advanced corner styling.

A display value that packs items into lanes like a masonry wall. Each item drops into the shortest column so you get Pinterest-style layouts without JavaScript measuring.

A modern property that allows form fields (like textareas) to automatically grow or shrink based on the amount of text typed into them, without needing JavaScript.

A game-changer for CSS transitions. It allows you to animate an element's size to or from keywords like 'auto', 'min-content', or 'max-content' smoothly.

Limits the number of lines displayed in a block of text, automatically adding an ellipsis (...) at the end. It's the modern, non-prefixed way to do 'multiline truncation'.

Allows you to specify a 'view box' for an image or video, similar to how viewBox works in SVG. This essentially lets you crop or zoom into a specific part of a replaced element using CSS.

A powerful new property that fixes a common accessibility issue: when you reorder items visually (using Flexbox or Grid 'order'), screen readers still read them in their original code order. This property tells the browser to follow the visual layout instead.

The shorthand property for 'text-box-trim' and 'text-box-edge'. It provides a concise way to control how a text box's vertical space is calculated and trimmed.

Works with 'text-box-trim' to define which metric (like the 'cap height' or 'alphabetic' baseline) should be used as the boundary when trimming the space around a block of text.

A highly anticipated property that allows you to 'trim' the leading (built-in vertical space) from the top and bottom of a text block. This solves the long-standing problem of text not being perfectly centered vertically in buttons or containers.