4 月首次使用網路平台

瞭解 2023 年 4 月推出的穩定版和 Beta 版網頁瀏覽器中,有哪些有趣的功能。

2023 年 4 月,Firefox 112Chrome 112 穩定版推出。讓我們來看看這對網頁平台有何影響。

Firefox 112 包含 inert 全域屬性。這個屬性會指示瀏覽器忽略元素,表示內容不應具互動性。其中包括:

  • 避免觸發 click 事件。
  • 防止元素獲得焦點。
  • 將元素及其內容從無障礙樹狀結構中排除。

這項屬性現在可在所有三個引擎中互通。

瀏覽器支援

  • Chrome:102。
  • Edge:102。
  • Firefox:112。
  • Safari:15.5。

資料來源

linear() 緩和函式

linear() 緩和函式可在多個點之間啟用線性插補。這可讓您製作更複雜的動畫,例如彈跳和彈力效果。這個函式位於 Firefox 112 中。

瀏覽器支援

  • Chrome:113。
  • Edge:113。
  • Firefox:112。
  • Safari:17.2。

CSS 巢狀結構

Chrome 112 新增了對 CSS 巢狀結構的支援,這是許多開發人員期待已久的功能。這項功能會引入新的巢狀選取器 >,用於巢狀相關樣式規則,讓使用過前置處理器的開發人員感到熟悉:

.nesting {
  color: hotpink;

  > .is {
    color: rebeccapurple;

    > .awesome {
      color: deeppink;
    }
  }
}

瀏覽器支援

  • Chrome:120。
  • Edge:120。
  • Firefox:117。
  • Safari:17.2。

資料來源

CSS animation-composition

Chrome 112 也支援 animation-composition。如要瞭解這個屬性如何運作,請參閱「指定多個動畫效果應如何與動畫組合」。

瀏覽器支援

  • Chrome:112。
  • Edge:112。
  • Firefox:115。
  • Safari:16 歲。

資料來源

全新無頭模式

如果您使用 Chrome 的無頭模式 (例如搭配 Puppeteer),112 會提供全新的無頭模式。如要瞭解這項功能,請參閱「Chrome 的無頭模式升級」。

Beta 版瀏覽器

瀏覽器 Beta 版可讓您預覽瀏覽器下一個穩定版的內容。在正式發布前,您可以測試可能會影響網站的新功能或移除項目。新的 Beta 版為 Firefox 113Chrome 113Safari 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-inlineoverflow-blockupdate 媒體功能。也包含在 linear() 緩和函式和未加上前置字串的 image-set() 類型中。

Chrome 113 也包含 WebGPU,這是 WebGL 和 WebGL 2 網頁圖形 API 的後繼者。它提供多項新功能,例如 GPU 運算、降低 GPU 硬體存取額外負擔、從單一圖形裝置算繪多個畫布,以及更佳、更可預測的效能。

新手上路:網路系列課程