Firefox 68实例::marker伪元素,方便开发者为列表加入项目符号

Mozilla说明了最新Firefox 68中的CSS功能细节,其跟上Chrome和Safari脚步,支持了Scroll Snap模块,并加入::marker伪元素功能,方便开发者为列表项目加入前置标记,另外还修正了ch单位以及列表编号的功能。

 

Firefox 68实例了和浏览器Chrome和Safari一致的Scroll Snap模块,Scroll Snap可以让网页容器滚动停止时,自然平滑地滑动到指定元素的指定位置,另外,Firefox 68也移除了早期Scroll Snap Points规范中的老旧属性。

而::marker伪元素则是有助于开发者为列表加入项目符号,这对于复杂元素特别有用,像是需要将图像作为项目符号,或是把列表中的文本包在Span中,以使用不同的项目符号与文本颜色的需求,::marker伪元素可以锁定项目符号本身,让开发者针对项目符号本身进行修改。虽然::marker伪元素只支持少数几个CSS属性,不过所有字体属性都能够使用,开发者可以自由地变化文本样式。

开发者还可以使用display:list-item,将任何元素转换成列表项目,而这样就能在这些元素前面显示项目符号。 ::marker伪元素是在CSS列表Level 3和CSS伪元素Level 4中的标准,目前仅在Firefox 68和Safari中实例,Chrome则尚未支持。

不同的浏览器,可能对同一个功能有着不同的运行方式,而这样的问题通常是因不同版本的网页平台造成,由于有许多行为并没有被明确地规范,因此Mozilla着手对CSS规范进行许多更改,解决互通性问题,Firefox 68就修正了ch单位以及列表编号功能。