Chrome 65 新功能

Pete LePage

還有更多功能！

我是 Pete LePage一起來深入探索 Chrome 65 為開發人員推出的新功能！

需要完整的異動清單嗎？請參閱 Chromium 原始碼存放區變更清單。

CSS Paint API

CSS Paint API 可讓您利用程式輔助方式為 CSS 屬性 (例如 background-image 或 border-image) 產生圖片。

您可以不使用參照圖片，而改用新的繪製函式繪製圖片，就像畫布元素一樣。

<style>
  .myElem { background-image: paint(checkerboard); }
</style>
<script>
  CSS.paintWorklet.addModule('checkerboard.js');
</script>

舉例來說，您可以使用 Paint API，不必新增額外的 DOM 元素，在材質樣式按鈕上建立漣漪效果，

也是瀏覽器尚未支援這種強大的多元填充 CSS 功能方法。

小蘇在釋疑影片中發布了一則精彩的貼文，提供幾個示範。

伺服器時間 API

希望您使用了導覽和資源時間 API，追蹤實際使用者的網站效能。直到現在，伺服器往往無法輕易回報效能時間。

新的 Server Timing API 可讓您的伺服器將時間資訊傳送至瀏覽器，讓您更瞭解整體效能。

您可以在回應中加入 Server-Timing 標頭，數量不限：資料庫讀取時間、啟動時間，或對您而言重要的任何指標：

'Server-Timing': 'su=42;"Start-up",db-read=142;"Database Read"'

這些動作會顯示在 Chrome 開發人員工具中，您也可以從回應標頭提取出來，然後儲存至其他效能分析中。


display: contents

新的 CSS display: contents 屬性相當美觀！

在容器元素中加入元素後，所有子項都會在 DOM 中取得其位置，而且基本上會消失。假設我有兩個 div，另一個包含。我的外部 div 具有紅色邊框和灰色背景，而我已將寬度設為 200 像素。內部 div 具有藍色邊框和淺藍色背景。

.disp-contents-outer {
  border: 2px solid red;
  background-color: #ccc;
  padding: 10px;
  width: 200px;
}
.disp-contents-inner {
  border: 2px solid blue;
  background-color: lightblue;
  padding: 10px;
}

根據預設，內部 div 包含在外部 div 中。

我是內心的 <div>

在外部 div 中新增 display: contents 後，外部 div 會消失，其限制也不再套用至內部 div。內部 div 現在的寬度為 100%。

使用開發人員工具檢查 DOM，您會發現外部 div 仍然存在。

在某些情況下，這或許有幫助，但最常見的方法是使用 Flexbox。使用 Flexbox 時，只有彈性容器的直接子項會成為 Flex 項目。

不過，當您將 display: contents 套用至子項後，其子項就會成為彈性項目，並使用其套用至其父項的規則進行版面配置。

如需更多詳細資訊和其他範例，請參閱 Rachel Andrew 發布的優質貼文「含有多媒體內容的交流盒」。

還有更多獎品等著您！

這些只是 Chrome 65 針對開發人員所做的一些變更，當然還有更多。

  • 指定 HSL 和 HSLA 以及顏色屬性的 RGB 和 RGBA 座標的語法，現在符合 CSS 顏色 4 規格。
  • 新增功能政策，讓您透過 HTTP 標頭或 iframe allow 屬性控制同步 XHR。

請務必查看 Chrome 開發人員工具的新功能，瞭解 Chrome 65 開發人員工具有哪些新功能。如果您對漸進式網頁應用程式有興趣，請觀看新的 PWA Roadshow 影片系列。 接著，按一下 YouTube 頻道上的「訂閱」按鈕，每當我們推出新影片時，您都會收到電子郵件通知。

我是 Pete LePage，每當 Chrome 66 推出時，我就會立即 向大家說明 Chrome 的新功能！