Chrome 65 新功能

還有更多

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

如需完整的變更清單,請查看 Chromium 原始碼存放區變更清單

CSS Paint API

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

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

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

舉例來說,您可以使用 Paint API,而非在 Material 樣式的按鈕上建立波紋效果,以便新增額外的 DOM 元素。

這也是用於填補瀏覽器尚不支援的 CSS 功能的強大方法。

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

Server Timing 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>

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

使用開發人員工具檢查 DOM,並注意外部 div 仍存在。

這在許多情況下都相當實用,但最常見的用途是 flexbox。使用 Flexbox 時,只有 Flex 容器的直接子項會成為 Flex 項目。

不過,一旦您將 display: contents 套用至子項,其子項就會變成 Flex 項目,並且會使用套用至父項的相同規則進行版面配置。

如需更多詳細資訊和其他範例,請參閱 Rachel Andrew 的優秀文章「Vanishing boxes with display contents」。

還有更多獎品等著您!

當然,這只是 Chrome 65 開發人員版的部分變更,還有更多變更。

  • 指定顏色屬性 HSLHSLA,以及 RGBRGBA 座標的語法現在符合 CSS Color 4 規格
  • 我們推出了新的功能政策,可讓您透過 HTTP 標頭或 iframe allow 屬性控管同步 XHR。

請務必查看「Chrome 開發人員工具的新功能」,瞭解 Chrome 65 版開發人員工具的新功能。如果您對漸進式網頁應用程式有興趣,歡迎觀看全新的 PWA 巡迴宣傳影片系列。接著,請點選我們的 YouTube 頻道上的「訂閱」按鈕,這樣一來,每當我們發布新影片,你就會收到電子郵件通知。

我是 Pete LePage,Chrome 66 一推出,我就會馬上在這裡告訴你 Chrome 有哪些新功能!