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

Chrome 99 の新機能

Pete LePage

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

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

ピートルページです。Chrome 99 のデベロッパー向け新機能を見ていきましょう

Chrome 100、Firefox 100

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

バージョン番号をチェックするコードや、ユーザーエージェント文字列を解析するコードを調べて、問題がないことを確認する必要があります。

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

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;
  }
}

これはカスケードの優先順位によるものです。レイヤスタイルにより、新しいカスケードプレーンが作成されます。

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()

など多数

関連情報

登録