diff --git a/files/en-us/web/api/css/highlights_static/index.md b/files/en-us/web/api/css/highlights_static/index.md index 8d0c51c51d72f68..a5a59619a3a33a2 100644 --- a/files/en-us/web/api/css/highlights_static/index.md +++ b/files/en-us/web/api/css/highlights_static/index.md @@ -52,4 +52,5 @@ CSS.highlights.set("my-custom-highlight", myCustomHighlight); ## See also - {{domxref("css_custom_highlight_api", "The CSS Custom Highlight API", "", "nocode")}} +- [CSS custom highlight API](/en-US/docs/Web/CSS/CSS_custom_highlight_API) module - [CSS Custom Highlight API: The Future of Highlighting Text Ranges on the Web](https://css-tricks.com/css-custom-highlight-api-early-look/) diff --git a/files/en-us/web/api/css_custom_highlight_api/index.md b/files/en-us/web/api/css_custom_highlight_api/index.md index 9704cf10571c36f..9f99e9ae77304bd 100644 --- a/files/en-us/web/api/css_custom_highlight_api/index.md +++ b/files/en-us/web/api/css_custom_highlight_api/index.md @@ -237,3 +237,4 @@ The result is shown below. Type text within the search field to highlight matche - [CSS Custom Highlight API: The Future of Highlighting Text Ranges on the Web](https://css-tricks.com/css-custom-highlight-api-early-look/) - HTML [`contentEditable`](/en-US/docs/Web/HTML/Reference/Global_attributes/contenteditable) attribute - CSS {{cssxref("pseudo-elements")}} +- [CSS custom highlight API](/en-US/docs/Web/CSS/CSS_custom_highlight_API) module diff --git a/files/en-us/web/api/highlight/highlight/index.md b/files/en-us/web/api/highlight/highlight/index.md index b02fe12b27bed7f..8b80bd80f9cbce9 100644 --- a/files/en-us/web/api/highlight/highlight/index.md +++ b/files/en-us/web/api/highlight/highlight/index.md @@ -55,4 +55,5 @@ const highlight = new Highlight(range1, range2); ## See also - {{domxref("css_custom_highlight_api", "The CSS Custom Highlight API", "", "nocode")}} +- [CSS custom highlight API](/en-US/docs/Web/CSS/CSS_custom_highlight_API) module - [CSS Custom Highlight API: The Future of Highlighting Text Ranges on the Web](https://css-tricks.com/css-custom-highlight-api-early-look/) diff --git a/files/en-us/web/api/highlight/index.md b/files/en-us/web/api/highlight/index.md index 433cd4b3a48143b..578ab4c2c51103e 100644 --- a/files/en-us/web/api/highlight/index.md +++ b/files/en-us/web/api/highlight/index.md @@ -107,4 +107,5 @@ The following CSS code snippet demonstrates how to style the registered custom h ## See also - {{domxref("css_custom_highlight_api", "The CSS Custom Highlight API", "", "nocode")}} +- [CSS custom highlight API](/en-US/docs/Web/CSS/CSS_custom_highlight_API) module - [CSS Custom Highlight API: The Future of Highlighting Text Ranges on the Web](https://css-tricks.com/css-custom-highlight-api-early-look/) diff --git a/files/en-us/web/api/highlight/type/index.md b/files/en-us/web/api/highlight/type/index.md index 3c2326d4c0f415f..e3de3298e0bb934 100644 --- a/files/en-us/web/api/highlight/type/index.md +++ b/files/en-us/web/api/highlight/type/index.md @@ -46,4 +46,5 @@ spellErrorsHighlight.type = "spelling-error"; ## See also - {{domxref("css_custom_highlight_api", "The CSS Custom Highlight API", "", "nocode")}} +- [CSS custom highlight API](/en-US/docs/Web/CSS/CSS_custom_highlight_API) module - [CSS Custom Highlight API: The Future of Highlighting Text Ranges on the Web](https://css-tricks.com/css-custom-highlight-api-early-look/) diff --git a/files/en-us/web/api/highlightregistry/index.md b/files/en-us/web/api/highlightregistry/index.md index 2edd69657e8be9e..61ed6be52c10a7a 100644 --- a/files/en-us/web/api/highlightregistry/index.md +++ b/files/en-us/web/api/highlightregistry/index.md @@ -105,4 +105,5 @@ CSS.highlights.set("my-custom-highlight", highlight); ## See also - {{domxref("css_custom_highlight_api", "The CSS Custom Highlight API", "", "nocode")}} +- [CSS custom highlight API](/en-US/docs/Web/CSS/CSS_custom_highlight_API) module - [CSS Custom Highlight API: The Future of Highlighting Text Ranges on the Web](https://css-tricks.com/css-custom-highlight-api-early-look/) diff --git a/files/en-us/web/api/highlightregistry/set/index.md b/files/en-us/web/api/highlightregistry/set/index.md index 07caef0fac71583..a0c7cabc2a79007 100644 --- a/files/en-us/web/api/highlightregistry/set/index.md +++ b/files/en-us/web/api/highlightregistry/set/index.md @@ -65,4 +65,5 @@ CSS.highlights ## See also - {{domxref("css_custom_highlight_api", "The CSS Custom Highlight API", "", "nocode")}} +- [CSS custom highlight API](/en-US/docs/Web/CSS/CSS_custom_highlight_API) module - [CSS Custom Highlight API: The Future of Highlighting Text Ranges on the Web](https://css-tricks.com/css-custom-highlight-api-early-look/) diff --git a/files/en-us/web/api/range/range/index.md b/files/en-us/web/api/range/range/index.md index d84fb39c89bba70..8567b76d9bd7c0d 100644 --- a/files/en-us/web/api/range/range/index.md +++ b/files/en-us/web/api/range/range/index.md @@ -75,3 +75,4 @@ selection.addRange(range); - [The DOM interfaces index](/en-US/docs/Web/API/Document_Object_Model) - {{domxref("Document.createRange()")}} +- [CSS custom highlight API](/en-US/docs/Web/CSS/CSS_custom_highlight_API) module diff --git a/files/en-us/web/css/_doublecolon_highlight/index.md b/files/en-us/web/css/_doublecolon_highlight/index.md index a1dcd6d87ac5b30..411e6c589e3d690 100644 --- a/files/en-us/web/css/_doublecolon_highlight/index.md +++ b/files/en-us/web/css/_doublecolon_highlight/index.md @@ -124,5 +124,6 @@ for (let i = 0; i < textNode.textContent.length; i++) { ## See also -- [CSS custom highlight API](/en-US/docs/Web/API/CSS_Custom_Highlight_API) +- [CSS custom highlight API](/en-US/docs/Web/CSS/CSS_custom_highlight_API) module +- [CSS custom highlight](/en-US/docs/Web/API/CSS_Custom_Highlight_API) API - [CSS pseudo-elements](/en-US/docs/Web/CSS/CSS_pseudo-elements) module diff --git a/files/en-us/web/css/css_custom_highlight_api/index.md b/files/en-us/web/css/css_custom_highlight_api/index.md new file mode 100644 index 000000000000000..57b741c046a7810 --- /dev/null +++ b/files/en-us/web/css/css_custom_highlight_api/index.md @@ -0,0 +1,104 @@ +--- +title: CSS custom highlight API +slug: Web/CSS/CSS_custom_highlight_API +page-type: css-module +spec-urls: https://drafts.csswg.org/css-highlight-api-1/ +sidebar: cssref +--- + +The **CSS custom highlight API** module provides a programmatic way to target specific ranges of text defined by range objects, without affecting the underlying DOM structure. The range objects can then be selected via `::highlight()` pseudo-elements, and have highlight styles added and removed. The features of this module can create highlight effects similar to how text editors highlight spelling or grammar errors, and code editors highlight syntax errors. + +The CSS Custom Highlight API extends the concept of other highlight pseudo-elements such as {{cssxref('::selection')}}, {{cssxref('::spelling-error')}}, {{cssxref('::grammar-error')}}, and {{cssxref('::target-text')}} by providing a way to create arbitrary text ranges (defined as {{domxref('Range')}} objects in JavaScript) and style them via CSS, rather than being limited to browser-defined ranges. + +## Custom highlight API in action + +To enable styling text ranges on a webpage using the CSS Custom Highlight API, you create a {{domxref("Range")}} object, then a {{domxref("Highlight")}} object for the range. After registering the highlight using the {{domxref("HighlightRegistry.set()")}} method, you can then select the range using the {{cssxref("::highlight", "::highlight()")}} pseudo-element. The name defined in the `set()` method is used as the parameter of the `::highlight()` pseudo-element selector to select that range.The range selected by the `::highlight()` pseudo-element can be styled using a [limited number of properties](/en-US/docs/Web/CSS/::highlight#allowable_properties). + +```html-nolint hidden +

