このページは Cloud Translation API によって翻訳されました。

Chrome 99 の新機能

Pete LePage

必知事項は次のとおりです。

Chrome と Firefox のバージョン 100 のリリースまであと数週間です。
CSS カスケードレイヤを使用すると、CSS をより細かく制御し、スタイルの限定性の競合を防ぐことができます。
showPicker() メソッドを使用すると、date、color、datalist などの <input> 要素のブラウザ選択ツールをプログラムで表示できます。
他にも多数の機能があります。

Pete LePage と申します。Chrome 99 のデベロッパー向けの新機能について詳しく見てみましょう。

Chrome 100 と Firefox 100

Chrome 100 は 2022 年 3 月下旬にリリースされ、Firefox 100 はその後まもなく 5 月上旬にリリースされます。どちらもメジャーバージョン番号のマイルストーンであり、3 桁に切り替わります。ただし、コードが 2 桁のバージョン番号を想定している場合、新しいバージョン番号が問題になる可能性があります。

バージョン番号を確認するコードや、ユーザーエージェント文字列を解析するコードは、問題が発生しないことを確認する必要があります。

新しい #force-major-version-to-100 オプションがハイライト表示された Chrome フラグページ

Chrome では、#force-major-version-to-100 フラグによって現在のバージョン番号が 100 に変更されます。

Firefox Nightly の [設定] メニューで、[Firefox 100 ユーザーエージェント文字列] オプションを有効にできます。すべてが想定どおりに動作することを確認するために、サイトをテストすることをおすすめします。

詳しくは、Chrome と Firefox がまもなくメジャーバージョン 100 になりますをご覧ください。

CSS カスケードレイヤ

CSS カスケードレイヤと CSS @layer ルールのサポートは Chrome 99 でリリースされます。スタイル固有の競合を防ぐため、CSS ファイルをより明示的に制御できます。これは、大規模なコードベース、デザインシステム、アプリケーションでサードパーティスタイルを管理する場合に特に便利です。

CSS カスケードに新しいレイヤを導入します。階層型スタイルでは、レイヤの優先順位が常にセレクタの特異性よりも優先されます。

UI の分割に関するプロジェクトのデモのイラスト

リンクのスタイルを設定しようとすると、.card 内の .post 内で、より具体的なセレクタが適用されます。@layer ルールを使用すると、それぞれのスタイルの具体性をより明確に示し、カード内のリンクスタイルが投稿のリンクスタイルをオーバーライドするようにできます。

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

  .link {
    color: blue;
  }
}

これは、カスケードの優先順位が原因です。レイヤリングスタイルを使用すると、新しいカスケードプレーンが作成されます。

CSS @layer ルールを使用したカスケードレイヤは、Chrome 99、Firefox 97、Safari 15.4 ベータ版でサポートされています。詳しくは、カスケードレイヤがブラウザに登場をご覧ください。

入力要素用の showPicker()

長い間、日付選択ツールを表示するには、カスタムウィジェットライブラリやハックに頼らざるを得ませんでした。HTML の InputElements に新しい showPicker() メソッドが追加されました。これは、date だけでなく、time、color、その他の <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.
  }
});

詳しくは、日付、時刻、色、ファイルのブラウザ選択ツールを表示するをご覧ください。また、showPicker() で使用できるさまざまな <input> タイプについてもご確認ください。

その他

もちろん、他にもたくさんあります。

Canvas2D API が更新され、次の新機能が追加されました。

ContextLost と ContextRestored の 2 つの新しいイベント
willReadFrequently オプション
より多くの CSS テキスト修飾子のサポート
多くの機能があります。

ダークモード用のウェブアプリマニフェストで PWA が代替色を提供できる新しいオリジントライアルが追加されました。

手書き認識 API がリリースされました。

Chrome 99 の新機能

Chrome 100 と Firefox 100

CSS カスケード レイヤ

入力要素用の showPicker()

その他

関連情報

登録

CSS カスケードレイヤ