瞭解 2022 年 8 月推出的穩定版和 Beta 版網頁瀏覽器中,有哪些有趣的功能。
穩定版瀏覽器
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;
}
}
如要進一步瞭解容器查詢,請參閱「@container 和 :has(): 兩項強大的新型響應式 API,已在 Chromium 105 推出」一文。
:has() 父項虛擬類別
上述文章也提到 :has()
。這個全新的 CSS :has() 擬類別可讓您根據條件指定父項元素和同層級元素。如需更多資訊,請參閱 :has() 家庭選取器。
Sanitizer API
Chrome 105 也提供 Sanitizer API。這個 API 會在平台中建構清理機制,協助移除跨網站指令碼攻擊的安全漏洞。
Chrome 105 也推出了 :modal CSS 擬造類別。這會比對處於某種狀態的元素,該狀態會排除與外部元素的所有互動。例如,使用 showModal()
API 開啟的 <dialog>
。
findLast() 和 findLastIndex() 方法
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 版。