Chrome 最近帶來了哪些有意思的新東西？

Chrome 107：識別渲染阻塞資源
對頁面性能的可靠洞察對于我們構(gòu)建好的用戶體驗是至關(guān)重要的，在以前，我們通常會依靠一些復(fù)雜的啟發(fā)式方法來確定資源是否阻塞頁面的渲染。

在 Chrome 107 ，Performance API 新增了一個 renderBlockingStatus 屬性，這個屬性會提供來自瀏覽器的直接信號，用于識別阻塞頁面渲染的資源，直到它們被下載下來。

下面的代碼片段顯示了如何獲取所有資源的列表并使用新的 renderBlockingStatus 屬性列出所有阻塞頁面渲染的資源。

// 獲取所有資源
const res = window.performance.getEntriesByType('resource');

// 過濾出阻塞渲染的資源
const blocking =   res.filter(({renderBlockingStatus}) =>
      renderBlockingStatus === 'blocking');

優(yōu)化這些阻塞資源的加載方式（改為異步加載或增加一些預(yù)渲染優(yōu)化）對于我們網(wǎng)站的 Core Web Vitals 是非常有幫助的，大家可以用起來了～

Chrome 106：Pop-up API
在 Chrome 106，新增了對彈出式 API 的支持，HTML 元素新增了一個 popup 屬性，它可以自動將元素帶到站點的頂層，并提供簡單的控件來切換是否可見。而開發(fā)者則不需要擔(dān)心定位、堆疊元素、焦點或鍵盤交互等等，另外我們可以完全控制彈出層的樣式、位置和大小，還可以靈活地修改默認(rèn)行為。只使用 CSS 和 HTML，不需要 JavaScript 就可以實現(xiàn)一個簡單的彈出式交互了：

<div id="my-pop-up" popup>
  Hi ConardLi !
</div>
<button  popuptoggletarget="my-pop-up">
  Toggle Pop-up button
</button>
默認(rèn)情況下，用戶可以使用 ESC 鍵或單擊其他元素等手勢關(guān)閉這個彈出窗口。

了解更多：https://developer.chrome.com/blog/pop-ups-theyre-making-a-resurgence/

Chrome 106：新的 CSS 單位 ic
在 Chrome 106，新增了一個新的 CSS 單位 ic，它是一個設(shè)計用來調(diào)整文本大小的單位，可以根據(jù)字符的寬度或高度來測量長度。


比如我們設(shè)置了一個容器的 max-width 為 8ic，那么無論字體大小如何，這個容器將最多包含 8個全角字形。

.container {
  border: solid 3px navy;
  max-width: 8ic; /* ic length unit out in chrome 106*/
  margin-bottom: 25px;
  margin-left: 15px;
 
}

.small{
 
 margin-top:25px;
 font-size: 20px;
}

.medium{
  font-size: 42px;
}

.large{
  font-size: 76px;
}
Chrome 105：容器查詢和:has()屬性
Chrome 105 新增了容器查詢和 :has() 屬性，這兄弟倆可以讓我們能夠查詢父選擇器的大小和樣式信息，同時使子元素可以擁有響應(yīng)式樣式邏輯。有點類似 @media 查詢，區(qū)別是它們根據(jù)的是容器的大小而不是視口的大小進行判斷的。


要使用容器查詢，我們可以在卡片容器上設(shè)置 container-type 為 inline-size：

.ard-container {
  container-type: inline-size;
}
然后我們就可以使用 @container 將該容器的樣式應(yīng)用到它的任何子節(jié)點：

.card {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

@container (max-width: 400px) {
  .card {
    grid-template-columns: 1fr;
  }
}
當(dāng)容器小于 400px 時，它就會切換到單列布局。

我們可以使用 :has() 偽類更進一步，它可以讓我們檢查父元素是否包含具有特定參數(shù)的子元素。例如，p:has(span) 表示一個段落選擇器，你可以使用它來設(shè)置父段落本身或其中的任何內(nèi)容的樣式。

p:has(span) {
  /* magic styles */
}

figure:has(figcaption) {
  /* this figure has a figcaption */
}
了解更多：https://developer.chrome.com/blog/has-with-cq-m105/

Chrome 105：Sanitizer API
在我之前的文章中有介紹過 Sanitizer API 提案：

告別 XSS！新的 W3C 提案助你安全操作 DOM

在 105 版本中，Chrome 對它提供了支持。Sanitizer API 可以讓我們將任意字符串安全地插入到頁面中。如果要動態(tài)渲染一段富文本，我們可以創(chuàng)建一個新的 Sanitizer 實例。然后，調(diào)用 setHTML() 方法插入經(jīng)過 XSS 清理的內(nèi)容：

const mySanitizer = new Sanitizer();
const user_input = `<img src="" onerror=alert(0)>`;
elem.setHTML(user_input, { sanitizer: mySanitizer });

const config = {
  allowElements: [],
  blockElements: [],
  dropElements: [],
  allowAttributes: {},
  dropAttributes: {},
  allowCustomElements: true,
  allowComments: true
};
// sanitized result is customized by configuration
const mySanitizer = new Sanitizer(config);
更詳細(xì)的介紹可以查看我上面的文章～

一些棄用
Chrome 107
棄用對 HTTP Expect-CT Header 的支持
Chrome 106
棄用 HTTP/2 Server Push 能力
Chorme 105：
棄用非安全上下文（未開啟https的站點）的 Web SQL；
棄用 Cookie domain 屬性中的非 ASCII 字符；
棄用 Navigation API 中的 transitionWhile 和 restoreScroll 方法；
最后
參考鏈接：

https://chromestatus.com/features#milestone%3D107
https://chromestatus.com/features#milestone%3D106
https://chromestatus.com/features#milestone%3D105




作者：ConardLi


歡迎關(guān)注微信公眾號 ：前端快快跑