---
title: "Working with ::highlight() using progressive enhancement"
url: https://daily.dev/posts/working-with-highlight-using-progressive-enhancement-svttq0eh5
source_url: https://piccalil.li/blog/working-with-highlight-using-progressive-enhancement
type: article
source: "Piccalilli"
published: 2026-08-06T12:12:54.406Z
updated: 2026-08-06T12:13:15.589Z
tags: ["javascript", "css"]
reading_time: 8
upvotes: 1
comments: 0
language: en
---

> ## Documentation Index
> Fetch the complete documentation index at: https://daily.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Working with ::highlight() using progressive enhancement

**[Piccalilli](https://daily.dev/sources/piccalilli)** · 8 min read · 1 upvotes · 0 comments

## Summary

A practical guide to using the CSS Custom Highlight API and the `::highlight()` pseudo-element for custom text highlighting. The tutorial walks through the four steps needed: creating `Highlight()` instances, registering them in `CSS.highlights`, creating `Range()` objects for text fragments, and styling with `::highlight()`. Crucially, it demonstrates a progressive enhancement approach using `<mark>` elements as a fallback for when JavaScript is unavailable or the browser lacks support, wrapping `::highlight()` styles in a `@supports` block.

## Full article

daily.dev links to this article rather than hosting it. Read it at the original source: <https://piccalil.li/blog/working-with-highlight-using-progressive-enhancement>

## Similar posts on daily.dev

- [What’s \!important \#17: Custom Highlight API, CSS Navigation Matching, Fixing text-stroke, and More](https://daily.dev/posts/what-s-important-17-custom-highlight-api-css-navigation-matching-fixing-text-stroke-and-more-alg764vfx) · CSS-Tricks · 7 upvotes · 0 comments
- [How to Style the New ::search-text and Other Highlight-y Pseudo-Elements](https://daily.dev/posts/how-to-style-the-new-search-text-and-other-highlight-y-pseudo-elements-trqriqyie) · CSS-Tricks · 2 upvotes · 1 comments

---

Tags: [#javascript](https://daily.dev/tags/javascript), [#css](https://daily.dev/tags/css)

[View this post on daily.dev](https://daily.dev/posts/working-with-highlight-using-progressive-enhancement-svttq0eh5)