- CSS Paint API 可讓您以程式輔助方式產生圖片。
- Server Timing API 可讓網路伺服器透過 HTTP 標頭提供效能時間資訊。
- 新的 CSS
display: contents
屬性可讓方塊消失!
還有更多!
我是 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,而非在 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
中。
將 display: contents
新增至外部 div,會使外部 div
消失,且其限制不再套用至內部 div
。內部 div
現在的寬度為 100%。
div
仍存在。這在許多情況下都相當實用,但最常見的用途是 flexbox。使用 Flexbox 時,只有 Flex 容器的直接子項會成為 Flex 項目。
不過,一旦您將 display: contents
套用至子項,其子項就會變成 Flex 項目,並且會使用套用至父項的相同規則進行版面配置。
如需更多詳細資訊和其他範例,請參閱 Rachel Andrew 的優秀文章「Vanishing boxes with display contents」。
還有更多獎品等著您!
當然,這只是 Chrome 65 開發人員版的部分變更,還有更多變更。
- 指定顏色屬性
HSL
和HSLA
,以及RGB
和RGBA
座標的語法現在符合 CSS Color 4 規格。 - 我們推出了新的功能政策,可讓您透過 HTTP 標頭或 iframe
allow
屬性控管同步 XHR。
請務必查看「Chrome 開發人員工具的新功能」,瞭解 Chrome 65 版開發人員工具的新功能。如果您對漸進式網頁應用程式有興趣,歡迎觀看全新的 PWA 巡迴宣傳影片系列。接著,請點選我們的 YouTube 頻道上的「訂閱」按鈕,這樣一來,每當我們發布新影片,你就會收到電子郵件通知。
我是 Pete LePage,Chrome 66 一推出,我就會馬上在這裡告訴你 Chrome 有哪些新功能!