Css baseline 2026

Math font family

The math generic font family keyword tells the browser to use its preferred font for rendering mathematical expressions. It joins ui-sans-serif, ui-serif, and ui-monospace as a system-native font choice, requiring no custom font files.

1
2
3

math, .math-expression {
  font-family: math;
}

The browser selects an appropriate math font from the system — such as Latin Modern Math or STIX Two Math — that includes the specialist glyphs, symbols, and spacing rules needed for mathematical notation.

Mathematical typesetting has unique requirements that regular text fonts do not meet:

• Operator symbols (∑, ∫, √) at multiple sizes
• Stretchy delimiters that scale with their content
• Precise spacing rules between operands
• Specialised variants (bold, italic, script, fraktur) for variables and operators

Using a math-aware font ensures these are rendered correctly by default.

font-family: math is most relevant alongside MathML, the HTML standard for mathematical markup:

1
2
3
4
5
6

<math>
  <mfrac>
    <mi>a</mi>
    <mi>b</mi>
  </mfrac>
</math>

1
2
3
4
5
6
7
8
9

math {
  font-family: math;
  font-size: 1.2rem;
}

/* Fallback Stack */
.equation {
  font-family: math, "Latin Modern Math", "STIX Two Math", serif;
}

Including named math fonts as fallbacks ensures consistent rendering in browsers or systems where the generic math keyword is not yet supported.

:active-view-transition

The :active-view-transition pseudo-class matches the root element when a view transition is currently in progress. It gives you a hook to apply styles globally for the duration of any view transition, without having to target the specific pseudo-elements involved in the animation itself.

A common use case is disabling pointer events or suppressing certain UI elements while the transition plays, preventing user interaction from interfering with the animation.

1
2
3
4
5
6
7
8
9

:root:active-view-transition {
  /* Prevent clicks during the transition */
  pointer-events: none;
}

:root:active-view-transition .sidebar {
  /* Hide the sidebar while a transition is running */
  visibility: hidden;
}

:active-view-transition is a straightforward way to coordinate global state with the view transition lifecycle, complementing the more granular control offered by ::view-transition-old and ::view-transition-new.

:open

The :open pseudo-class matches interactive elements that are currently in an open or expanded state. It provides a unified selector for elements whose open state is toggled by the browser, covering <details>, <dialog>, <select>, <input> types with pickers, and elements with the popover attribute.

Previously, different elements required different selectors to target their open state: details[open] for details elements, no standard selector for open dialogs, and so on. :open unifies these under a single pseudo-class.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

details:open summary {
  font-weight: bold;
}

dialog:open {
  animation: fade-in 0.2s ease;
}

[popover]:open {
  opacity: 1;
  transform: translateY(0);
}

select:open {
  border-color: var(--color-focus);
}

Using :open makes styles more readable and consistent, and reduces the need to remember which attribute or state mechanism each element type uses for its open condition.

baseline-shift

The baseline-shift property moves an inline element up or down relative to the dominant baseline of its parent. It is the CSS equivalent of the SVG baseline-shift presentation attribute, and is primarily used in SVG text to produce superscript and subscript effects without changing font size.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

tspan.superscript {
  baseline-shift: super;
}

tspan.subscript {
  baseline-shift: sub;
}

tspan.raised {
  baseline-shift: 0.4em;
}

tspan.lowered {
  baseline-shift: -0.3em;
}

The super and sub keywords shift the element to a typical superscript or subscript position relative to the parent’s baseline. Length and percentage values provide precise control over the shift amount — positive values move the element up, negative values move it down.

In HTML, vertical-align with super and sub values, or with explicit length offsets, serves the same purpose for inline elements. baseline-shift is specifically relevant when authoring SVG text or working in contexts where SVG’s typographic model applies. The two properties address the same visual intent through different specifications: vertical-align for HTML inline layout, baseline-shift for SVG text layout.

Container style queries

Container style queries let you apply styles based on the computed value of a CSS custom property on a container element — not just its size. This enables state-driven styling through CSS alone.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

.card-wrapper {
  container-name: card;
  --variant: featured;
}

@container card style(--variant: featured) {
  .card {
    border: 2px solid gold;
    background: #fffbeb;
  }
}

When the container has --variant: featured, the card gets special styling.

Style queries can be used for theming

1
2
3
4
5
6
7
8

.theme-wrapper {
  container-name: theme;
  --color-scheme: dark;
}

