2022 年に相互運用可能になった機能の一部をご紹介します。
今年も 1 年が終わりました。ウェブ プラットフォームの相互運用性を高めるために協力し合う中で、ブラウザによって実現された改善点を振り返るときが来ました。この取り組みがどのように始まったのか、今年 3 月の投稿でご確認いただけます。
<ph type="x-smartling-placeholder">
年末の総合スコアを見ると、すべてのエンジンで大幅に改善されています。
<ph type="x-smartling-placeholder">
この投稿では、2022 年に達成した成果をご紹介します。これらの見出しの機能に加え、すべてのエンジンで細かな改善が数多く行われました。エンジン間の不整合を引き起こしたり、開発中につまずきたりする可能性のある、軽微な問題を修正しました。さまざまなブラウザで利用できる大きな機能を見るのはとても楽しいことですが、大きな問題を引き起こしているのが小さな問題であることもあるため、大幅に改善されているのを見るのは素晴らしいことです。
レイヤのカスケード
カスケードレイヤを使用すると、セレクタをレイヤにグループ化してカスケードを管理できます。この機能は、すべての場所でサポートされている場合にのみ有用です。現在、すべての主要なエンジンがカスケード レイヤをサポートしており、すべてのブラウザのスコアは、この機能の相互運用性の高さを反映しており、Firefox については、あといくつかのテストに合格するだけです。
ダイアログ要素
dialog 要素を使用すると、モーダル ダイアログと非モーダル ダイアログを作成できます。これはウェブでは一般的なパターンです。この要素を使用すると、独自のコンポーネントを作成するときに開発とテストが必要となるユーザビリティとアクセシビリティが得られます。Adam Argyle は、ダイアログ コンポーネントを作成するで、この要素をベースにしてさまざまな種類のダイアログを作成する方法を説明しています。
サブグリッド
2022 年の初めの時点で、grid-template-rows と grid-template-columns の subgrid 値をサポートしているブラウザは Firefox のみでした。Safari のサポートは 2022 年に始まり、Chrome での開発が進められています。今年中に相互運用期限が迫ってきますが、間近に迫っています。
ビューポートの単位
ビューポート ユニットは、すべてのエンジンのテストに合格した唯一の機能です。これには大小のビューポートのコンセプトも含まれます。これにより、デバイスの UI 要素の表示と非表示が変化するモバイルのビューポート サイズに対応できます。これらのユニットについて詳しくは、大、小、動的なビューポート ユニットの投稿をご覧ください。
対応ブラウザ
- 108
- 108
- 101
- 15.4
色 4
この一連の色処理により、CSS は高精細な色域（display p3、rec2020 など）で色を指定できるだけでなく、それぞれが色を処理するための独自のユーティリティを持つ新しい色関数も提供されます。新しい色空間は lch()、oklch()、lab()、oklab()、display-p3、rec2020、a98-rgb、prophoto-rgb、xyz、xyz-d50、xzy-d65 です。このフラグを有効にして、今すぐ Canary でお試しください。これらの変更はグラデーションにも適用され、作成者はグラデーションで使用する色空間を指定できます。同じフラグを使用すると color-mix() のサポートも可能になり、任意のスペースで 2 色を混在させることができます。color-mix() 関数は、Safari と Firefox でもフラグが付けられています。より多くの色、よりきれいな色、より優れたグラデーション、優れたツール。
相互運用 2023
2022 年末でサービスを終了する予定はないということで、喜んでいただけることと存じます。相互運用 2023 はすでに初期の計画段階を終えています。新年には、選ばれた機能を発表する予定です。また、ウェブ向けの開発をさらに容易にする新たな 1 年を楽しみにしています。
ヒーロー画像提供: Ian Schneider