2022 年 3 月に Stable 版とベータ版のウェブブラウザに導入された興味深い機能をいくつかご紹介します。
安定版ブラウザのリリース
3 月に Chrome 99、Chrome 100、Firefox 98、Safari 15.4 が安定版になりました。これにより、さまざまな新機能がプラットフォームに追加され、3 つのブラウザ エンジンすべてで利用できるようになります。この投稿では、クロスブラウザ間での相互運用性を可能にする追加機能に重点を置きましたが、各エンジンに追加されたすべての機能については、リリースノートをご確認ください。
Chrome 99 と Safari 15.4 にはカスケード レイヤが含まれていました。@layer at ルールはカスケード レイヤを定義し、特異性の制御に役立ちます。これらのブラウザが Firefox に加わったことで、3 つのブラウザ エンジンすべてで Cascade Layers を使用できるようになりました。カスケード レイヤについて詳しくは、カスケード レイヤがブラウザに導入されますをご覧ください。
Chrome 100 では、CSS の mix-blend-mode プロパティに新しい値 plus-lighter が追加されました。この値は、すべてまたは一部のピクセルで同じ値を持つ 2 つの要素をクロスフェードする場合に便利です。これによって解決される問題について詳しくは、任意の 2 つの DOM 要素をクロスフェードすることが現在不可能です。
対応ブラウザ
- 100
- 100
- 99
- 9.1
Safari 15.4 には contain プロパティが含まれており、CSS の封じ込めが可能です。
また、Safari 15.4 には accent-color があり、一部のフォーム コントロールで使用されるアクセント カラーを制御できます。
Firefox 98 と Safari 15.4 では、ダイアログ ボックスを表す <dialog> 要素が導入されました。
Safari 15.4 では、:focus-visible 疑似クラスのサポートも終了しました。実装作業は Igalia が担当しました。
ベータ版ブラウザのリリース
ベータ版ブラウザのバージョンでは、次の安定バージョンのブラウザのプレビュー機能が提供されます。この機会に、自分のサイトがリリースされる前に新しい機能や削除をテストすることをおすすめします。
3 月に新たにベータ版としてリリースされたのは Chrome 101 と Firefox 99 です。
Chrome 101 ベータ版には hwb の色表記が含まれています。色相、白色、黒さに従って色を指定します。他の色表記と同様に、オプションのアルファ コンポーネントで不透明度を指定します。
h1 {
color: hwb(194 0% 0% / .5) /* #00c3ff with 50% opacity */
}
Firefox 99 には、Navigator インターフェースの pdfViewerEnabled プロパティが含まれています。このプロパティは、ブラウザが PDF ファイルのインライン表示をサポートしているかどうかを示します。
if (!navigator.pdfViewerEnabled) {
// The browser does not support inline viewing of PDF files.
}
これらのベータ版機能は、まもなく安定版のブラウザに実装される予定です。