Chrome 65 新功能

Pete LePage

還有更多功能！

我是 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 中。

我是內心的<div>

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

使用開發人員工具檢查 DOM，您會發現外部 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 的新功能！