CSS in 2026, by the date it became safe.

animation-composition

The animation-composition CSS property chooses how to combine animations that affect the same property.

Two-value display property

The display CSS property accepts multiple keyword values, such as inline flex or block flow, to explicitly set an element's inner and outer layout mode. Also known as 2-value, multi-keyword, or multiple value syntax.

Subgrid

The subgrid value for the grid-template-columns and grid-template-rows properties allows a grid item to inherit the grid definition of its parent grid container.

8 of 24 showcase sites ship it Live demo → In the Ship Gap →

@counter-style

The @counter-style CSS at-rule sets custom counter styles for list items. For example, you can use a sequence of specific symbols instead of numbers for an ordered list.

contain-intrinsic-size

The contain-intrinsic-size CSS property sets the intrinsic size of an element. When using size containment, the browser will lay out the element as if it had a single child of this size.

Hyphenate character

The hyphenate-character CSS property sets the character or string to use at the end of a line before a line break.

Hyphenation

The hyphens CSS property controls when long words are broken by line wrapping. Although called hyphens, the property applies to word-splitting behavior across languages, such as customary spelling changes or the use of other characters. Support for non-English languages varies significantly.

image-set()

The image-set() CSS function provides a set of images at different resolutions or pixel densities, which the browser can pick from, depending on the device capabilities.

Overflow media queries

The overflow-block and overflow-inline CSS media queries set styles based on the way a device displays content that's larger than the viewport or page area. For example, a laptop lets users scroll to reveal content, while a printer displays overflowing content on additional pages.

Update frequency media query

The update CSS media query sets styles based on whether and how fast the user's device can modify display after it has been rendered. For example, you can avoid animations on devices that aren't fast enough to display them smoothly.

:user-valid and :user-invalid

The :user-valid and :user-invalid pseudo-classes match form controls that have been marked as valid or invalid based on their validation constraints.

Clip path boxes

The fill-box, stroke-box, and view-box values for clip-path set an edge of the element's box to use as the clipping shape.

lh unit

The lh CSS length unit corresponds to the requested line height, the computed value of the line-height property. Some lines may be higher than this based on their content.

rlh unit

The rlh CSS length unit is a font-relative length relative to the line height of root element.

:dir()

The :dir() CSS functional pseudo-class matches elements by text direction, either right to left (rtl) or left to right (ltr).

Exponential functions (CSS)

The pow(), sqrt(), hypot(), log(), and exp() CSS functions compute various exponential functions.

Masks

The mask CSS property (and several longhand properties) partially or completely hides an element according to the shape and depth of an image.

16 of 24 showcase sites ship it In the Ship Gap →

scripting media query

The scripting CSS media query sets styles based on whether scripting such as JavaScript is available. Values are enabled if scripting is available, initial-only if scripting is only available on page load (for example, printed content), or none.

cap unit

The cap CSS length unit corresponds to the height of Latin capital letters.

counter-set

The counter-set CSS property creates (and optionally sets a value for) a counter, the numbers for a series of headings or ordered list items.

linear() easing

The linear() easing function for animations and transitions interpolates linearly between the control points, and can be used to approximate complex easing functions, such as a bounce effect.

3 of 24 showcase sites ship it Easing Studio → In the Ship Gap →

Nesting

CSS nesting allows for shorter selectors, easier reading, and more modularity by nesting rules inside others.

1 of 24 showcase sites ship it Live demo → In the Ship Gap →

:has()

The :has() CSS functional pseudo-class matches an element if any of the selectors passed as parameters would match at least one element.

16 of 24 showcase sites ship it Live demo → :has() Playground → In the Ship Gap →

rect() and xywh()

The rect() CSS function creates a rectangle shape with insets from the edges of an element. The xywh() CSS function creates a rectangle shifted by an x and y distance. They can be used with clip-path and shape-outside.

Active view transition

The :active-view-transition CSS pseudo-class matches the root element when a view transition is active. The :active-view-transition-type() CSS pseudo-class matches only when the active view transition was started with the specified type.

rcap unit

The rcap CSS length unit is a font-relative length equal to the value of the cap unit on the root element. Cap-height is approximately equal to the height of a capital Latin letter.

rch unit

The rch CSS length unit is a font-relative length equal to the value of the ch unit on the root element. ch length is based on the width of the zero (0) character.

rex unit

The rex CSS length unit is a font-relative length that is equal to the x-height of the root element.

ric unit

The ric CSS length unit, or root international character, is a font-relative length equal to the width of CJK character relative to the root element.

shape()

The shape() CSS function creates shapes with a series of commands like line, move, and curve. It can be used with clip-path and shape-outside.

text-indent: each-line

The text-indent: each-line CSS declaration indents text after forced breaks as well as to the first line of a block.

text-indent: hanging

The text-indent: hanging CSS declaration indents all lines except the first.

@scope

The @scope CSS at-rule sets the scope for a group of rules.

0 of 24 showcase sites ship it Live demo → @scope Playground → In the Ship Gap →

baseline-shift

The baseline-shift CSS property sets the position of an element relative to its dominant baseline.

Custom highlights

Custom highlights style arbitrary text ranges, without adding extra elements to the DOM.

Math font family

The font-family: math CSS declaration uses the browser default font face for displaying mathematical expressions.

contrast-color()

The contrast-color() CSS function picks a color that has guaranteed contrast against a specified foreground or background color.

0 of 24 showcase sites ship it Live demo → In the Ship Gap →

crisp-edges

The image-rendering: crisp-edges CSS declaration scales images to preserve lines without blurring.

text-decoration-skip-ink: all

The text-decoration-skip-ink: all CSS declaration forces interruptions in underlines and overlines where the line would cross a glyph. This contrasts with auto, which does not skip for CJK glyphs.

:open

The :open CSS pseudo-class matches elements that have open states, like <details>, <dialog>, or <select>, based on their state.

Container style queries

Container style queries with the @container at-rule apply styles to an element based on the values of custom properties of its container.

1 of 24 showcase sites ship it In the Ship Gap →

field-sizing

The field-sizing CSS property allows form controls such as <textarea> to be sized based on their content.

1 of 24 showcase sites ship it Live demo → In the Ship Gap →

sibling-count() and sibling-index()

The sibling-count() and sibling-index() CSS functions return integers that are useful to style elements based on their positions among siblings or on the number of siblings, for example as part of a calc() expression.

0 of 24 showcase sites ship it In the Ship Gap →

progress()

The progress() CSS function returns a ratio for the relative position of one value between two other values, clamped between 0 and 1. You can use it to interpolate a value for other calculations.

alpha()

The alpha() CSS function computes a relative color value by adjusting the opacity of an origin color.

light-dark() image values

The light-dark() CSS function accepts, in addition to colors, two <image> values, such as a gradient or URL, and uses one depending on the current color scheme.

overflow-anchor

The overflow-anchor CSS property sets an element as a possible scroll anchor, reducing unintended scrolling when document changes occur above the current scrollport. This is enabled by default where supported.