Custom highlightsBaseline · Newly available

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

Works in the latest version of every major browser, but older devices may not support it yet. Baseline since Mar 24, 2026.

How to use ↓Compare browsers

Browser support

DesktopChrome

1–104Not supported

105+Supportedsince Sep 2, 2022

Current: 155

Edge

12–104Not supported

105+Supportedsince Sep 1, 2022

Current: 154

Firefox

1–148Not supported

149+Supportedsince Mar 24, 2026

Current: 157

Safari

1–17.1Not supported

17.2+Supportedsince Dec 11, 2023

Current: 27

MobileChrome Android

18–104Not supported

105+Supportedsince Sep 2, 2022

Current: 155

Firefox Android

4–148Not supported

149+Supportedsince Mar 24, 2026

Current: 157

Safari iOS

1–17.1Not supported

17.2+Supportedsince Dec 11, 2023

Current: 27

How to use

Every current browser supports this, but it only became Baseline on Mar 24, 2026. Use it as a progressive enhancement, or keep a fallback if you support older devices.

Example

Full syntax and examples are on MDN: highlights static.

Feature detection

JS · check before using

if ("Highlight" in globalThis) {
  // Highlight is available
} else {
  // load a polyfill or use a fallback
}

Documentation (MDN)

Specification

drafts.csswg.org/css-highlight-api-1 ↗

Sub-features

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

Sub-feature	Chrome	Edge	Firefox	Safari	Chrome Android	Firefox Android	Safari iOS
CSS.highlights_static	105	105	140	17.2	105	140	17.2
Highlight	105	105	140	17.2	105	140	17.2
Highlight.@@iterator	105	105	140	17.2	105	140	17.2
Highlight.Highlight	105	105	140	17.2	105	140	17.2
Highlight.add	105	105	140	17.2	105	140	17.2
Highlight.clear	105	105	140	17.2	105	140	17.2
Highlight.delete	105	105	140	17.2	105	140	17.2
Highlight.entries	105	105	140	17.2	105	140	17.2
Highlight.forEach	105	105	140	17.2	105	140	17.2
Highlight.has	105	105	140	17.2	105	140	17.2
Highlight.keys	105	105	140	17.2	105	140	17.2
Highlight.priority	105	105	140	17.2	105	140	17.2
Highlight.size	105	105	140	17.2	105	140	17.2
Highlight.type	105	105	140	17.2	105	140	17.2
Highlight.values	105	105	140	17.2	105	140	17.2
HighlightRegistry	105	105	140	17.2	105	140	17.2
HighlightRegistry.@@iterator	105	105	140	17.2	105	140	17.2
HighlightRegistry.clear	105	105	140	17.2	105	140	17.2
HighlightRegistry.delete	105	105	140	17.2	105	140	17.2
HighlightRegistry.entries	105	105	140	17.2	105	140	17.2

Show 8 more

Sub-feature	Chrome	Edge	Firefox	Safari	Chrome Android	Firefox Android	Safari iOS
HighlightRegistry.forEach	105	105	140	17.2	105	140	17.2
HighlightRegistry.get	105	105	140	17.2	105	140	17.2
HighlightRegistry.has	105	105	140	17.2	105	140	17.2
HighlightRegistry.keys	105	105	140	17.2	105	140	17.2
HighlightRegistry.set	105	105	140	17.2	105	140	17.2
HighlightRegistry.size	105	105	140	17.2	105	140	17.2
HighlightRegistry.values	105	105	140	17.2	105	140	17.2
highlight	105	105	149	17.2	105	149	17.2