最新的CSS API：CSS Custom Highlight

css Custom Highlight api即将到了，它实现了浏览器原生支持的CSS文本高亮功能，它的实现不会改变dom结构，因此性能非常高效。目前在谷歌Chrome 105中已经正式支持，相信它在将来会成为Web样式化选中文本的不二法门！下面由fly63前端网为大家简单介绍它的使用。

示例

首先来看一个示例：

<style>
	:root::highlight(exp) {
		background-color: #67C23A;
		color: #fff;
	}
</style>
<div id="container"><span>fly63-</span><span>web前端开发</span><span>感谢您的使用</span></div>
<script>
  let r = new Range();
  r.setStart(container, 0);
  r.setEnd(container, 2);
  CSS.highlights.set("exp", new Highlight(r));
</script>

可以看出：以上代码使用::highlight()伪元素定义了一个背景颜色和字体颜色。在js部分通过Range对象创建文本选择范围，然后利用CSS.highlights的set方法注册到页面，类似于Map对象的操作。

效果如下：

fly63-web前端开发感谢您的使用

::highlight()伪元素

这是css的一个新的伪元素，使用也是非常简单，语法如下：

::highlight(custom-highlight-name) {
   color: #fff
}

我们需要注意的是它支持的css样式有哪些? 同::selection这种伪元素比较一样，目前只支持部分文本相关样式，包括：

color:文本颜色
background-color/background:背景颜色，目前只支持单一颜色，gradient渐变颜色和background-image是不支持的
text-decoration:文本修饰（在规范的第 2 版中受支持）
text-shadow:文本阴影
-webkit-text-stroke:文本描边
-webkit-text-fill-color:文本填充

这个伪类必须要有一个“参数”：custom-highlight-name，它用于代表高亮的名称，在示例中可以看出：CSS.highlights的set方法第一个参数就是它。

创建选区

创建Range对象方式有2种，比如：

let r = new Range();

或者

let r = document.createRange();

Range对象的主要定位方法：

setStart：设置起点的位置
setEnd：设置结束点的位置

通过setStart和setEnd，就能完成一段选区的创建。当然它还有很多属性和方法，但这里不是我们介绍的重点。

注册高亮

高亮实例化，需要用到Highlight对象。HighlightRegistry通过访问的接口是CSS.highlights一个Map类对象，用于注册Highlight要使用CSS Custom Highlight API设置样式的对象。这里主要使用set方法，将给定Highlight对象添加到具有给定名称的注册表中，或者更新命名Highlight对象（如果它已存在于注册表中）。

const highlight = new Highlight(range1, range2, ...);
CSS.highlights.set("custom-highlight-name", highlight );

PS：我们可以根据需要创建任意数量的 Highlight 对象。例如，如果我们正在构建一个协作文本编辑器，其中每个关键词都获得不同的文本颜色，那么我们可以为每个关键词创建一个Highlight 对象。

上面注册的key名：custom-highlight-name，就是css伪类::highlight中提到的高亮名称。

由于目前兼容性比较差，需要判断一下使用：

if (!!CSS.highlights) {
  /*支持CSS.highlights*/
}

CSS.highlights的方法介绍：

clear()：Highlight从注册表中删除所有对象。
delete()：Highlight从注册表中删除命名对象。
entries()：返回一个新的迭代器对象，该对象Highlight按插入顺序包含注册表中的每个对象。
forEach()：Highlight按插入顺序为注册表中的每个对象调用一次给定的回调。
get()：Highlight从注册表中获取命名对象。
has()：返回一个布尔值，断言Highlight对象是否存在于注册表中。
keys()：别名HighlightRegistry.values()。
set()：将给定Highlight对象添加到具有给定名称的注册表中，或者更新命名Highlight对象（如果它已存在于注册表中）。
values()：返回一个新的迭代器对象，该对象Highlight按插入顺序产生注册表中的对象。

这些方法可以帮助我们更多的操作高亮注册表，比如更新高亮文本：可以通过CSS.highlights.clear()清除高亮注册表，然后从头开始。

结语

CSS Custom Highlight API真的值得我们的关注吗？当然，它太值得了！

即使CSS自定义高亮文本API一开始可能看起来有点复杂（即必须创建范围，然后高亮文本，然后注册它们，最后为它们设置样式），但它比创建新的DOM元素并插入要简单得多，而且不会改变dom结构，有着非常高的性能，经测试发现：CSS Custom Highlight API 的平均执行速度比基于DOM的高亮快5倍。

随着越来越多浏览器的支持，大家可以想象一下：该API能解决什么问题，解锁什么骚操作！

链接: https://fly63.com/article/detial/12369