2022 年に相互運用可能になった機能の一部をご紹介します。
もう一年も終わりました。このウェブ プラットフォームの相互運用性を改善するために、ブラウザがもたらす改善点について見ていきましょう。取り組みが開始された今年の 3 月の投稿では、こうした取り組みがどのように始まったかをご紹介しています。
年末の総合スコアでは、すべてのエンジンで大幅な改善が見られました。
この投稿では、2022 年の進捗状況をご紹介します。これらの主要な機能に加えて、すべてのエンジンで多数の細かい改善が行われました。エンジン間の不整合を引き起こし、開発中に動作が妨げられる可能性のある小さな問題が修正されました。ブラウザをまたいで大きな機能が利用できることは確かに喜ばしいことですが、ほとんどの問題の原因は小さな問題であることもあり、どれだけ改善されているのかを見るのは素晴らしいことです。
レイヤをカスケード
カスケード レイヤでは、セレクタをレイヤにグループ化することでカスケードを管理できます。この機能は、どこでもサポートされている場合にのみ有用です。現在、主要なエンジンはすべてカスケード レイヤをサポートしており、すべてのブラウザのスコアは機能の相互運用性を反映しています。Firefox については、あと数テストに合格しています。
ダイアログ要素
ダイアログ要素を使用すると、モーダル ダイアログと非モーダル ダイアログを作成できます。これはウェブ上で一般的なパターンです。この要素を使用すると、独自のコンポーネントを作成するときに開発とテストが必要になるユーザビリティとアクセシビリティが向上します。Adam Argyle 氏は、ダイアログ コンポーネントの作成に関する記事で、この要素を基にしてさまざまな種類のダイアログを作成する方法を説明しています。
サブグリッド
2022 年の初めに、grid-template-rows と grid-template-columns の subgrid 値をサポートしているブラウザは Firefox だけでした。2022 年に Safari がサポートされ、Chrome でこの機能を開発中です。相互運用性の期限が迫っていますが、もうすぐです。
ビューポート ユニット
ビューポート ユニットは、すべてのエンジンのテストで 100% 合格した唯一の機能です。これには、小さなビューポートと大きなビューポートという概念が含まれ、デバイスの 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 年で、ウェブ向けの開発がさらに簡単になることを楽しみにしています。