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).

Targets the transition 'group' container for a specific named view transition. This is the container that holds both the 'old' and 'new' snapshots of an element, allowing you to animate the entire group as it moves or scales.

Targets the 'pair' of images (the old snapshot and the new snapshot) within a view transition group. This is where the cross-fade between the two states actually happens.

Targets the 'new' state's snapshot in a view transition. This is the image of how the element looks AFTER the change, allowing you to specifically animate how it fades in.

Targets the 'old' state's snapshot in a view transition. This is the image of how the element looked BEFORE the change, allowing you to animate how it fades out or is removed.

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.

Allows you to target elements during a specific type of view transition. By naming your transitions (e.g., 'slide-in' or 'payout'), you can apply different styles for each scenario.

Targets media elements (like <video> or <audio>) while they are actively loading data and currently 'buffering'.

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.

Targets elements that are currently in an 'open' state, such as a <details> element that is expanded or a <dialog> that is visible.

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.

A selector that matches a media element (like <video> or <audio>) while the user is actively 'seeking' or scrubbing through the timeline.

A selector that matches a media element (like <video> or <audio>) when it tries to fetch data but can't because of a slow network or connection issues.

An experimental pseudo-class that targets audio or video elements that are currently 'locked' from being muted or having their volume changed (often seen in certain accessibility contexts).

Lets you apply styles based on the value of a container's custom property, like @container style(--theme: dark), instead of only its size.

An at-rule that allows you to define custom named sets of positioning properties. These can then be used as fallbacks in the 'position-try-fallbacks' property.

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.

A function that retrieves the width or height of the anchor element. It's incredibly useful for making a popup or menu match the exact dimensions of the button that triggered it.

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.

A CSS type that represents a geometric shape. These are used in properties like 'clip-path' and 'shape-outside' to create non-rectangular layouts, such as circles, polygons, or rounded boxes.

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.

Limits where an anchor name can be 'seen.' This prevents anchor names from leaking into other parts of the page, allowing you to reuse the same anchor names in different components safely.

A shorthand property for setting both the start and end points of a scroll-driven animation. It's the most concise way to define the 'active window' for a scroll effect.

Defines where a scroll-driven animation should reach 100% completion. For example, you can stop the animation exactly when an element exits the top of the viewport.

Defines the exact point in a scroll timeline where the animation should begin (0%). This allows you to delay the start of an animation until an element is partially visible.

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.

A newer, simplified way to position an element relative to its anchor. Instead of manually calculating top/left, you can use logical regions like 'top-right' or 'bottom-center'.

Part of the Anchor Positioning API, this property lets you define a list of 'backup' positions for an element. If the primary position would cause the element to overflow its container, the browser will try these fallbacks instead.

Determines the order in which the browser tries the fallback positions defined in 'position-try-fallbacks'. You can tell the browser to prioritize the position with the most available space.

Controls when an anchor-positioned element should be shown or hidden based on the visibility of its anchor. For example, you can hide a tooltip if its anchor is scrolled out of view.

Defines the margin (offset) of an element when it is scrolled into view via scroll-snapping or anchor links. This is extremely useful for preventing fixed headers from covering the top of a section.

A shorthand that sets both the start and end scroll margins at the same time. It creates a 'snap buffer' in the vertical direction (or whatever the 'block' axis is).

Sets the margin between the end of an element and the edge of its scroll container specifically for 'scroll snapping'. This ensures that when an element snaps into view, it doesn't bump directly against the edge.

Sets the 'snap margin' at the start of an element. This is perfect for ensuring that when you scroll to a section, your 'sticky' header doesn't cover up the section's' title.

Forces a specific amount of empty space at the bottom of an element when it's being snapped into place by the browser.

A shorthand that sets both the start and end scroll margins in the horizontal (inline) direction at once.

Sets the snap margin at the 'end' of an element in the text flow (usually the right side in English). It ensures a gap between the element and the edge of the scroll container when it snaps.

Sets the snap margin at the 'start' of an element in the text flow (usually the left side in English). This is great for horizontal carousels to keep the current item from hugging the left edge.

Forces a specific amount of empty space on the left side of an element when it's snapped into place by the browser.

Forces a specific amount of empty space on the right side of an element when it's snapped into place by the browser.

Forces a specific amount of empty space at the top of an element when it's snapped into place. Extremely common for preventing sticky headers from overlapping your anchor targets.

Sets the padding (inner offset) of a scroll container. It ensures that when elements snap or are scrolled into view, they stay a certain distance away from the edges of the container.

Sets the padding at the end of the scroll container's 'snapping area'. While 'scroll-margin' is set on the items, 'scroll-padding' is set on the container itself.

Sets the padding at the start of the scroll container's 'snapping area'. It's applied to the SCROLL CONTAINER and affects how ALL items inside it are positioned when snapped.

Sets the snap padding at the bottom of the scroll container. It essentially creates a 'safe zone' at the bottom of the scroller so that snapped items don't hit the very edge.

A shorthand that sets both the start and end scroll padding in the horizontal (inline) direction on a container.

Sets the snap padding at the 'end' of the scroll container in the text flow (usually the right side). Applied to the container, it affects where all items inside will snap.

Sets the snap padding at the 'start' of the scroll container in the text flow (usually the left side). Keeps snapped items from hugging the left edge.

Sets a fixed amount of padding on the left side of a scroll container that specifically interacts with scroll snapping.

Sets a fixed amount of padding on the right side of a scroll container that specifically interacts with scroll snapping.

Sets a fixed amount of padding on the top of a scroll container that specifically interacts with scroll snapping. Often applied to the root element to account for sticky headers.

Used on children within a scroll-snap container to define which part of the element should snap to the container. You can snap to the start, center, or end of the element.

Determines whether a scroll container is allowed to 'skip' snap points when the user is scrolling quickly. Setting it to 'always' forces the scroll to stop at every single item.

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 powerful property for scroll-driven animations. It allows you to 'broaden' the scope of a named scroll timeline so it can be accessed by elements outside of the immediate parent/child relationship.

Controls whether the user can select text within an element. It is often used to prevent text selection on UI elements like buttons or icons.

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.