Directions

+

Lincoln Memorial to Martin Luther King, Jr. Memorial

+
  1. Head south on Lincoln Memorial Circle
  2. Turn right toward Independence Ave
  3. Turn left onto Independence Ave
  4. Turn right onto West Basin Dr
  5. Look up when you reach 64 Independence Ave!
    6. +
+
+ +``` + +This example uses the {{cssxref("text-decoration")}} property to strike throgh the `steps` highlight range defined by our JavaScript: + +```css +::highlight(steps) { + text-decoration: line-through; + color: blue; +} +``` + +We create a `Range` with a start and end node (which is the same node in this case). We then set this range as the `Highlight` using the `set()` method of the CSS `HighlightRegistry` interface. + +```js +const rangeToHighlight = new Range(); +const list = document.querySelector("ol"); +rangeToHighlight.setStart(list, 0); +rangeToHighlight.setEnd(list, 0); + +CSS.highlights.set("steps", new Highlight(rangeToHighlight)); +``` + +An event listener updates the end of the highlighted range when the number of completed steps changes: + +```js +const currentPositionSlider = document.querySelector("input"); +currentPositionSlider.addEventListener("change", (e) => { + rangeToHighlight.setEnd(list, e.target.value); +}); +``` + +{{ EmbedLiveSample('Custom highlight API in action', 700, 300) }} + +## Reference + +### Pseudo-elements + +- {{CSSXref("::highlight()")}} + +### Interfaces + +- {{domxref("Highlight")}} +- {{domxref("HighlightRegistry")}} + +### Interface extensions + +This module adds properties and methods to interfaces defined in other specifications. + +- {{domxref("CSS")}} + - {{domxref("CSS.highlights")}} + +## Guides + +- [CSS custom highlight API](/en-US/docs/Web/API/CSS_Custom_Highlight_API#concepts_and_usage) + - : The concepts and usage of the CSS custom highlight API, including creating `Range` and `Highlight` objects, registering the highlights using the `HighlightRegistry`, and styling the highlights using the `::highlight()` pseudo-element. + +## Related concepts + +- {{CSSXref("::grammar-error")}} +- {{CSSXref("::selection")}} +- {{CSSXref("::spelling-error")}} +- {{CSSXref("::target-text")}} +- {{domxref("Range")}} Interface and {{domxref("Range.range", "Range()")}} constructor +- [Text fragments](/en-US/docs/Web/URI/Reference/Fragment/Text_fragments) +- {{domxref("FragmentDirective")}} Interface + +## Specifications + +{{Specifications}} + +## See also + +- [CSS pseudo-element module](/en-US/docs/Web/CSS/CSS_pseudo-elements) +- [CSS Object Model (CSSOM)](/en-US/docs/Web/API/CSS_Object_Model) APIs