Chrome 99 版的新功能

以下是一些注意事項:

  • Chrome 和 Firefox 第 100 版的倒數計時器只剩幾週的時間。
  • CSS 層級連結可讓您更全面地控管 CSS,並有助於避免樣式專屬性衝突。
  • showPicker() 方法可讓您以程式輔助方式,為 <input> 元素 (例如 datecolordatalist) 顯示瀏覽器挑選器。
  • 還有許多其他功能。

我是 Pete LePage,讓我們深入瞭解 Chrome 99 版為開發人員提供的新功能。

Chrome 100 和 Firefox 100

Chrome 100 將於 2022 年 3 月底推出,Firefox 100 則會在 5 月初推出。這兩個版本號碼都是主要版本的里程碑,並會轉換為三位數。但如果程式碼預期兩位數字,新版本號碼可能會導致問題。

請檢查任何檢查版本號碼或剖析使用者代理程式字串的程式碼,確保不會發生任何問題。

Chrome 旗標頁面,強調新的 #force-major-version-to-100 選項

在 Chrome 中,#force-major-version-to-100 標記會將目前的版本號碼變更為 100。

在 Firefox Nightly 的「設定」選單中,您可以啟用「Firefox 100 User-Agent String」選項。建議您測試網站,確保一切運作正常。

如需完整詳細資料,請參閱 Chrome 和 Firefox 即將推出主要版本 100

CSS 層疊式圖層

Chrome 99 支援 CSS 層級串聯和 CSS @layer 規則。可讓您更明確地控管 CSS 檔案,避免樣式專屬性衝突。這對於大型程式碼集、設計系統,以及在應用程式中管理第三方樣式時特別實用。

這些元素會在 CSS 層疊中引入新層。使用分層樣式時,圖層的優先順序一律會優先於選取器的特定性。

專案示範中分離 UI 的插圖

如果您嘗試在 .card 內的 .post 中設定連結樣式,系統會套用更明確的選取器。使用 @layer 規則,您可以更明確地指定每個樣式的特定樣式,並確保資訊卡中的連結樣式會覆寫貼文中的連結樣式。

@layer base {
  a {
    font-weight: 800;
    color: red;
  }

  .link {
    color: blue;
  }
}

這是因為階層式優先順序。分層樣式會建立新的階層平面。

Chrome 99、Firefox 97 和 Safari 15.4 Beta 版支援使用 CSS @layer 規則的層級連接。如需更多資訊,請參閱「瀏覽器即將支援階層式圖層」。

針對輸入元素使用 showPicker()

我們長期以來都必須使用自訂小工具程式庫或駭客攻擊來顯示日期挑選器。HTML InputElements 上有新的 showPicker() 方法。這是顯示瀏覽器挑選器的標準方式,不僅適用於 date,也適用於 timecolor 和其他含有挑選器的 <input> 元素。

瀏覽器挑選器的螢幕截圖
Chrome 桌面版、Chrome 行動版、Safari 桌面版、Safari 行動版和 Firefox 桌面版中的瀏覽器日期挑選器 (2021 年 7 月)。

如要使用它,請在 <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.
  }
});

請參閱「顯示日期、時間、顏色和檔案的瀏覽器挑選器」一文,瞭解完整詳細資料,以及您可以使用 <input> 的所有不同類型。showPicker()

還有更多獎品等著您!

當然,還有許多其他功能。

Canvas2D API 已更新,新增了以下功能:

  • ContextLostContextRestored 的兩個新事件
  • willReadFrequently 選項
  • 支援更多 CSS 文字修飾符
  • 還能使用更多其他功能。

我們推出了新的來源試用功能,讓 PWA 在用於深色模式的網頁應用程式資訊清單中提供替代色彩。

手寫辨識 API 現已推出。

延伸閱讀

這份文件僅涵蓋部分重點。如要瞭解 Chrome 99 中的其他異動,請參閱下方的連結。

訂閱

如要隨時掌握最新消息,請訂閱 Chrome 開發人員 YouTube 頻道,這樣一來,我們發布新影片時,你就會收到電子郵件通知。

我是 Pete LePage,Chrome 100 一推出,我就會在這裡告訴你 Chrome 的新功能!