CSS Custom Highlight API

A recently developed and highly practical feature known as the CSS Custom Highlight API [1], now offers browser-native support for CSS text highlighting. This cutting-edge feature enables users to customize the style of any text without the need to alter the dom structure. Here are some examples

The Highlight API is now supported in Chrome. Let's learn about it!

I. Pseudo-element ::highlight()

To customize arbitrary text styles requires a combination of CSS and JS. Let's start with the CSS part, a new pseudo-element that is very simple

::highlight(custom-highlight-name) {
? color: red
}        

Similar to ::selection pseudo-element, only some text-related styles are supported, as follows

• color
• background-color
• text-decoration
• text-shadow
• -webkit-text-stroke
• -webkit-text-fill-color

Note that ::highlight() does not support background-image, i.e. gradients and such are not supported either.

However, just knowing this pseudo-class is useless, she also needs a "parameter", that is, the above custom-highlight-name, which indicates the name of the highlighting. In other words, how to identify the part of the page that requires custom-style text?

Let's go to the next section - JavaScript

II. CSS Custom Highlight API

1.Create ranges

Now, we get two range objects, range1 and range2

2. Create highlights

We can create as many highlights as we need.

3. Register highlights

Once highlights have been created, we can use CSS.highlights to register them.

Here "highlight1" is the "custom-highlight-name" in section I. Due to the current compatibility, we'd better do extra judgment

4. Style highlights

The final step is to style the registered highlights. This is done by using ::highlight()?pseudo-element.

The above is the entire process, slightly complex, but still relatively well understood, the key is the first step. Now, we summarise the whole process with a diagram

We have finished the theoretical part. Let's have some examples :)

III. Rainbow Text

How to make a rainbow text like the example shown at the beginning of the article? Let's create a <p> label in our HTML file at first

In CSS, we define some colours

In the JS, we use for loop to create highlights

Now, we successfully create a rainbow text without modifying the DOM.

IV. Highlighting Search Results

We all know that we could use ctrl+f to highlight the search results on web pages. Now, we can use Highlight API to achieve this feature.

Here is our HTML

The CSS

The JS

The final result

We can also set the highlight effect to be underline wavy

And, we have

Now we may understand the benefits of using the Highlight API. By avoiding complex DOM activities, we can improve page performance. We can have some tests using the below link

In the case of 10000 nodes, the difference between the two is 5 times. And the larger the number, the more pronounced the performance gap, even leading directly to browser jamming!

V. A Lightweight Text Editor

Finally, let's look at a very practical example of an editor that can easily implement a code highlighter.

Suppose the HTML structure is like this, very simple, just a plain <pre> tag

In CSS, we set the text to be editable and we set some colour patterns

And the JS

Here, we use the existing code highlighting library, highlight.js [2].

We are using the CSS language pattern in this example. We can also change to other language patterns :)

Compared to traditional editors, this is a pure text editor, very lightweight, does not affect the cursor while highlighting, as no new dom is generated, and the performance is superb!

VI. Summarize

The CSS Custom Highlight API has the potential to be a powerful tool for developers. This API allows you to highlight specific parts of a webpage without needing to manipulate the DOM, which can lead to increased efficiency and smoother user experiences. However, one downside of this API is that it currently lacks compatibility with some browsers, which can limit its usefulness. If compatibility issues can be addressed, this API could be a valuable addition to the toolkit of web developers looking to enhance the visual appeal and functionality of their websites.

Reference

[1] https://developer.mozilla.org/en-US/docs/Web/API/CSS_Custom_Highlight_API

[2] https://highlightjs.org

Examples in this article could be downloaded from