Highlight

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

The Highlight interface of the CSS Custom Highlight API is used to represent a collection of Range instances to be styled using the API.

To style arbitrary ranges in a page, instantiate a new Highlight object, add one or more Range objects to it, and register it using the HighlightRegistry.

A Highlight instance is a Set-like object that can hold one or more Range objects.

Constructor

Highlight()

Returns a newly created Highlight object.

Instance properties

The Highlight interface doesn't inherit any properties.

Highlight.priority

A number that indicates the priority of this Highlight object. When multiple highlights overlap, the browser uses this priority to decide how to style the overlapping parts.

Highlight.size Read only

Returns the number of ranges in the Highlight object.

Highlight.type

An enumerated String used to specify the semantic meaning of the highlight. This allows assistive technologies to include this meaning when exposing the highlight to users.

Instance methods

The Highlight interface doesn't inherit any methods.

Highlight.add()

Add a new range to this highlight.

Highlight.clear()

Remove all ranges from this highlight.

Highlight.delete()

Remove a range from this highlight.

Highlight.entries()

Returns a new iterator object that contains each range in the highlight object, in insertion order.

Highlight.forEach()

Calls the given callback once for each range in the highlight object, in insertion order.

Highlight.has()

Returns a boolean asserting whether a range is present the highlight object or not.

Highlight.keys()

An alias for Highlight.values().

Highlight.values()

Returns a new iterator object that yields the ranges in the highlight object in insertion order.

Examples

The following example demonstrates how to create ranges, instantiate a new Highlight object for them, and register it to be styled on the page:

js
const parentNode = document.getElementById("foo");

// Create a couple of ranges.
const range1 = new Range();
range1.setStart(parentNode, 10);
range1.setEnd(parentNode, 20);

const range2 = new Range();
range2.setStart(parentNode, 40);
range2.setEnd(parentNode, 60);

// Create a custom highlight for these ranges.
const highlight = new Highlight(range1, range2);

// Register the ranges in the HighlightRegistry.
CSS.highlights.set("my-custom-highlight", highlight);

The following CSS code snippet demonstrates how to style the registered custom highlight by using the ::highlight pseudo-element:

css
::highlight(my-custom-highlight) {
  background-color: peachpuff;
}

Specifications

Specification
CSS Custom Highlight API Module Level 1
# highlight

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Highlight
[Symbol.iterator]
Highlight() constructor
add
clear
delete
entries
forEach
has
keys
priority
size
type
values

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
In development. Supported in a pre-release version.
In development. Supported in a pre-release version.
No support
No support
See implementation notes.

See also