- CSS Paint API 可讓您透過程式輔助方式產生圖片。
- Server Timing API 允許網路伺服器透過 HTTP 標頭提供效能時間資訊。
- 新的 CSS
display: contents
屬性可以使方塊消失!
還有許多功能!
我是 Pete LePage。讓我們深入探索 Chrome 65 為開發人員提供的新功能!
需要完整的變更清單嗎?詳情請參閱 Chromium 原始碼存放區變更清單。
CSS 繪製 API
CSS Paint API 可讓您以程式輔助方式為 background-image
或 border-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
中。
將 display: contents
新增至外層 div 中,會使外部 div
消失,且其限制不再套用至內部 div
。內部 div
現在寬度為 100%。
div
仍然存在。這在很多情況下可能有幫助,但最常見的情況是使用 Flexbox。使用 Flexbox 時,只有彈性容器的立即子項會成為彈性項目。
但是,將 display: contents
套用至子項後,其子項會變為彈性項目,並採用套用至父項所套用的規則。
如需更多詳細資料和其他範例,請參閱 Rachel Andrew 的優質貼文「VanishingBox with display content」。
還有更多獎品等著您!
以上只是 Chrome 65 中專為開發人員設計的其中幾項變更,當然還有許多其他異動。
- 指定
HSL
和HSLA
的語法,以及色彩屬性的RGB
和RGBA
座標,現在會符合 CSS Color 4 規格。 - 我們推出新的功能政策,可讓您透過 HTTP 標頭或 iframe
allow
屬性控制同步 XHR。
請務必查看 Chrome 開發人員工具的新功能,瞭解 Chrome 65 開發人員工具的新功能。如果您對於漸進式網頁應用程式有興趣,歡迎觀看新的 PWA Roadshow 系列影片。接著,在 YouTube 頻道上按一下「訂閱」按鈕,每當我們推出新影片時,您會收到電子郵件通知。
我是 Pete LePage,當 Chrome 66 推出後,我會馬上通知您,也就是 Chrome 的新功能!