原生 CSS Custom Highlight 终于来了

,介绍一个比较前沿但是非常有用的新特性：一个浏览器原生支持的 CSS​ 文本高亮高亮功能，官方名称叫做 CSS Custom Highlight API[1]，有了它，可以在不改变 dom 结构的情况下自定义任意文本的样式，例如：,,再例如搜索词高亮。,,还可以轻易实现代码高亮。,,多么令人兴奋的功能啊，现在在 Chrome 105 中已经正式支持了（无需开启实验特性），一起学习一下吧,要自定义任意文本样式需要 CSS 和 JS 的共同作用。,首先来看 CSS 部分，一个新的伪元素，非常简单、,和::selection这类伪元素比较类似，仅支持部分文本相关样式，如下,但是，仅仅知道这个伪类是没用的，她还需要一个“参数”，也就是上面的custom-highlight-name，表示高亮的名称，那这个是怎么来的呢？或者换句话说，如何去标识页面中需要自定义样式的那部分文本呢？,这就需要借助下面的内容了，看看如何生成这个“参数”，这才是重点,大部分操作其实和这个原理是相同的，只是把拿到的选区做了进一步处理，具体分以下几步,首先，通过Range[2]对象创建文本选择范围，就像用鼠标滑过选区一样，这也是最复杂的一部分，例如：,这样可以得到选区对象range1、range2。,然后，将创建的选区高亮实例化，需要用到Highlight[3]对象。,当然也可以根据需求创建多个。,这样可以得到高亮对象highlight1、highlight2。,接着，需要将实例化的高亮对象通过[CSS.Highlight](HighlightRegistry – Web APIs | MDN (mozilla.org “CSS.Highlight”))注册到页面。,有点类似于Map对象的操作。,目前兼容性比较差，所以需要额外判断一下。,注意看，上面注册的key名，highlight1就是上一节提到的高亮名称，也就是 CSS 中需要的“参数”,最后，将定义的高亮名称结合::highlight，这样就可以自定义选中样式了,以上就是全部过程了，稍显复杂，但是还是比较好理解的，关键是第一步创建选区的过程，最为复杂。,,原理就是这样，下面看一些实例。,现在来实现文章开头图示效果，彩虹文本效果。总共7种颜色，文字依次变色，不断循环，而且仅有一个标签。,这里总共有7​种颜色，所以需要创建7​个高亮区域，可以先定义高亮 CSS，如下：,现在肯定不会有什么变化，因为还没创建选区,,先创建一个高亮区域试试，比如第一个文字。,效果如下：,,下面通过循环，创建7个高亮区域。,这样就在不改变dom的情况下实现了彩虹文字效果。,,完整代码可以查看以下任意链接：（注意需要Chrome 105+）,大家都知道浏览器的搜索功能，ctrl+f就可以快速对整个网页就行查找，查找到的关键词会添加黄色背景的高亮，如下：,,以前一直很疑惑这个颜色是怎么添加的，毕竟没有任何包裹标签。现在有了CSS Custom Highlight API ，完全可以手动实现一个和原生浏览器一模一样的搜索高亮功能。,假设HTML结构是这样的，一个搜索框和一堆文本。,简单美化一下后效果如下：,,然后就是监听输入框，遍历文本节点（推荐使用原生的treeWalker，当然普通的递归也可以），根据搜索词创建选区，详细代码如下。,最后，通过CSS设置高亮的颜色。,实时搜索效果如下：,,完整代码可以查看以下任意链接：（注意需要Chrome 105+）,还可以将高亮效果改成波浪线。,效果如下，是不是也可用作错别字标识呢？,,除了避免dom​操作带来的便利外，性能也能得到极大的提升，毕竟创建、移除dom也是性能大户，下面是一个测试 demo，搬运自,测试代码可以查看以下任意链接：,测试效果如下：,,在10000​个节点的情况下，两者相差100倍的差距！而且数量越大，性能差距越明显，甚至直接导致浏览器卡死！,最后再来看一个非常实用的例子，可以轻易实现一个代码高亮的编辑器。,假设 HTML结构是这样的，很简单，就一个纯文本的标签。,简单修饰一下，设置为可编辑元素。,效果如下：,,那么，如何让这些代码高亮呢？,这就需要对内容进行关键词分析提取了，我们可以用现有的代码高亮库，比如highlight.js^[14]。,通过这个方法可以获取到CSS语言的关键词以及类型，如下：,,简单解释一下，这是一个数组，如果是纯文本，表示普通的字符，如果是对象，表示是关键词，例如第一个，children​里面的ul​就是关键词，类型是selector-tag​，也就是选择器，除此之外，还有attribute、number、selector-class等各种类型。有了这些关键词，我们就可以把这些文本单独选取出来，然后高亮成不同的颜色。,接下来，就需要对代码内容进行遍历了，方法也是类似的，如下：,最后，根据不同的类型，定义不同的颜色就行了，如下：,这样就得到了一个支持代码高亮的简易编辑器了。,,相比传统的编辑器而言，这个属于纯文本编辑，非常轻量，在高亮的同时也不会影响光标，因为不会生成新的​​dom​​，性能也是超级棒。,,完整代码可以查看以下任意链接：,以上就是关于CSS Custom Highlight API的使用方式以及应用示例了，下面再来回顾一下使用步骤：,相比传统使用标签的方式而已，有很多优点,其实归根结底，都是dom​变化带来的，而Highlight API恰好能有效避开这个问题。当然也有一些缺陷，由于仅仅能改变文本相关样式，所以也存在一些局限性，这个就需要权衡了，目前兼容性也还不足，仅适用于内部项目，敬请期待,[1]CSS Custom Highlight API: https://developer.mozilla.org/en-US/docs/Web/API/CSS_Custom_Highlight_API。,[2]Range: https://developer.mozilla.org/en-US/docs/Web/API/Range。,[3]Highlight: https://developer.mozilla.org/en-US/docs/Web/API/Highlight。,[4]CSS Custom Highlight API (juejin.cn): https://code.juejin.cn/pen/7198496899391815736。,[5]CSS Custom Highlight API (codepen.io): https://codepen.io/xboxyan/pen/qByzGYr。,[6]CSS Custom Highlight API (runjs.work): https://runjs.work/projects/450431c8f0064298。,[7]CSS Highlight search (juejin.cn): https://code.juejin.cn/pen/7198488612801871929。,[8]CSS Highlight search (codepen.io): https://codepen.io/xboxyan/pen/eYjwoqo。,[9]CSS Highlight search (runjs.work): https://runjs.work/projects/a661feba3dad44c9。,[10]https://ffiori.github.io/highlight-api-demos/demo-performance.html: https://ffiori.github.io/highlight-api-demos/demo-performance.html。,[11]Highlight performance demo (juejin.cn): https://code.juejin.cn/pen/7198487962978353208。,[12]Highlight performance demo (codepen.io): https://codepen.io/xboxyan/pen/YzjoMmp。,[13]Highlight performance demo (runjs.work): https://runjs.work/projects/e5fe09f70d324d99。,[14]highlight.js: https://highlightjs.org/。,[15]CSS highlight editor (juejin.cn): https://code.juejin.cn/pen/7198487629262749756。,[16]CSS highlight editor (codepen.io): https://codepen.io/xboxyan/pen/RwBzOmK。,[17]CSS highlight editor (runjs.work): https://runjs.work/projects/9ff7ab8f12844ce1。