瞭解 2023 年 4 月推出的穩定版和 Beta 版網頁瀏覽器中,有哪些有趣的功能。
穩定版瀏覽器版本
2023 年 4 月,Firefox 112 和 Chrome 112 穩定版推出。讓我們來看看這對網頁平台有何影響。
inert
屬性
Firefox 112 包含 inert
全域屬性。這個屬性會指示瀏覽器忽略元素,表示內容不應具互動性。其中包括:
- 避免觸發
click
事件。 - 防止元素獲得焦點。
- 將元素及其內容從無障礙樹狀結構中排除。
這項屬性現在可在所有三個引擎中互通。
linear()
緩和函式
linear()
加/減速功能可讓多個點之間的線性內插。這可讓您製作更複雜的動畫,例如彈跳和彈力效果。這個函式位於 Firefox 112 中。
瀏覽器支援
CSS 巢狀結構
Chrome 112 新增了對 CSS 巢狀結構的支援,這是許多開發人員期待已久的功能。這項功能會引入新的巢狀選取器 >
,用於巢狀相關樣式規則,讓使用過前置處理器的開發人員感到熟悉:
.nesting {
color: hotpink;
> .is {
color: rebeccapurple;
> .awesome {
color: deeppink;
}
}
}
CSS animation-composition
Chrome 112 也支援 animation-composition
。如要瞭解這個屬性如何運作,請參閱「指定多個動畫效果應如何與動畫組合」。
全新無頭模式
如果您使用 Chrome 的無頭模式 (例如搭配 Puppeteer),112 會提供全新的無頭模式。如要瞭解這項功能,請參閱「Chrome 的無頭模式升級」。
Beta 版瀏覽器版本
瀏覽器 Beta 版可讓您預覽瀏覽器下一個穩定版的內容。在正式發布前,您可以測試可能會影響網站的新功能或移除項目。新的 Beta 版為 Firefox 113 和 Chrome 113,Safari 16.5 Beta 版仍在進行中。這些版本為平台帶來許多實用功能。詳情請參閱版本資訊,以下僅列出幾項重點:
Firefox 113 包含 color()
、lab()
、lch()
、oklab()
和 oklch()
函式。另外還包含 CSS Color 5 的 color-mix()
函式和 forced-color-adjust
屬性。
Firefox 也包含 nth-child of <selector>
語法,可讓您更精細地控管要選取的元素。如需進一步瞭解如何使用 S 語法進一步控制 :nth-child() 選取項目,請參閱這篇文章。
針對 CSS,Chrome 113 包含 overflow-inline
、overflow-block
和 update
媒體功能。也包含在 linear()
緩和函式和未加上前置字串的 image-set()
類型中。
Chrome 113 也包含 WebGPU,這是 WebGL 和 WebGL 2 圖形 API 的後續版本。它具備多項現代功能,例如 GPU 運算、減少 GPU 硬體的負擔、透過單一圖形裝置算繪至多個畫布,以及更優異、可預測的效能。
網路系列新作精選內容