Chrome 99 版的新功能

以下是一些注意事項:

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

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

Chrome 100 和 Firefox 100

Chrome 100 將在 2022 年 3 月下旬出貨,Firefox 100 也會在五月初出貨。這兩個版本都是主要版本編號的里程碑,累積到 3 位數。但是,如果您的程式碼預期會有兩位數,則新的版本號碼可能會發生問題。

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

在 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 規則的層級連鎖。詳情請參閱瀏覽器即將推出的 Caascade 圖層

輸入元素的 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 Developers YouTube 頻道,每當我們推出新影片時,您會收到電子郵件通知。

我是 Pete LePage,當 Chrome 100 推出後,我會在這裡告訴大家 Chrome 的新功能!