CSS 自定义高亮 API：精通文本选择样式

在网页上选择文本这一普通操作，大多数用户都习以为常。然而，作为开发者，我们常常致力于增强即便是最细微的交互。CSS 自定义高亮 API (CSS Custom Highlight API) 让我们能够革新文本选择体验，对选中文本的外观提供了前所未有的控制。这种能力超越了简单的背景和文本颜色更改，允许我们创造出复杂且引人入胜的用户界面。

什么是 CSS 自定义高亮 API？

CSS 自定义高亮 API 是一项现代 Web 标准，它提供了一种使用 CSS 来设置文本选择（以及其他高亮范围）外观样式的方法。它引入了 ::highlight() 伪元素，该伪元素根据开发者定义的标准来定位特定的文本范围。这个 API 克服了传统 ::selection 伪元素的局限性，后者只提供非常基本的样式选项。借助自定义高亮 API，您可以创建高度定制化且具有上下文感知能力的文本选择样式。

为何使用 CSS 自定义高亮 API？

与传统的文本选择样式化方法相比，自定义高亮 API 提供了几个优势：

增强用户体验： 创建视觉上吸引人且信息丰富的文本选择，以引导用户并提高可读性。
上下文感知样式： 根据所选文本的内容应用不同的样式，例如高亮代码片段或强调关键术语。
提升可访问性： 为选定文本提供清晰的视觉提示，使有视觉障碍的用户更容易浏览内容。
可定制外观： 不再局限于基本的背景和文本颜色更改，可以创建独特且引人入胜的文本选择样式。
动态样式： 根据用户交互或应用程序状态更改文本选择的外观。

理解关键概念

在深入研究代码示例之前，了解 CSS 自定义高亮 API 的核心概念至关重要：

1. 高亮注册

该过程始于使用 JavaScript 注册一个自定义高亮名称。然后，该名称将在 CSS 中用于定位特定的文本选择。

2. 高亮范围

高亮范围定义了要设置样式的特定文本跨度。这些范围是使用 Highlight 和 StaticRange 或 Range API 以编程方式创建的。它们指定了要高亮显示的文本的起始点和结束点。

3. `::highlight()` 伪元素

这个伪元素在 CSS 中用于将样式应用于已注册的高亮名称。它充当一个选择器，定位由高亮范围定义的文本跨度。

实践示例：实现 CSS 自定义高亮 API

让我们通过几个实践示例来说明如何使用 CSS 自定义高亮 API。

示例 1：基本文本选择样式

此示例演示了如何更改所选文本的背景和文本颜色。

HTML:

<p id="myText">这是一些可以被选择的文本。</p>

JavaScript:

const myText = document.getElementById('myText');
const highlight = new Highlight();

// 选择整个段落
highlight.add(new Range(myText.firstChild, 0, myText.firstChild, myText.firstChild.length));

CSS.highlights.set('myHighlight', highlight);

CSS:

::highlight(myHighlight) {
  background-color: #ff0;
  color: #000;
}

解释：

JavaScript 代码创建了一个 Highlight 对象，并添加了一个覆盖整个 ID 为 myText 的段落的范围。
CSS.highlights.set() 方法以名称 'myHighlight' 注册了该高亮。
CSS 代码使用 ::highlight(myHighlight) 伪元素为所选文本设置黄色背景和黑色文本颜色。

示例 2：高亮特定单词

此示例演示了如何高亮段落中的特定单词。

HTML:

<p id="myText">这是一个包含我们想要高亮的单词“高亮”的段落。</p>

JavaScript:

const myText = document.getElementById('myText');
const highlight = new Highlight();
const textContent = myText.textContent;
const wordsToHighlight = ['高亮'];

wordsToHighlight.forEach(word => {
  let index = textContent.indexOf(word);
  while (index !== -1) {
    highlight.add(new Range(myText.firstChild, index, myText.firstChild, index + word.length));
    index = textContent.indexOf(word, index + 1);
  }
});

CSS.highlights.set('keywordHighlight', highlight);

CSS:

::highlight(keywordHighlight) {
  background-color: lightgreen;
  font-weight: bold;
}

解释：

JavaScript 代码遍历段落中的单词，并识别出单词“高亮”的索引。
对于每一次出现，它都会创建一个 Range 对象并将其添加到 Highlight 对象中。
CSS 代码为高亮的单词设置了浅绿色背景和粗体字重。

示例 3：根据用户输入动态高亮

此示例演示了如何根据用户在搜索框中的输入动态高亮文本。

HTML:

<input type="text" id="searchInput" placeholder="输入要高亮的文本">
<p id="myText">这是一些将根据用户输入动态高亮的文本。</p>

JavaScript:

const searchInput = document.getElementById('searchInput');
const myText = document.getElementById('myText');
const highlight = new Highlight();

searchInput.addEventListener('input', () => {
  const searchTerm = searchInput.value;
  highlight.clear(); // 清除之前的高亮

  if (searchTerm) {
    const textContent = myText.textContent;
    let index = textContent.indexOf(searchTerm);
    while (index !== -1) {
      highlight.add(new Range(myText.firstChild, index, myText.firstChild, index + searchTerm.length));
      index = textContent.indexOf(searchTerm, index + 1);
    }
  }

  CSS.highlights.set('searchHighlight', highlight);
});

CSS:

::highlight(searchHighlight) {
  background-color: yellow;
  color: black;
}

解释：

