以下是一些注意事項:
- CSS
overflow
屬性已支援新的值。 - Feature Policy API 已重新命名為權限政策。
- 另外,現在還有一種直接在 HTML 中導入及使用 Shadow DOM 的新方法。
- 我擁有幾台和 1990 年代的外套幾乎完全相同。
- 還有許多其他功能。
我是 Pete LePage,我幫開發人員設計了 Chrome 90 的 411,沒錯,就是 1990 年的風格!
避免使用 overflow: clip
發生溢位
CSS 就是這麼簡單,還有一袋晶片!但我認為,所有網頁程式開發人員
都有可能遇到過失真的問題歡迎參閱 CSS 秘訣,瞭解其他處理溢位的方式,例如使用 overflow: hidden
或 auto
。
在 CSS Overflow Spec 中,有一個與 hidden
類似的新 clip
屬性。
.overflow-clip { overflow: clip; }
透過 overflow: clip
,您可以防止任何類型的捲動方塊進行捲動,包括透過程式輔助捲動。這表示該方塊不會視為捲動容器,不會啟動新的格式設定內容。如有需要,您可以透過 overflow-x
和 overflow-y
將剪輯套用至單一軸。
對了,還有參考資訊 - 此外,還有 overflow-clip-margin
可讓您擴大裁剪邊框。當應有墨水溢位時,這就非常實用。
.overflow-clip { overflow: clip; overflow-clip-margin: 25px; }
歡迎前往 https://petele-css-is-awesome.glitch.me/ 瞭解「overflow: clip
」的實際運作情形
功能政策現已改為權限政策
我們在 Chrome 74 版時發布了 Feature Policy API,可讓您選擇性地啟用、停用及修改瀏覽器中特定 API 和網路功能的行為。這些政策是您與瀏覽器之間的合約讓瀏覽器瞭解您的目的。
如果您的程式碼或您使用的任何第三方程式庫違反預選規則,瀏覽器會以更好的使用者體驗覆寫該行為,或是直接說「跟手說話」並完全封鎖 API。
從 Chrome 90 版開始,Feature Policy API 會重新命名為 權限政策,且 HTTP 標頭也一併重新命名。同時,社群則是根據 HTTP 的結構化欄位值制定新的語法。
Chrome 90 以上版本
Permissions-Policy: geolocation=()
Chrome 89 以下版本
Feature-Policy: geolocation 'none'
如果您想瞭解如何在網站上使用此功能,請參閱功能政策簡介。
宣告式陰影 DOM
「Shadow DOM」是網頁元件標準的一部分,可用來將 CSS 樣式限定在特定 DOM 子樹狀結構,並將該子樹狀結構與文件的其他部分隔離。目前為止,使用 Shadow DOM 的唯一方法是使用 JavaScript 建構陰影根目錄。
const host = document.getElementById('host');
const opts = {mode: 'open'};
const shadowRoot = host.attachShadow(opts);
const html = '<h1>Hello Shadow DOM</h1>';
shadowRoot.innerHTML = html;
這對於用戶端轉譯沒有問題,但對於在伺服器產生的 HTML 中,未提供任何呈現陰影根建構方式的內建功能,在伺服器端轉譯的表現不理想。不過,從 Chrome 90 版開始,使用宣告式 Shadow DOM 就大功告成了。您只能使用 HTML 建立陰影根。
宣告式陰影根是具有 shadowroot
屬性的 <template>
元素。它是由 HTML 剖析器偵測到,並會立即套用為其父項元素的陰影根。
<host-element>
<template shadowroot="open">
<slot></slot>
</template>
<h2>Light content</h2>
</host-element>
載入純 HTML 標記會產生以下 DOM 樹狀結構:
<host-element>
#shadow-root (open)
<slot>
↳
<h2>Light content</h2>
</slot>
</host-element>
因此,在靜態 HTML 中, Shadow DOM 的封裝和版位投影可提供許多好處。不需要 JavaScript 就能產生整個樹狀結構,包括陰影根。
詳情請參閱 web.dev 上的宣告式 Shadow DOM。
其他更新
當然還有許多其他東西。
Chrome 的網址列預設會使用 https://
,協助進一步保護隱私權,甚至為造訪支援 HTTPS 網站的使用者載入速度。如果您還沒有設定從 HTTP 自動重新導向至 HTTPS,現在就是最佳時機。
此外,AV1 編碼器是 Chrome 電腦版的傳輸功能,經過特別最佳化,適合搭配 WebRTC 整合作業的視訊會議使用。
其他資訊
這僅涵蓋部分重點功能。如要瞭解 Chrome 90 版的其他變更,請點選下方連結。
- Chrome 開發人員工具新功能 (90)
- Chrome 90 淘汰和移除內容
- 適用於 Chrome 90 的 ChromeStatus.com 更新
- Chrome 90 版 JavaScript 新功能
- Chromium 原始碼存放區變更清單
訂閱
如要隨時掌握 YouTube 影片的最新消息,然後訂閱我們的 Chrome Developers YouTube 頻道,每當推出新影片時,您都會收到電子郵件通知。
我是 Pete LePage。Chrome 91 推出後,我很樂意立即為您說明 Chrome 的新功能!
特別推薦
在拍攝 1990 年代主題的 Chrome 主題劇集時,我有很多樂趣。非常感謝 Sean Meehan 提出的想法,並感謝眾人一同帶領時間戰火迎接 1990 年。
GDS 設計
- 法拉阿基諾拉
- 德里巴斯
- 布德爾 (Christopher Bodel)
- 尼克.克魯斯克 (Nick Krusick)
- Chris Walker
音效設計和其他音樂
- 布萊恩高登
當然,Loren Borja、Lee Carruthers 和 Lukas Holcek 擅長處理我的所有 Chrome 新功能影片 讓我看起來比我更出色。謝謝! 謝謝!