CSS Interop 2026

Styles the area behind a full-screen element or dialog. It allows you to dim the background or add effects like blur when a modal is active.

Targets custom text highlights created via the CSS Highlight API. It allows you to style specific ranges of text programmatically (ideal for search-and-highlight features).

Matches elements that are currently participating in a view transition. This allows you to apply specific styles or animations exclusively while the transition is in progress.

A selector that matches a media element (like <video> or <audio>) when it is currently set to play back in a loop.

Targets media elements (like <video> or <audio>) when they are currently muted.

A pseudo-class that matches elements when they are in an 'open' state, such as a <dialog> or <details> element. It's designed to provide a unified way to style openable components.

A selector that matches a media element (like <video> or <audio>) when it is currently paused.

A selector that matches a media element (like <video> or <audio>) when it is currently playing.

Controls the browser's native view transition feature. It can be used to enable or disable transitions for specific elements or across the entire document during state changes.

Allows an element (like a tooltip or menu) to be docked to another element on the page, ensuring it stays positioned relative to that target even if the page scrolls or layout changes.

Defines a unique name for an element so it can be used as an anchor for other positioned elements. This creates the relationship needed for anchor positioning to work.

The 'brain' of modern scroll-driven animations. It links an animation to a timeline other than time—usually the scroll position of the page or the visibility of an element in the viewport.

Retrieves the value of an attribute from an element to use directly in CSS. The classic use is with the content property in pseudo-elements; using attr() with typed values on other properties is a newer experimental extension.

A function that automatically selects a text color with the best contrast against a given background color. It's a game-changer for dynamic themes, ensuring text remains readable regardless of the background.

Specifies which defined anchor element a positioned element should track. It connects the positioned element to its anchor by name.

Enables scroll snapping on a container, forcing the scroll position to 'snap' to certain elements. It converts a smooth scroll into a stepped, slider-like experience.

Links an animation's progress directly to the scroll position of a scroll container. This replaces time-based durations with scroll-based progress.

Defines the axis of a scroll container that will drive the progress of a scroll timeline — either block (vertical) or inline (horizontal).

Assigns a custom name to a scroll timeline, allowing it to be referenced by the animation-timeline property on other elements.

A function used in 'clip-path' and other properties to define custom 2D shapes using commands like 'move', 'line', and 'curve'. It's basically like writing SVG paths directly in CSS.

A part of container queries that lets you style elements based on the computed value of a CSS property (usually a custom property) on their parent container, rather than just size.

A shorthand for defining a scroll timeline that is tied to when an element enters and leaves the visible part of the screen (the viewport). It's the core of modern 'reveal on scroll' animations.

Specifies the axis (vertical or horizontal) that a 'view-timeline' should follow. For most standard web pages, this is 'block' (vertical scrolling).

Allows you to offset the 'start' and 'end' points of a view-timeline. This is useful if you want an animation to start before an element is fully on screen (e.g., when it's 20% visible) or continue after it has partially left.

Defines a name for a view-timeline, which tracks an element's visibility within its scroll container. You can then use this name in your 'animation-timeline' property to trigger animations based on the element's position as you scroll.

The core property for enabling view transitions on specific elements. By giving an element a 'view-transition-name', the browser will automatically track its position and size across page changes and animate the difference.

A non-standard (but now widely supported) property that scales the entire element. While 'transform: scale()' is usually better for modern layouts, 'zoom' is still used for simple scaling without affecting the surrounding layout flow as much.