4 月首次使用網路平台

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

Rachel Andrew

穩定版瀏覽器

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

inert 屬性

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 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 硬體存取額外負擔、從單一圖形裝置算繪多個畫布，以及更佳、更可預測的效能。

新手上路：網路系列課程