Values & references

var()

Substitutes the value of a custom property (a --name). The optional second argument is a fallback, used when the property is not set or is the guaranteed-invalid value; everything after the first comma counts as the fallback, commas included.

Substitution happens at computed-value time. If the result does not make sense for the property, the declaration is not dropped at parse time; the property instead becomes invalid at computed-value time and falls back to its inherited or initial value.

:root { --space: 1rem; }
.card { padding: var(--space); color: var(--card-text, var(--text, black)); }

env()

Substitutes the value of an environment variable defined by the browser, such as the safe area of a phone screen with a notch. Unlike custom properties, environment variables are global and the same for every element. The optional integers index into variables that have more than one value; the last argument is a fallback.

.toolbar { padding-bottom: max(1rem, env(safe-area-inset-bottom)); }

attr()

Substitutes the value of an attribute on the element. Without a type, the value is a string, which has always worked in the content property. With type(), the attribute is parsed as another type, such as a colour or a length, and works in any property.

type(<syntax>) takes the same syntax strings as @property, for example type(<color>), type(<length>) or type(<number> | auto). raw-string keeps the value as an unparsed string. If the attribute is missing or does not parse, the fallback after the comma is used.

abbr[title]::after { content: " (" attr(title) ")"; }
.swatch { background: attr(data-color type(<color>), gray); }

if()

Chooses a value inline from a list of conditions, so one declaration can hold several alternatives. Each branch is a condition, a colon and a value; branches are separated by semicolons, the first true condition wins, and else matches anything.

A condition is a style() query on the element's custom properties, a media() query or a supports() test, and can combine them with and, or and not. If no branch matches and there is no else, the property becomes invalid at computed-value time.

.button {
  background: if(style(--variant: danger): #c62828; style(--variant: quiet): transparent; else: var(--brand));
  padding: if(media(width < 40rem): 0.5rem; else: 1rem);
}

counter()

The current value of a counter, as a string for the content property. The optional second argument is the counter style, such as decimal (the default), lower-roman or upper-alpha.

body { counter-reset: figure; }
figure { counter-increment: figure; }
figcaption::before { content: "Figure " counter(figure) ": "; }

counters()

The values of every counter with that name in scope, from the outermost to the innermost, joined by the given string. Use it for nested numbering such as 1.2.3.

ol { counter-reset: item; list-style: none; }
li { counter-increment: item; }
li::before { content: counters(item, ".") " "; }

symbols()

An anonymous counter style defined inline, for when a one-off style does not need a full @counter-style rule. It takes a counter system (cyclic, numeric, alphabetic, symbolic or fixed; the default is symbolic) and the list of symbols.

ul { list-style-type: symbols(cyclic "◆" "◇"); }

anchor()

The position of one side of an anchor element, for use in the inset properties (top, left, inset-block-start and so on) of an absolutely or fixed positioned box. The anchor is named with anchor-name or defaults to position-anchor; the optional last argument is a fallback length.

<anchor-side> is a physical side (top, right, bottom, left), a logical one (start, end, self-start, self-end), inside or outside, center, or a percentage of the way across the anchor.

.trigger { anchor-name: --menu; }
.menu { position: absolute; top: anchor(--menu bottom); left: anchor(--menu left); }

anchor-size()

The width or height of an anchor element, for sizing a positioned box to match it. It takes an optional anchor name, an optional dimension (width, height, block, inline, self-block or self-inline) and an optional fallback.

.menu { min-width: anchor-size(width); }