最新的CSS API:CSS Custom Highlight

更新日期: 2023-03-30阅读: 958标签: 伪类

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://www.fly63.com/article/detial/12369

css伪选择器使用总结——css中关于伪类和伪元素的知识总汇

CSS 伪类用于向某些选择器添加特殊的效果,而CSS引入伪类和伪元素的概念是为了实现基于文档树之外的信息的格式化。这里讲总结关于css伪类和伪元素的相关使用

如何使用JS操纵伪元素

获取伪元素的属性值可以使用window.getComputedStyle()方法,获取伪元素的CSS样式声明对象。然后利用getPropertyValue方法或直接使用键值访问都可以获取对应的属性值。 更换class来实现伪元素属性值的更改、使用CSSStyleSheet的insertRule来为伪元素修改样式、

css获取除第一个之外的子元素

有时候我们需要用CSS选择非第一个子元素,例如下面这样的HTML,希望让两个span之间间隔一定的距离,但又不希望简单的给每个span设置margin-right(会导致最后一个span也有margin-right,可能影响之后元素的排版)。

为什么是link-visited-hover-active

通常我们在设置链接的一些伪类(link,visited,hover,active)样式时,要让不同的状态显示正确的样式,我们需要按一定的顺序设置这些伪类的样式。这里我就按CSS2规范中推荐的顺序进行介绍,即 link-visited-hover-active

CSS3新增的伪类有哪些 与 居中div的多种方法

CSS3新增伪类有那些?p:first-of-type:选择属于其父元素的首个<p>元素,p:last-of-type:选择属于其父元素的最后<p>元素,p:only-of-type:属于父元素的特定类型的唯一子元素,p:only-child:属于父元素的唯一子元素的每个<p>元素;p:nth-child(2)

深入理解CSS伪类

伪类经常与伪元素混淆,伪元素的效果类似于通过添加一个实际的元素才能达到,而伪类的效果类似于通过添加一个实际的类来达到。实际上css3为了区分两者,已经明确规定了伪类用一个冒号来表示,而伪元素则用两个冒号来表示。本文将详细介绍伪类的详细知识

css否定伪类:not(s)

:not(X)是CSS中的一个否定伪类(选择器),并且接受一个简单的选择器作为参数。本质上,可以使任一其他选择器(作为参数)。:not(选择器)匹配传递参数选择器未选择的元素。传递参数或许不包括增加的选择器或者伪元素选择器。

善用CSS伪类,不用JS也能做出选项卡功能

本篇文章的技术给予选项卡UI另一种开发的选择,Radio button的特性还有很多应用可以做(如Switcher),只要善用HTML表单元素与CSS的一些技巧,也能玩出很多有趣的功能,甚至替代JavaScript的部份工作.

html中a标签的4个伪类样式

在CSS超链接的属性中,有四个连接方式:a:link a:hover a:visited a:acticve,之前在使用的时候一直是按照自认为的顺序中去写的,就是 L H V A的排序方式,然而有些时候却发现并不起作用了

中间文字,两边横线的css3伪类的使用

CSS伪类是用来添加一些选择器的特殊效果。使用了css3的伪类,即相当于是在一个div中写入文字,然后在它前后各加了一个div,然后进行位置及宽高的调节。代码中只写一个div,然后在css样式中,对该div设置flex布局

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!