The CSS Custom Highlight API is a powerful tool that developers can use to define custom highlights in web pages using JavaScript. This API provides an interface to easily create visual highlights, like underlines, background colors, etc., based on your user's selection or other events, ultimately enhancing your web application's interactivity and user experience.
In traditional CSS, custom highlighting can be cumbersome as it often involves multiple CSS classes and more complex JavaScript selection manipulation. The CSS Custom Highlight API simplifies this process by leveraging standardized pseudo-elements and pseudo-classes to dynamically apply styles.
Getting Started with CSS Custom Highlight API
To start using the Custom Highlight API, all you need is a relatively recent version of a modern web browser. It provides the global namespace object called highlight to manage the custom highlights.
Basic Example
Let’s dive into a basic example that demonstrates how to highlight text a user selects on a webpage:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Highlight Example</title>
<style>
/* Custom highlighting style example */
::highlight(my-highlight) {
background-color: yellow;
}
</style>
</head>
<body>
<p>Try selecting this text to see custom highlights in action!</p>
<script>
const selection = document.getSelection();
document.body.addEventListener('mouseup', () => {
if (selection.rangeCount > 0) {
const range = selection.getRangeAt(0);
window.highlight.add(range, { highlightId: 'my-highlight' });
}
});
</script>
</body>
</html>
In the example above, whenever the user selects text within the document, a highlight with a yellow background is applied to that range. The JavaScript portion manages selection detection and uses the add method to apply highlights. The highlighting is styled using normal CSS within the <style> section, specifying how the custom named highlight should appear.
Advanced Use Cases
The basic functionality can be extended to manage and animate multiple highlights, deal with overlapping highlights, and even track user selections persistently across reloads or sessions.
Managing Multiple Highlights
It is possible to manage a collection of highlights by assigning different highlightId values. Here’s how you could track two separate highlights:
window.highlight.add(range1, { highlightId: 'comment-highlight' });
window.highlight.add(range2, { highlightId: 'error-highlight' });
Then, define corresponding styles:
::highlight(comment-highlight) {
background-color: lightgreen;
}
::highlight(error-highlight) {
background-color: lightcoral;
}This approach allows you to semantically style different sections without mixing up styles. You can even remove highlights with the remove(highlightId) method when they are no longer needed, giving you fine-grained control.
Conclusion
The CSS Custom Highlight API is generally a great addition to the web API landscape. It helps reduce the complexity typical of custom highlight implementations by abstracting much of it into the browser engine itself. This API aims to enhance modularity and reusability in style management, providing an interesting, higher-level approach to dynamic content highlighting on the web.
As with any feature that deals with user interactions, always consider user experience and accessibility concerns, ensuring that highlights improve, rather than hinder, the usability of your page.
