baseline-sourceLimited availability

The baseline-source CSS property controls how inline-level boxes with multiple lines of text are aligned with the surrounding text. By default, which typographic baseline is used depends on the display property value.

Not yet supported in all major browsers — check the table and provide a fallback.

How to use ↓Compare browsers

Browser support

DesktopChrome

1–110Not supported

111+Supportedsince Mar 7, 2023

Current: 155

Edge

12–110Not supported

111+Supportedsince Mar 13, 2023

Current: 154

Firefox

1–114Not supported

115+Supportedsince Jul 4, 2023

Current: 157

Safari

✕Not supportedup to 27

Current: 27

MobileChrome Android

18–110Not supported

111+Supportedsince Mar 7, 2023

Current: 155

Firefox Android

4–114Not supported

115+Supportedsince Jul 4, 2023

Current: 157

Safari iOS

✕Not supportedup to 27

Current: 27

How to use

Not supported in Safari, Safari iOS. Use feature detection below and provide a fallback (or a polyfill) for those browsers.

Example

Full syntax and examples are on MDN: baseline-source.

Feature detection

CSS · check before using

@supports (baseline-source: initial) {
  /* styles that rely on baseline-source */
}

/* or in JavaScript */
if (CSS.supports("baseline-source", "initial")) {
  // use it
}

Documentation (MDN)

baseline-source ↗

Specification

drafts.csswg.org#baseline-source ↗

Sub-features

Support for each part of the feature (4). The overall table above shows when the whole feature works.

Sub-feature	Chrome	Edge	Firefox	Safari	Chrome Android	Firefox Android	Safari iOS
baseline-source	111	111	115	✕	111	115	✕
baseline-source.auto	111	111	115	✕	111	115	✕
baseline-source.first	111	111	115	✕	111	115	✕
baseline-source.last	111	111	115	✕	111	115	✕