本頁面由 Cloud Translation API 翻譯而成。

網路平台新手將於 8 月推出

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

Rachel Andrew

穩定版瀏覽器

8 月，Firefox 104、Chrome 104 和 Chrome 105 都已推出穩定版。

Chrome 104 包含 CSS 轉換的個別屬性。這些屬性分別是 scale、rotate 和 translate，可用於個別定義轉換作業的各個部分。

這樣一來，Chrome 就會加入 Firefox 和 Safari 的行列，這兩款瀏覽器已支援這些屬性。

瀏覽器支援

Chrome 104 也包含媒體查詢範圍語法。Firefox 已提供這項功能，可協助簡化媒體查詢。例如下列媒體查詢：

@media (min-width: 400px) {
  // Styles for viewports with a width of 400 pixels or greater.
}

可使用比較運算子編寫：

@media (width >= 400px) {
  // Styles for viewports with a width of 400 pixels or greater.
}

瀏覽器支援

Chrome 105 是令人期待的新版本，在網路平台中引入了眾所期待的容器查詢功能。媒體查詢可讓您查詢可視區域的大小，而容器查詢也提供用來查詢容器大小的方法。

瀏覽器支援

如要使用容器查詢，請使用 container-type 屬性啟用容器。

.card-container {
  container-type: inline-size;
}

將 container-type 設為 inline-size，即可查詢父項的內嵌方向大小。在英文等拉丁語言中，這會是資訊卡的寬度，因為文字會從左至右內嵌流動。

我們現在可以使用該容器，透過 @container 將樣式套用至任何子項：

.card {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

@container (max-width: 400px) {
  .card {
    grid-template-columns: 1fr;
  }
}

上述文章也提到 :has()。這個新的 CSS :has() 擬類別可讓您根據條件指定父項元素和同層級元素。如需更多資訊，請參閱 :has() 家庭選取器。

瀏覽器支援

Chrome 105 也提供 Sanitizer API。這個 API 會在平台中建構清理作業，以協助移除跨網站指令碼攻擊安全漏洞。

Chrome 105 也推出了 :modal CSS 擬造類別。這會比對處於某種狀態的元素，該狀態會排除與外部元素的所有互動。例如，使用 showModal() API 開啟的 <dialog>。

瀏覽器支援

Firefox 104 在標記後方新增了 Array.prototype.findLast()、Array.prototype.findLastIndex()、TypedArray.prototype.findLast() 和 TypedArray.prototype.findLastIndex() 方法的支援功能。這些方法可用來在 Array 或 TypedArray 中尋找與提供的測試函式相符的最後一個元素的值和索引 (分別為)。

瀏覽器支援

Beta 版瀏覽器可讓您預覽下一個穩定版本的功能。在正式發布前，您可以測試可能會影響網站的新功能或移除項目。

由於發布日期剛好在本月結束後，8 月唯一的新 Beta 版是 Firefox 105，目前尚未提供詳細資訊。

我們也持續開發 6 月提及的 Safari 16 Beta 版。