Chrome 65 新功能

還有許多功能

我是 Pete LePage。讓我們深入探索 Chrome 65 為開發人員提供的新功能!

需要完整的變更清單嗎?詳情請參閱 Chromium 原始碼存放區變更清單

CSS 繪製 API

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

您可以使用新的繪圖功能繪製圖片,不必參照圖片,就和畫布元素一樣。

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

例如,與其新增額外的 DOM 元素來為質感設計樣式的按鈕建立漣漪效果,您不必使用 paint API。

也是瀏覽器尚未支援的 CSS 功能,也是用於 polyfill 的 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>

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

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

這在很多情況下可能有幫助,但最常見的情況是使用 Flexbox。使用 Flexbox 時,只有彈性容器的立即子項會成為彈性項目。

但是,將 display: contents 套用至子項後,其子項會變為彈性項目,並採用套用至父項所套用的規則。

如需更多詳細資料和其他範例,請參閱 Rachel Andrew 的優質貼文「VanishingBox with display content」。

還有更多獎品等著您!

以上只是 Chrome 65 中專為開發人員設計的其中幾項變更,當然還有許多其他異動。

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

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

我是 Pete LePage,當 Chrome 66 推出後,我會馬上通知您,也就是 Chrome 的新功能!