@container theme style(--color-scheme: dark) {
  .component { background: #1a1a2e; color: #e0e0e0; }
}

Quite powerful, because previously, changing styles based on a parent’s state required JavaScript adding classes. Style queries allow this with pure CSS custom properties.

Container style queries can be combined with size queries

1
2
3

@container sidebar (width < 200px) and style(--compact: true) {
  .nav-item { padding: 0.25rem; }
}

contrast-color()

The contrast-color() function returns the color from a provided list that has the highest contrast against a given background color. Its initial, simplified form takes a single background color and returns whichever of white or black contrasts best with it.

1
2
3
4
5

.badge {
  --bg: var(--brand-color);
  background: var(--bg);
  color: contrast-color(var(--bg));
}

This eliminates a very common problem in dynamic theming: ensuring text remains readable over a background whose color is set at runtime via a custom property or user preference. Previously this required JavaScript to calculate luminance and decide between dark and light text. contrast-color() does this in CSS, reacting automatically to changes in the background value.

The longer-term specification extends the function to accept an arbitrary list of candidate colors, returning whichever achieves the best contrast ratio, along with optional target contrast level constraints. The simpler contrast-color(color) form returning black or white is the initial implementation available in browsers.

field-sizing

The field-sizing property controls whether form fields size themselves based on their content or maintain a fixed size. The default behaviour for text inputs and textareas is field-sizing: fixed — they have a defined size and do not grow or shrink as the user types. Setting field-sizing: content changes this so the field adjusts its size to fit its current value.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

textarea {
  field-sizing: content;
  min-height: 3lh;
  max-height: 20lh;
}

input[type="text"] {
  field-sizing: content;
  min-width: 10ch;
}

With field-sizing: content, a textarea grows as the user types more content, up to any max-height you set, and a text input expands horizontally to fit its value. Previously, this behaviour required JavaScript event listeners on the input to manually adjust dimensions.

Combining field-sizing: content with min-* and max-* properties gives you full control over the range of sizes the field can take, keeping the experience predictable while still being responsive to the user’s content.

Rcap unit

The rcap unit is the root-relative version of cap. Where cap measures the cap height of the current element’s font, rcap measures the cap height of the root element’s font — typically the <html> element — regardless of the font applied to the element being styled.

This mirrors the relationship between em and rem: rcap gives you a stable, consistent reference point that does not change as you nest elements with different font-size or font-family values.

1
2
3
4
5
6

.icon {
  /* Always sized relative to the root font's capital letters,
     not whatever font this component happens to use */
  width: 1rcap;
  height: 1rcap;
}

rcap is especially useful in design systems where you want decorative elements or spacing tokens to remain anchored to a single typographic baseline across an entire page, independent of local font overrides.

rch

The rch unit is the root-relative counterpart to ch. The ch unit represents the width of the “0” (zero) character in the current element’s font, making it useful for sizing text inputs or containers to a certain number of characters. rch does the same, but always references the root element’s font rather than the element’s own font.

This makes rch a predictable, globally stable unit for character-based measurements. When you have components that override the font family or size locally, using rch keeps any character-width-based sizing anchored to the root, avoiding unexpected layout shifts.

1
2
3
4
5

.code-block {
  /* Width expressed in terms of root font character width,
     even if this element uses a monospace font override */
  max-width: 80rch;
}

Like all root-relative units, rch is most valuable in systems that set a clear typographic baseline on the root element and want consistent measurements throughout the document.

rex

The rex unit is the root-relative version of ex. The ex unit represents the x-height of the current font — roughly the height of a lowercase “x” — and is commonly used for fine typographic adjustments. rex provides the same measurement, but always taken from the root element’s font.

Because x-height varies widely between typefaces, ex can produce very different results depending on what font is active on a given element. rex eliminates that variability by fixing the reference to the root font, giving you a stable unit for spacing and sizing decisions that need to feel optically connected to the base typography without being affected by local font changes.

1
2
3
4
5

.footnote {
  /* Consistent vertical spacing tied to root x-height,
     not the footnote's own smaller font */
  margin-top: 1rex;
}

rex fits naturally alongside rem and rcap as part of a family of root-anchored typographic units, each targeting a different characteristic of the root font.

Ric unit

The ric unit is the root-relative version of ic. The ic unit is similar to ch but instead of using the “0” character, it uses the “水” (CJK water ideograph) as its reference glyph, making it well-suited for sizing in CJK (Chinese, Japanese, Korean) typography where full-width characters are the norm.

ric applies the same concept but always references the root element’s font, providing a consistent baseline for CJK-aware sizing regardless of local font overrides on individual elements.

1
2
3
4
5

.article-body {
  /* Maximum line length expressed in CJK character units
     relative to the root font */
  max-width: 40ric;
}

For multilingual layouts where CJK and Latin text coexist, ric offers a stable typographic unit that stays anchored to a single reference point, helping keep proportions consistent across sections that may use different typefaces.

text-indent: each-line

The each-line keyword extends text-indent so that indentation applies not just to the first line of a block, but to every line that begins after a forced line break (like <br> or a newline in white-space: pre).

1
2
3
4
5

p { text-indent: 2em; }
/* Only the first line is indented */

p { text-indent: 2em each-line; }
/* First line AND every line after a <br> are indented */

Soft-wrapped lines (that wrap due to limited width) are NOT indented — only forced breaks.

1

p { text-indent: 2em hanging each-line; }

hanging reverses the direction (outdents the first line instead), while each-line applies the rule after forced breaks too.

Can be used for:

• Poetry where each verse line should be indented
• Script or dialogue formatting with forced line breaks
• Legal documents with structured line-by-line indentation

text-indent: hanging

The hanging keyword inverts the direction of text-indent: instead of indenting the first line, it indents every line except the first — a hanging indent (also called an outdent).

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

/* Standard indent — first line pushed in */
p { text-indent: 2em; }

/* Hanging indent — all lines except the first are pushed in */
p { text-indent: 2em hanging; }

/* Classic bibliography style */
.reference {
  text-indent: -2em hanging;
  padding-left: 2em;
}

A negative value with hanging creates the classic bibliography format: the first line starts at the left margin, and wrapped lines are indented.

Without hanging: indent is positive → first line moves right. With hanging: the meaning flips → first line stays, subsequent lines move right.

Where to use:

• Bibliographies and works-cited lists
• Glossaries and definition lists
• Dictionary entries
• Numbered lists with long first items

1

p { text-indent: 1.5em hanging each-line; }

Combining with each-line applies the hanging indent after every forced line break as well.