大家好，很高興又見面了，我是"進階前端‬進階‬"，由我帶着大家一起關注前端前沿、深入前端底層技術，大家一起進步，也歡迎大家關注、點贊、收藏、轉發!

1.Canary、Dev、Beta、正式版區分

除去開源的 Chromium，Chrome 一共有Canary、Dev、Beta 以及正式版 Stable。雖然 Chrome 這幾個版本名稱各不相同，但都沿用了相同的版本号，隻是更新早晚的差別。

Chrome Canary

Chrome Canary 是更新速度最快的 Chrome 版本，幾乎每天更新。相當于支援自動更新、同時添加谷歌自家服務、商業閉源插件的 Chromium，功能更加強大。

Canary是功能、代碼最先進的 Chrome 版本，但是因為測試不全面，極不穩定。谷歌将其設定為可獨立安裝、與其他版本共存，是以适合進階使用者安裝備用，嘗鮮最新功能。

Chrome Dev

Chrome Dev 最初是以 Chromium 為基礎、更新最快的 Chrome，後來則被 Canary 取代。Dev 版每周更新一次，雖然不太穩定，但可勉強滿足日常使用，适合 Web 開發者用來測試新功能和網頁。

Chrome Beta

Chrome Beta 以 Dev 為基礎，每月更新一次。它是正式釋出前的最後測試版本，所有功能都已在前面幾個版本中得到測試、修改，已經十分穩定，普通使用者也可日常使用。

Chrome Stable

Chrome Stable 就是正式版，它以 Beta 為基礎，幾個月更新一次。由于所有的功能都已經過數個月反複測試，是穩定性最高的 Chrome 版本。

2.Chrome 111 Beta釋出

Chrome 111 Beta支援新的 CSS 顔色類型和顔色空間、CSS 三角函數和 View Transitions API。 Chrome 111 于 2023 年 2 月 9 日開始測試。可以在桌面版 Google.com 或 Android 版 Google Play 商店中下載下傳最新版本。

2.1 支援新的 CSS 顔色類型和空間

CSS Color Level 4 中描述的所有功能現已啟用。包括四種與裝置無關的顔色類型（lab、Oklab、lch 和 Oklch）、color() 函數以及用于漸變和動畫的使用者定義顔色空間。

color-mix() 函數

CSS Color 5 的 color-mix() 函數已支援。此功能可以在任何支援的色彩空間中将一定百分比的一種顔色混合到另一種顔色中。以下示例将 10% 的藍色混合到 SRGB 中的白色中。

.item {
  background-color: color-mix(in srgb, blue 10%, white);
}

CSS 選擇器 4 僞類 :nth-child(an + b of S)

擴充 :nth-child(an + b) 和 :nth-last-child() 選擇器。例如，:nth-child(3 of .c) 是給定父級下的第三個 .c。

:nth-child(2): 選中第二個子元素
:nth-child(2n): 選中偶數子元素 (2nd, 4th, 6th, 8th, and so on).
:nth-child(2n+1): 選中奇數子元素 (1st, 3rd, 5th, 7th, and so on).
:nth-child(5n+1): 選中1st (=(5×0)+1), 5th (=(5×1)+1), 10th (=(5×2)+1), … child.
:nth-child(5n+2): 選中 2nd (=(5×0)+2), 6th (=(5×1)+2), 11th (=(5×2)+2), … child.

CSS 根字型機關

将根字型機關：ex、ch、ic 和 lh 添加到 rem 的現有根字型機關。

CSS 三角函數

三角函數 sin()、cos()、tan()、asin()、acos()、atan()、atan2() 已添加到 CSS 數學表達式中。

selector {
  property: functional-notation( [argument]? [, argument]! );
}

文法以函數符号的名稱開頭，後跟左括号（接下來是符号參數，函數以右括号結束）。

函數可以接受多個參數，其格式類似于 CSS 屬性值。空格是允許的，但它們在括号内是可選的。在一些函數符号中，多個參數用逗号分隔，而其他的則使用空格。

/* Single <number> values */
transform: rotate(asin(-0.2));
transform: rotate(asin(2 * 0.125));
/* Other values */
transform: rotate(asin(pi / 5));
transform: rotate(asin(e / 3));

CSS 自定義屬性的樣式容器查詢

将 style() 函數添加到 @container 規則，以便可以根據祖先元素的自定義屬性的計算值應用樣式。

main {
  container: inline-size / name;
}
@container name (max-width: 800px) {
  span {
    color: gray;
  }
}

baseline-source 屬性

允許 web 開發人員指定行内級框是否應使用第一個或最後一個基線在行框内進行對齊。目前該屬性也就chrome自己支援。

2.2 Web APIs新增

視窗管理權限和權限政策字元串

Chrome 111 添加了視窗管理作為視窗放置權限和權限政策字元串的别名。這是通過最終棄用和删除視窗放置來重命名字元串的更大努力的一部分。随着 Window Management API 随的發展，術語更改提高了描述符的壽命。

Media Session API

示範幻燈片操作，将上一張幻燈片previousslide和下一張幻燈片nextslide操作添加到現有的媒體會話 API。

Resizable ArrayBuffer 和growable SharedArrayBuffer

擴充 ArrayBuffer 構造函數以擷取額外的最大長度，進而允許增長和縮小緩沖區。類似地，SharedArrayBuffer 被擴充為采用允許就地增長的額外最大長度。

referrer policy key

擴充了推測規則文法，允許開發人員指定引用政策以用于推測規則觸發的推測請求。這也重新引入了“足夠嚴格的推薦人政策（sufficiently-strict referrer policy）”要求。

Streaming declarative shadow DOM

通過在開始而不是結束的模闆标簽上附加影子根來增加對流的支援。

const shadowOpen = elementRef.attachShadow({ mode: "open" });
const shadowClosed = elementRef.attachShadow({ mode: "closed" });

View Transitions API

通過快照視圖并允許 DOM 更改而狀态之間沒有任何重疊，可以在單頁應用程式 (SPA) 中建立完美的過渡。使用視圖過渡來建構自定義過渡，或使用簡單的淡入淡出預設值來改善使用者體驗。

function spaNavigate(data) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    updateTheDOMSomehow(data);
    return;
  }
  // With a transition:
  document.startViewTransition(() => updateTheDOMSomehow(data));
}

WebRTC 可擴充視訊編碼

此擴充定義了一種标準方法，用于在傳出的 WebRTC 視訊軌道上選擇可能的可伸縮視訊編碼 (SVC) 配置。

WebXR enabledFeatures 屬性

傳回由 XRSessionInit 指定的為此 XRSession 啟用的功能集以及給定模式和功能的規範所需的隐含功能。

參考資料

https://developer.chrome.com/blog/chrome-111-beta/

https://www.lizhi.io/blog/39871584

Chrome 111 beta釋出！新增6大CSS，8大Web API功能？