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單位以及列表編號功能。


Advertisement

更多 iThome相關內容