以下是一些注意事項：
- Chrome 和 Firefox 第 100 版只剩幾週的時間，
- CSS 階層式圖層可讓您進一步控管 CSS，並避免樣式特有衝突。
showPicker()方法可讓您以程式輔助方式，顯示<input>元素的瀏覽器挑選器，例如date、color和datalist。- 還有更多應用程式。
我是 Pete LePage。我們來深入說明 瞭解 Chrome 99 版開發人員推出的新功能
Chrome 100 和 Firefox 100
Chrome 100 將於 2022 年 3 月下旬推出，而 Firefox 100 則會在 5 月初出貨。兩者是主要版本編號里程碑，並累計到三位數。但是，如果您的程式碼預期有兩個數字，則新的版本號碼可能會對您造成問題。
凡是會檢查版本號碼或剖析使用者代理程式字串的程式碼，都應檢查，確保沒有任何問題。
在 Chrome 中，#force-major-version-to-100 旗標會將目前的版本號碼變更為 100。
在 Firefox Nightly 的 [Settings] 選單中，您可以啟用 [Firefox 100 User-Agent String] (Firefox 100 使用者代理程式字串) 選項。建議您測試網站，確認一切運作正常。
詳情請參閱 Chrome 和 Firefox 將推出主要版本 100。
CSS Cascade 圖層
在 Chrome 99 版中，系統支援 CSS Cascade 圖層和 CSS @layer 規則。可讓 CSS 檔案更明確地控管，避免樣式特有衝突。這項功能在大型程式碼集、設計系統，以及在應用程式中管理第三方樣式時特別實用。
將新圖層導入 CSS 層疊。如果使用分層樣式，圖層的優先順序一律高於選取器的明確性。
如果您要設定連結樣式，則在 .card 的 .post 中會發現套用更明確的選取器。使用 @layer 規則，即可更明確地瞭解每種樣式的樣式，並確保資訊卡中的連結樣式會覆寫貼文中的連結樣式。
@layer base {
a {
font-weight: 800;
color: red;
}
.link {
color: blue;
}
}
這是因為串聯優先順序的緣故。分層樣式可建立新的瀑布面。
Chrome 99、Firefox 97 和 Safari 15.4 Beta 版支援使用 CSS @layer 規則的 Cascade 圖層。詳情請參閱「瀏覽器即將推出 Cascade 層」一文。
輸入元素的 showPicker()
長久以來，我們都必須仰賴自訂小工具程式庫或技巧來顯示日期挑選器。HTML InputElements 新增了 showPicker() 方法。這是顯示瀏覽器挑選器的標準方式，不只顯示 date，還包括 time、color 和其他含有挑選器的 <input> 元素。
如要使用，請對 <input> 元素呼叫 showPicker()。在此範例中，我將其包裝在 try…catch 區塊中。這樣一來，如果瀏覽器不支援 API 或無法顯示挑選器，我就能提供備用選項。因此請確保使用者仍可獲得良好的體驗。
const button = document.querySelector("button");
const dateInput = document.querySelector("input");
button.addEventListener("click", () => {
try {
dateInput.showPicker();
// A date picker is shown.
} catch (error) {
// Use an external library when this fails.
}
});
如需完整資訊，以及可以使用 showPicker() 的所有 <input> 類型，請參閱「顯示日期、時間、顏色和檔案的瀏覽器挑選器」。
還有更多獎品等著您！
當然還有許多其他東西。
Canvas2D API 已更新，新增的功能包括：
- 「
ContextLost」和「ContextRestored」的兩個新活動 willReadFrequently選項- 支援更多 CSS 文字修飾符
- 還能使用更多其他功能。
您可以透過新的來源試用功能，讓 PWA 在深色模式的網頁應用程式資訊清單中提供替代顏色。
手寫辨識 API 現已推出。
其他資訊
這僅涵蓋部分重點功能。如要瞭解 Chrome 99 的其他變更，請點選下方連結。
- Chrome 開發人員工具新功能 (99)
- Chrome 99 淘汰和移除
- 適用於 Chrome 99 的 ChromeStatus.com 更新
- Chromium 原始碼存放區變更清單
- Chrome 發布時間表
訂閱
如要隨時掌握最新資訊，請訂閱 Chrome Developers YouTube 頻道。每當我們推出新影片時，您就會收到電子郵件通知。
我是 Pete LePage。Chrome 100 推出後，我馬上就會 為您介紹 Chrome 的新功能！