Chrome 90 版的新功能

Pete LePage

以下是一些注意事項：

• CSS overflow 屬性有新值。
• Feature Policy API 已重新命名為 Permissions Policy。
• 而且，現在有新的方式可直接在 HTML 中實作及使用 Shadow DOM。
• 我在 1990 年代擁有幾件幾乎和這個一樣的夾克。
• 還有更多功能。

我是 Pete LePage，我將為 Chrome 90 的開發人員提供 411 資訊，以 1990 年代的風格來做吧！

使用 overflow: clip 防止溢位

CSS 就是這麼簡單！不過，我認為每位網頁開發人員都曾經歷過某個尷尬的溢位情況。CSS 秘訣提供了關於各種處理溢位方式的實用文章，例如使用 overflow: hidden 或 auto。

在 CSS 溢位規格中，有一個新的 clip 屬性，其運作方式與 hidden 類似。

.overflow-clip {
  overflow: clip;
}

使用 overflow: clip 可讓您禁止方塊的任何捲動方式，包括程式輔助捲動。也就是說，系統不會將方塊視為捲動容器，也不會啟動新的格式設定內容。如有需要，您可以透過 overflow-x 和 overflow-y 將裁剪套用至單一軸。

另外，overflow-clip-margin 可讓您擴大剪輯邊框。在需要顯示墨水溢位內容的情況下，這項功能就很實用。

.overflow-clip {
  overflow: clip;
  overflow-clip-margin: 25px;
}

如要查看 overflow: clip 的實際運作情形，請前往 https://petele-css-is-awesome.glitch.me/

功能政策現已改為權限政策

在 Chrome 74 中，我們推出了 Feature Policy API，可讓您選擇性地啟用、停用及修改瀏覽器中特定 API 和網路功能的行為。這些政策是您與瀏覽器之間的合約。可讓瀏覽器瞭解您的意圖。

如果您的程式碼或任何您使用的第三方程式庫違反預先選取的規則，瀏覽器會以更好的使用者體驗覆寫行為，或單純說「跟一聲說話」，完全封鎖 API。

從 Chrome 90 版開始，Feature Policy API 將重新命名為權限政策，HTTP 標頭也會隨著重新命名。同時，社群已經根據 HTTP 的結構化欄位值，決定新的語法。

Permissions-Policy: geolocation=()

Feature-Policy: geolocation 'none'

如想瞭解如何在網站上使用這項功能，請參閱「功能政策」簡介。

宣告式 Shadow DOM

Shadow DOM 是 Web 元件標準的一部分，可將 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>

在這個 DOM 樹狀結構中載入純 HTML 標記結果：

<host-element>
  #shadow-root (open)
  <slot>
    ↳
    <h2>Light content</h2>
  </slot>
</host-element>

這樣一來，我們就能在靜態 HTML 中享有 Shadow DOM 的封裝和 Slot 投影功能。您不需要使用 JavaScript 即可產生整個樹狀結構，包括陰影根目錄。

詳情請參閱 web.dev 上的「宣告式 Shadow DOM」。

其他

當然，還有更多功能。

為協助提升隱私權，並讓使用者在造訪支援 HTTPS 的網站時享有更快的載入速度，Chrome 的網址列預設會使用 https://。如果您尚未設定從 HTTP 到 HTTPS 的自動重新導向，現在就是最佳時機。

我們也將在 Chrome 桌上型電腦中提供 AV1 編碼器，這項工具經過特別最佳化，可與 WebRTC 整合，用於視訊會議。

延伸閱讀

這份文件僅涵蓋部分重點。如要瞭解 Chrome 90 版的其他異動，請點選下方連結。

• Chrome 開發人員工具 (90) 的新功能
• Chrome 90 淘汰與移除項目
• Chrome 90 的 ChromeStatus.com 更新
• Chrome 90 中的 JavaScript 新功能
• Chromium 來源存放區變更清單

訂閱

如要隨時掌握最新影片，請訂閱 Chrome 開發人員 YouTube 頻道，這樣一來，我們發布新影片時，你就會收到電子郵件通知。

我是 Pete LePage，當 Chrome 91 推出後，我會在這裡告訴大家 Chrome 的新功能！

特別致謝

我拍攝過許多有趣的 1990 年代「全新 Chrome 版」主題劇集。非常感謝 Sean Meehan 提供這個想法，並集結了許多優秀的人員，協助我們開啟時光隧道，回到 1990 年代。

當然，還有 Loren Borja、Lee Carruthers 和 Lukas Holcek，他們製作了所有「Chrome 新功能」影片，讓我看起來比實際上更厲害。謝謝你們！