- 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。
也是未受支援,且不支援多元填充 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 時,只有 Flex 容器的立即子項 變為彈性物品
但是,將 display: contents
套用至子項後,子項就會成為彈性物件
並運用原本可能套用的規則
由家長管理。
看看 Rachel Andrew 發布的優質貼文 展示內容的精美禮盒 。
還有更多獎品等著您!
這些只是 Chrome 65 針對開發人員的一些變更 但其實還有很多
- 指定
HSL
和HSLA
,以及RGB
和RGBA
座標的語法 目前的色彩屬性 符合 CSS 顏色 4 規格。 - 我們制定了新的功能政策,將
您可以透過 HTTP 標頭或
iframe
allow
屬性。
請務必觀看 Chrome 開發人員工具的新功能 ,瞭解開發人員工具中的 Chrome 65 版新功能。如果你有興趣瞭解 漸進式網頁應用程式,快來看看 PWA 說明影片系列影片。 接著,按一下 YouTube 頁面上的「訂閱」按鈕 YouTube 頻道,和 每次推出新影片時,你都會收到電子郵件通知。
我是 Pete LePage。Chrome 66 推出後,我馬上就會 來看看 Chrome 的新功能!