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

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

探索 2022 年 8 月穩定版和 Beta 版網路瀏覽器提供的一些有趣功能。

Rachel Andrew

穩定版瀏覽器

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>。

瀏覽器支援

瀏覽器支援

「Beta 版瀏覽器」可讓您預覽瀏覽器下一個穩定版本即將推出的功能。敬請把握這個大好機會，測試及移除哪些功能，以免影響網站在全球發布前受到影響。

由於發布日期僅落在當月之外，因此 8 月唯一新推出的 Beta 版是 Firefox 105，詳情請參閱下文。