{"id":363724,"date":"2022-03-01T09:41:13","date_gmt":"2022-03-01T17:41:13","guid":{"rendered":"https:\/\/css-tricks.com\/?p=363724"},"modified":"2022-05-03T10:37:21","modified_gmt":"2022-05-03T17:37:21","slug":"css-custom-highlight-api-early-look","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/css-custom-highlight-api-early-look\/","title":{"rendered":"CSS Custom Highlight API: The Future of Highlighting Text Ranges on the Web"},"content":{"rendered":"\n

Styling ranges of text<\/strong> in software is a very useful thing to be able to do. Thankfully, we have the CSS Custom Highlight API to look forward to because it represents the future of styling text ranges on the web.<\/p>\n\n\n\n\n\n\n\n

\"Animation<\/figure>\n\n\n\n

One example: if you\u2019ve ever used text editing software like Google Docs, Word, or Dropbox Paper, you\u2019ll see they detect spelling and grammar errors and displaying nice little squiggly underlines below them to attract attention. Code editors like VS Code do the same for code errors.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Another very common use case for highlighting text is search and highlight<\/strong>, where you\u2019re given a text input box and typing in it searches matching results on the page, and highlights them. Try pressing Ctrl<\/code>\/\u2318<\/code>+ F<\/code> in your web browser right now and type in some text from this article.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

The browser itself often handles these styling situations. Editable areas (like a <textarea><\/code>) get spelling squiggles automatically. The find command highlights found text automatically.<\/p>\n\n\n\n

But what about when we want to do this type of styling ourselves? Doing this on the web has been a common problem for a long time. It has probably costed many people a lot more time than it should have.<\/p>\n\n\n\n

This isn\u2019t a simple problem to solve. We aren\u2019t just wrapping text in a <span><\/code> with a class and applying some CSS. Indeed, this requires being able to correctly highlight multiple<\/em> ranges of text across an arbitrarily complex DOM tree, and possibly crossing the boundaries of DOM elements.<\/p>\n\n\n\n

There are two common solutions to this, including:<\/p>\n\n\n\n

  1. styling text range pseudo-elements, and<\/li>
  2. creating your own text highlighting system.<\/li><\/ol>\n\n\n\n

    We\u2019ll review them first and then take a look at the upcoming CSS Custom Highlight API that can change it all. but if you’re <\/p>\n\n\n

    Potential Solution #1: Style-able Text Ranges<\/h3>\n\n\n

    Probably the most well-known style-able text range is the user selection. When you use your pointing device to select a piece of text in a web page, a Selection<\/code><\/a> object is automatically created. In fact, try selecting text on this page right now, and then run document.getSelection()<\/code> in the DevTools console. You should see location information about the selected text.<\/p>\n\n\n\n

    \"DevTools<\/figure>\n\n\n\n

    It turns out that you can also create a text selection programmatically from JavaScript. Here is an example:<\/p>\n\n\n\n

    \/\/ First, create a Range object.\nconst range = new Range();\n\n\/\/ And set its start and end positions.\nrange.setStart(parentNode, startOffset);\nrange.setEnd(parentNode, endOffset);\n\n\/\/ Then, set the current selection to this range.\ndocument.getSelection().removeAllRanges();\ndocument.getSelection().addRange(range);<\/code><\/pre>\n\n\n\n
    The last piece of the puzzle is to style this range. CSS has a pseudo-element called ::selection<\/code><\/a> to do just that, and it\u2019s supported across all browsers<\/a>.<\/p>\n\n\n\n
    ::selection {\n  background-color: #f06;\n  color: white;\n}<\/code><\/pre>\n\n\n\n
    Here is an example using this technique to highlight all words in a page one after the other:<\/p>\n\n\n\n