Custom highlights | Frontend Practical Guide

Overview

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

Browser support

Feature	Desktop				Mobile
Feature	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`:highlight`	105	105	140	17.2	105	17.2
DOM API
`highlights_static` The static, read-only highlights property of the CSS interface provides access to the HighlightRegistry used to style arbitrary text ranges using the csscustomhighlight_api.	105	105	140	17.2	105	17.2
`Highlight` The Highlight interface of the CSS Custom Highlight API is used to represent a collection of Range instances to be styled using the API.	105	105	140	17.2	105	17.2
`@@iterator` [Symbol.iterator]	105	105	140	17.2	105	17.2
`add` The add() method of the Highlight interface adds a new Range object to a highlight, to be styled using the csscustomhighlight_api.	105	105	140	17.2	105	17.2
`clear` The clear() method of the Highlight interface removes all the Range objects from a Highlight object.	105	105	140	17.2	105	17.2
`delete` The delete() method of the Highlight interface removes a specified Range object from a Highlight object.	105	105	140	17.2	105	17.2
`entries` The entries() method of the Highlight interface returns a new Iterator object that contains an array of [range, range] for each Range object in the Highlight object, in insertion order.	105	105	140	17.2	105	17.2
`forEach` The forEach() method of the Highlight interface executes a provided function once for each Range object in the Highlight object, in insertion order.	105	105	140	17.2	105	17.2
`has` The has() method of the Highlight interface returns a boolean indicating whether a Range object exists in a Highlight object or not.	105	105	140	17.2	105	17.2
`Highlight` The Highlight() constructor returns a newly created Highlight object which can hold a collection of Range objects to be styled using the csscustomhighlight_api.	105	105	140	17.2	105	17.2
`keys` The keys() method of the Highlight interface is an alias for the Highlight.values() method.	105	105	140	17.2	105	17.2
`priority` The priority property of the Highlight interface is a number used to determine which highlight's styles should be used to resolve style conflicts in overlapping parts. Highlights with a higher priority number have preference over those with a lower priority.	105	105	140	17.2	105	17.2
`size` The size property returns the number of Range objects in a Highlight object.	105	105	140	17.2	105	17.2
`type` The type property of the Highlight interface is an enumerated String used to specify the meaning of the highlight. This allows assistive technologies, such as screen readers, to include this meaning when exposing the highlight to users.	105	105	140	17.2	105	17.2
`values` The values() method of the Highlight interface returns a new Iterator object that contains the values for each Range object in the Highlight object in insertion order.	105	105	140	17.2	105	17.2
`HighlightRegistry` The HighlightRegistry interface of the CSS Custom Highlight API is used to register Highlight objects to be styled using the API. It is accessed via CSS.highlights_static.	105	105	140	17.2	105	17.2
`@@iterator` [Symbol.iterator]	105	105	140	17.2	105	17.2
`clear` The clear() method of the HighlightRegistry interface removes all the Highlight objects registered in the HighlightRegistry.	105	105	140	17.2	105	17.2
`delete` The delete() method of the HighlightRegistry interface removes a the named Highlight object from the HighlightRegistry.	105	105	140	17.2	105	17.2
`entries` The entries() method of the HighlightRegistry interface returns a new Iterator object that contains the [name, highlight] pairs for each element in the HighlightRegistry object, in insertion order.	105	105	140	17.2	105	17.2
`forEach` The forEach() method of the HighlightRegistry interface executes a provided function once for each Highlight object in the registry, in insertion order.	105	105	140	17.2	105	17.2
`get` The get() method of the HighlightRegistry interface returns the named Highlight object from the registry.	105	105	140	17.2	105	17.2
`has` The has() method of the HighlightRegistry interface returns a boolean indicating whether or not a Highlight object with the specified name exists in the registry.	105	105	140	17.2	105	17.2
`keys` The keys() method of the HighlightRegistry interface returns a new Iterator object that contains the keys for each Highlight object in the HighlightRegistry object in insertion order.	105	105	140	17.2	105	17.2
`set` The set() method of the HighlightRegistry interface adds or updates a Highlight object in the registry with the specified name.	105	105	140	17.2	105	17.2
`size` The size property returns the number of Highlight objects in the HighlightRegistry.	105	105	140	17.2	105	17.2
`values` The values() method of the HighlightRegistry interface returns a new Iterator object that contains the values for each Highlight object in the HighlightRegistry object in insertion order.	105	105	140	17.2	105	17.2

1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

CSS

::highlight(search-result) {
  background-color: #ffeb3b;
  color: black;
}
::highlight(spelling-error) {
  text-decoration: wavy underline red;
}

Live demo

Searchresult style

CSS Searchresult style demo.

PreviewFullscreen

Errordisplay style

CSS Errordisplay style demo.

PreviewFullscreen

mlcol-

CSS mlcol- demo.

PreviewFullscreen

Use cases

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

Cautions

Limited browser support. Check compatibility before use.

Overview

Browser support

Syntax

Live demo

Searchresult style

Errordisplay style

mlcol-

Use cases

Using Custom highlights

Cautions

Accessibility

Related links