Highlight
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
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()
Experimental-
Returns a newly created
Highlight
object.
Instance properties
The Highlight
interface doesn't inherit any properties.
Highlight.priority
Experimental-
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 Experimental-
Returns the number of ranges in the
Highlight
object. Highlight.type
Experimental-
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()
Experimental-
Add a new range to this highlight.
Highlight.clear()
Experimental-
Remove all ranges from this highlight.
Highlight.delete()
Experimental-
Remove a range from this highlight.
Highlight.entries()
Experimental-
Returns a new iterator object that contains each range in the highlight object, in insertion order.
Highlight.forEach()
Experimental-
Calls the given callback once for each range in the highlight object, in insertion order.
Highlight.has()
Experimental-
Returns a boolean asserting whether a range is present the highlight object or not.
Highlight.keys()
Experimental-
An alias for
Highlight.values()
. Highlight.values()
Experimental-
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
BCD tables only load in the browser