JavaScript 代码监听搜索框的输入变化。
它会清除任何现有的高亮，然后在段落中搜索输入的文本。
对于每一次出现，它都会创建一个 Range 对象并将其添加到 Highlight 对象中。
CSS 代码为动态高亮的文本设置了黄色背景和黑色文本颜色。

示例 4：使用 `::highlight()` 自定义高亮外观

自定义高亮 API 的强大之处在于它能够自定义高亮文本的外观和感觉。以下是如何应用阴影、渐变和其他视觉效果。

HTML:

<p id="customText">选择此文本以查看自定义高亮效果。</p>

JavaScript:

const customText = document.getElementById('customText');
const highlight = new Highlight();
highlight.add(new Range(customText.firstChild, 0, customText.firstChild, customText.firstChild.length));
CSS.highlights.set('fancyHighlight', highlight);

CSS:

::highlight(fancyHighlight) {
  background: linear-gradient(to right, #4CAF50, #8BC34A);
  color: white;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  padding: 2px 5px;
}

解释：

此示例为高亮文本应用了线性渐变背景、白色文本、文本阴影、圆角和内边距。
这展示了您如何在 ::highlight() 伪元素中使用标准的 CSS 属性，以实现视觉上吸引人且独特的选择样式。

可访问性考量

虽然增强文本选择的视觉外观很重要，但可访问性应始终是首要考虑因素。以下是一些确保您的自定义高亮样式具有可访问性的准则：

颜色对比度： 确保高亮文本的背景色和文本色之间有足够的对比度。使用像 WebAIM Contrast Checker 这样的工具来验证是否符合可访问性标准 (WCAG)。
视觉提示： 为所选文本提供清晰的视觉提示。避免使用微妙的颜色变化，这可能让有视觉障碍的用户难以察觉。
键盘导航： 确保自定义高亮样式不会干扰键盘导航。用户应该能够使用键盘轻松选择和导航文本。
屏幕阅读器兼容性： 使用屏幕阅读器测试您的自定义高亮样式，以确保所选文本能被正确朗读。

浏览器兼容性

CSS 自定义高亮 API 是一个相对较新的 Web 标准，浏览器兼容性可能有所不同。截至 2023 年末/2024 年初，支持度正在增长，但尚未得到普遍实现。您可以在像 “Can I use...” 这样的网站上查看当前的浏览器支持状态，以了解兼容性更新的信息。

可以考虑使用特性检测为尚不支持该 API 的浏览器提供回退样式。

if ('CSS' in window && 'highlights' in CSS) {
  // 使用自定义高亮 API
} else {
  // 使用 ::selection 提供回退样式
}

实际用例

CSS 自定义高亮 API 有许多实际应用，包括：

代码编辑器： 在代码编辑器中高亮语法元素、错误和警告。
电子学习平台： 在教育材料中强调关键概念和定义。
文档查看器： 允许用户在文档中高亮和注释文本。
搜索结果： 在搜索结果中高亮搜索词。
数据可视化： 在图表和图形中高亮特定的数据点或趋势。

最佳实践与技巧

使用描述性高亮名称： 选择能清楚表明高亮目的的名称。
必要时清除高亮： 当不再需要高亮时，记得清除它们，以避免意外的样式问题。
优化性能： 避免创建过多的高亮范围，因为这可能会影响性能。
充分测试： 在不同的浏览器和设备上测试您的自定义高亮样式，以确保兼容性和可访问性。
考虑回退方案： 为尚不支持自定义高亮 API 的浏览器提供回退样式。

高级技巧

1. 组合多个高亮

您可以组合多个高亮来创建更复杂的样式效果。例如，您可能希望用不同的样式同时高亮关键词和用户选择的文本。

2. 使用事件更新高亮

您可以使用 JavaScript 事件（如 mouseover 或 click）根据用户交互动态更新高亮范围。

3. 与第三方库集成

您可以将自定义高亮 API 与第三方库集成，以创建更复杂的高亮解决方案。例如，您可以使用自然语言处理 (NLP) 库来自动识别和高亮文档中的关键术语。

文本选择样式的未来

CSS 自定义高亮 API 代表了文本选择样式方面的一大进步。它使开发者能够创建更具吸引力、可访问性和上下文感知的用户界面。随着浏览器支持度的不断增长，自定义高亮 API 有望成为全球 Web 开发者的重要工具。

结论

CSS 自定义高亮 API 为自定义文本选择体验开启了一个充满可能性的世界。通过理解其关键概念、探索实践示例并考虑可访问性准则，您可以利用这个强大的 API 来创建真正出色的用户界面。拥抱自定义高亮 API，将您的 Web 开发项目提升到新的高度。

尝试所提供的示例，根据您的具体需求进行调整，并探索 CSS 自定义高亮 API 的全部潜力。您的用户将会欣赏您对细节的关注和增强的用户体验。

CSS 自定义高亮 API：精通文本选择样式

什么是 CSS 自定义高亮 API？

为何使用 CSS 自定义高亮 API？

理解关键概念

1. 高亮注册

2. 高亮范围

3. ::highlight() 伪元素

实践示例：实现 CSS 自定义高亮 API

示例 1：基本文本选择样式

示例 2：高亮特定单词

示例 3：根据用户输入动态高亮

示例 4：使用 ::highlight() 自定义高亮外观

可访问性考量

浏览器兼容性

实际用例

最佳实践与技巧

高级技巧

1. 组合多个高亮

2. 使用事件更新高亮

3. 与第三方库集成

文本选择样式的未来

结论

3. `::highlight()` 伪元素

示例 4：使用 `::highlight()` 自定义高亮外观