瞭解 2022 年 5 月推出的穩定版和 Beta 版網頁瀏覽器中,有哪些有趣的功能。
穩定版瀏覽器
自 5 月起,Safari 15.5、Firefox 100 和 Firefox 101 已穩定執行。
Chrome 102 和 Safari 15.5 包含 inert
屬性。這會從分頁順序和無障礙樹狀結構中移除非互動式元素。例如目前不在螢幕上或隱藏的元素。
Chrome 102 為 HTML hidden
屬性新增了 until-found
值。這可讓您在頁面內的摺疊區域內的文字上使用「在頁面中尋找」功能,並捲動至文字片段,例如在 Accordion 模式中。詳情請參閱「透過 hidden=until-found」方式存取收合的內容一文。
Chrome 102 推出了 Navigation API,這是一種 API,可將單頁應用程式中的用戶端路由標準化。這個 API 舊稱為 App History API。
Firefox 101 支援可建構的樣式表。支援範圍包括 CSSStyleSheet()
建構函式、replace()
和 replaceSync()
方法。可建構的樣式表可讓您輕鬆建立用於 Shadow DOM 的樣式表。在以下範例中,我們使用 CSSStyleSheet()
建構函式建立樣式表,並透過 replaceSync()
方法新增 CSS 規則,然後將產生的規則列印到主控台。
const stylesheet = new CSSStyleSheet();
stylesheet.replaceSync('body { color: red; }');
console.log(stylesheet.rules[0].cssText);
Firefox 101 也提供 prefers-contrast
媒體功能,讓這項功能可跨瀏覽器使用。
Beta 版瀏覽器版本
瀏覽器 Beta 版可讓您預覽瀏覽器下一個穩定版的內容。因此,現在當全球版本發布之前,建議你多多測試新功能或移除現有功能,進而對網站造成影響。
4 月推出的新版 Beta 版為 Chrome 103 和 Firefox 102。
Firefox 102 包含 update
媒體功能。這項屬性可用於查詢輸出裝置在算繪後是否可以修改內容的外觀。可接受下列值:
none
- 算繪後的內容就無法更新。例如已列印的文件。
slow
- 裝置可以更新內容,但速度太慢,無法顯示流暢的動畫。例如電子墨水螢幕。
fast
- 內容可動態變更,而且足以顯示動畫。例如電腦或手機螢幕。
Chrome 103 包含 Local Font Access API,可用於存取使用者本機安裝的字型。
這些 Beta 版功能即將在穩定版瀏覽器中推出。
編輯:這篇文章的舊版提到 Element.isVisible()
方法,但這個方法並未在本版本中推出。