Chrome 90 版的新功能

Pete LePage

以下是一些注意事項：

  • CSS overflow 屬性已支援新的值。
  • Feature Policy API 已重新命名為權限政策。
  • 另外，現在還有一種直接在 HTML 中導入及使用 Shadow DOM 的新方法。
  • 我擁有幾台和 1990 年代的外套幾乎完全相同。
  • 還有許多其他功能。

我是 Pete LePage，我幫開發人員設計了 Chrome 90 的 411，沒錯，就是 1990 年的風格！

避免使用 overflow: clip 發生溢位

CSS 是我們的

CSS 就是這麼簡單，還有一袋晶片！但我認為，所有網頁程式開發人員 都有可能遇到過失真的問題歡迎參閱 CSS 秘訣，瞭解其他處理溢位的方式，例如使用 overflow: hidden 或 auto。

在 CSS Overflow Spec 中，有一個與 hidden 類似的新 clip 屬性。

.overflow-clip {
  overflow: clip;
}
帶有文字 CSS 的正方形方塊效果不錯，效果超乎想像

透過 overflow: clip，您可以防止任何類型的捲動方塊進行捲動，包括透過程式輔助捲動。這表示該方塊不會視為捲動容器，不會啟動新的格式設定內容。如有需要，您可以透過 overflow-x 和 overflow-y 將剪輯套用至單一軸。

對了，還有參考資訊 - 此外，還有 overflow-clip-margin 可讓您擴大裁剪邊框。當應有墨水溢位時，這就非常實用。

.overflow-clip {
  overflow: clip;
  overflow-clip-margin: 25px;
}
帶有文字 CSS 的正方形方塊效果不錯，效果超乎想像

歡迎前往 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 版的其他變更，請點選下方連結。

訂閱

如要隨時掌握 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 新功能影片 讓我看起來比我更出色。謝謝！ 謝謝！