Web標準を求めて、Compat 2021からInterop 2022へ ②

4か月ぶりの投稿のYNです。
よろしくお願いします。

今月は、「Web標準を求めて、Compat 2021からInterop 2022へ　①　」の続きの「②」のInterop 2022という事で、下記の記事をネタに、少し書きたいと思います。

Apple、Google、Microsoft、MozillaがWeb改善「Interop 2022」で協力　2022年03月06日 08時11分 公開　[佐藤由紀子，ITmedia]

ブラウザのWebサイト表現の互換性問題への対処ということで、①の昨年の「Compat 2021(リンク先はGoogleのWebサイト翻訳で日本語翻訳済み)」という団体の標準化内容についてに引き続き、
今月は②として、今年の「Interop 2022(リンク先はGoogleのWebサイト翻訳で日本語翻訳済み)」という団体の標準化内容について、少し書きたいと思います。

2022年は、Interop 2022のWebkitのサイトのGoogleのWebサイト翻訳によると、
「2022年3月3日　ジェン・シモンズ
当初から、Webは常に、あらゆるブラウザ、あらゆるコンピュータで機能することを目的としていました。これは、相互運用性によって可能になります基盤となる各Webテクノロジーがすべてのブラウザーで同じ方法で実装されている場合です。相互運用性を実現するには、すべてのブラウザエンジニアが、Web標準（新しいテクノロジが定義されている非常に詳細な仕様）に従ってWebテクノロジを実装することを約束する必要があります。
2022年、Apple、Bocoup、Google、Igalia、Microsoft、Mozillaが協力して、Interop 2022と呼ばれるプロジェクトで、Web開発者のエクスペリエンスに最も影響を与える15の主要分野での相互運用性の向上に取り組んでいます。
根本的に、Interop 2022は、Web開発者にとって最も重要な特定のWeb標準のサポートを評価することを目的とした、一連の自動テストから生成された進化するメトリックです。Interop 2022ダッシュボードは、年間を通じて常に更新され、ブラウザエンジニアがバグを修正し、新機能を実装し、テストを改善するにつれて進捗状況が示されます。」
とあります。

Interop 2022では、Compat 2021の重点分野5点に加えて、10の主要分野での相互運用性の向上に取り組んでいくようです。
2022年の10の新たな重点分野は、下記のとおりです。

1.カスケードレイヤー(CSS Cascade Layers)
2.色空間と関数(Color Spaces and Functions)
3.封じ込め(CSS Containment)
4.ダイアログ要素(Dialog Element)
5.フォームの修正(Form Fixes)
6.スクロール(Scrolling)
7.サブグリッド(Subgrid)
8.タイポグラフィとエンコーディング(Typography and Encodings)
9.ビューポートユニット(Viewport Units)
10.Web互換性(Web Compatibility)

Compat 2021の重点分野5点は、下記のとおりで、こちらも引き続き重点的に対応していくようです。
各項目については、「Web標準を求めて、Compat 2021からInterop 2022へ　①」を参考にしていただければと思います。

1.CSS flexbox(CSS フレキシブルボックスレイアウト)
2.CSS Grid(CSS グリッド レイアウト)
3.CSS position: sticky
4.CSS aspect-ratioプロパティ
5.CSS transforms(CSS 座標変換)

Interop 2022の10の主要分野について、概要を説明すると下記の通りです。

1.カスケードレイヤー(Cascade Layers)
「CSSの新機能カスケードレイヤー「@layer」CSSをレイヤー化して扱え、今までの実装方法が大きく変わる！　Post on:2021年10月26日」というサイトに有るように、2021年10月辺りから各ブラウザで試験的に実装されていった機能のようです。
CSS Cascade Layersのサポートブラウザは　「Can I use…」で現在の状況がわかります。
本稿作成時点の2022年5月で主要ブラウザはOperaなどのモバイル以外はほぼサポートされています。

Mozillaのサイト「MDN」の「開発者向けのウェブ技術　＞　CSS: カスケーディングスタイルシート　＞　@layer」に、構文や例文、ブラウザの互換性なども掲載されていますので、そちらをご覧いただければと思います。
「Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。」
とある通り、試験的な実装である側面はあるので、Web制作担当者の皆様は今後の最新情報を注視しながらの実装になるかと思われます。

2.色空間と関数(Color Spaces and Functions)
色空間の問題とは、Webブラウザーのカラーマネージメント機能が動作しているかどうかによって、表示される色が異なるということがあるようです。
「カラーマネージメント動作試験ページ」

本稿執筆者は、普段ChromeやEdgeでWebサイトを閲覧しているため、Firefoxで表示すると違った印象に見えるという経験がなかったのですが、
ブラウザのバージョンや設定などによっても、違ってくるようです。
「Crome と Firefox や IE で表示色が違うけど、どちらが正しいの？　更新日 : 2022年1月28日」

「2021年05月28日 07時00分　ブラウザによって色が異なる「色空間」の不思議な世界」というサイトで、動画を記録・変換・再生するためのフリーソフトウェアの中でも特に広く使われているFFmpegを使って作成した動画の「緑色」が、各ブラウザや各OS上でどのように表示されるか検証されたブログの情報が有ります。
Firefoxでは緑色が濃く表示されてしまう場合があるなどの情報が掲載されています。
WindowsでのChrome(ハードウェアアクセラレーションがオン)では、OSかビデオカードドライバのレベルに依存するケースが有るようです。

特にデザイナーさんや写真が趣味の方が、問題点を指摘しているサイトが多い印象でした。

Appleが主導するWebKitでは、以上のような問題への対処も含め、広色域モニターで、高画質カメラなどに収められた、豊かな色表現を再現しようとしているようです。

WebkitのサイトのGoogle翻訳されたものには、
「Webの初期の頃、ほとんどのサイトは色の使用を216色の特定のパレットに制限していました。その後、長い間、Web開発者はsRGB色空間で何でも使用し、通常、それらの色を16進数、、、、で表現していました。一方、カメラとモニターのテクノロジーは大きく進化し、より広く明るい色の範囲をキャプチャして表示できるようになりました。今日のAppleディスプレイは、sRGBよりも約50％広いDisplayP3色空間をサポートしています。
新しいカラー機能と新しいカラースペースのサポートにより、この活気がWebにもたらされます。Interop 2022には、3つの拡張色空間（LAB、LCH、P3）のサポートのテストと、機能表記を使用してCSSで色を記述する2つの方法が含まれています(color-mix、color-contrast)。
Web での色の改善、Display-P3を使用したCSSの広色域色、およびHTMLキャンバスを使用した広色域2Dグラフィックス の色空間と機能の詳細をご覧ください。」
とあります。

3.封じ込め(CSS Containment)
公開日は下記サイトによると「2020/05/08」辺りのようです。
「CSS ContainmentがWeb標準に　2020年6月11日　原文(投稿日：2020/05/08)」

Mozillaのサイト「MDN」の「開発者向けのウェブ技術　＞　CSS: カスケーディングスタイルシート　＞　CSS 封じ込め」に、基本的な例、主要概念と用語、ブラウザーの互換性なども掲載されていますので、そちらをご覧いただければと思います。
上記サイトには、
「Note: style の封じ込め仕様上「リスクがあり」、どこでも対応しているとは限りません (現在 Firefox は対応していません)。」
とあります。

「CSS containment（封じ込め）による動的コンテンツのパフォーマンス向上　2020年10月15日」というサイトには、
ブラウザ実装状況として、
「CSS containmentはW3C勧告になり、WEB標準の機能としてSafari以外の最近のブラウザで実装されています。
ブラウザ実装状況：https://caniuse.com/css-containment
containプロパティを使う事によって、ブラウザは生成コンテンツ全体ではなく限定された領域を対象にレイアウト、スタイル、サイズを再計算できるようになります。
特に大きな容量のコンテンツにおいては、再フローや再描画のパフォーマンスを大幅に改善する事ができますので、ほとんどのブラウザで導入されています。」
とあります。

WebkitのサイトのGoogle翻訳されたものには、
「ここ数年、Web開発者がWebに追加することを最も要求したのは、ContainerQueriesです。これは、特定のコンテナーのサイズを識別および測定し、そのサイズに基づいて条件付きでスタイルを適用するためのCSSの強力なツールになります。メディアクエリに似ていますが、ビューポートのサイズを測定する代わりに、コンテンツを保持するボックスのサイズを測定します。
封じ込めは、コンテナクエリを機能させるための基本です。実際、Container Queriesは、Containment仕様のレベル3で定義されています。Interop 2022を推進しているグループは、今年、ContainerQueriesを含めることで合意に達しませんでした。ただし、プロパティ全体でのレイアウト、サイズ、ペイントの封じ込めの相互運用性に焦点を当てることに同意しcontainment、将来的に残りの封じ込めクエリとコンテナクエリの相互運用性を優先するための準備を整えました。」
とあるように、主要ブラウザは概ね対応しているが、一部の機能は対応していない主要ブラウザがあるが今後対応していく、ということのようです。

4.ダイアログ要素(Dialog Element)
Mozillaのサイト「MDN」の「開発者向けのウェブ技術　＞　HTML　＞　HTML 要素リファレンス　＞　<dialog>」には、
「<dialog>: ダイアログ要素　HTML の <dialog> 要素は、ダイアログボックスや、消すことができるアラート、インスペクター、サブウィンドウ等のような対話的コンポーネントを表します。」
とあり、ダイアログボックスやポップアップウィンドウなどを表示させる機能です。
ほとんどのブラウザが対応している機能で、

WebkitのサイトのGoogle翻訳されたものには、
「Webで長い間要望されていたもう1つの機能であるダイアログ要素は、オーバーレイとモーダルを作成するための堅牢で強力な方法を提供します。::backdrop疑似要素により、モーダルの下の背景のスタイルを設定できます。<dialog>使用方法とダイアログエレメントの紹介　::backdropで詳細を学ぶことができます。」
とあるように、使用法を学んで使っていってほしい機能のようです。

5.フォームの修正(Form Fixes)
Mozillaのサイト「MDN」の「開発者向けのウェブ技術　＞　HTML　＞　HTML 要素リファレンス　＞　<form>」で紹介されているフォーム要素は、古くからある機能ですが、
WebkitのサイトのGoogle翻訳されたものには、
「フォームは、Webデザイナーと開発者が相互運用性の課題を見つけるもう1つの領域です。これは、OpenUI コミュニティグループと適切な標準化団体が解決に取り組んでいる課題です。Interop 2022は、既存の仕様の既存のテストの合格率の向上に焦点を当てることにより、この作業に貢献しています。これには、appearance プロパティ、、無効なフォームコントロール　<form> のイベント、入力要素のバグ、フォームの送信、フォームの検証が含まれます。」
とあるように、<form>の諸問題を解決し、より使いやすくしていきたいようです。

6.スクロール(Scrolling)
WebkitのサイトのGoogle翻訳されたものには、
「今日のWebサイトとWebアプリは、スクロールがこれまでになくどのように機能するかをより深く気にかけています。スクロールスナップ は、デザイナーと開発者がインターフェイスのスクロール方法とコンテンツの表示方法を制御するためのツールを提供します。CSSのscroll-behavior プロパティは、ナビゲーションまたはCSSOMスクロールAPIによってスクロールがトリガーされたときのスクロールボックスの動作を設定します。CSSプロパティはoverscroll-behavior 、スクロール領域の境界に到達したときにブラウザが何をするかを決定します。」
とあり、この項目では「CSSスクロールスナップ 」について扱ったWEBサイトなどを紹介します。

「CSSでスクロールのスナップが可能に！scroll-snapプロパティの基礎知識と便利な使い方　Post on:2018年9月14日 」というサイトには、ブラウザのサポート実装当初の紹介記事が有ります。
「CSSのscroll-snapプロパティを使用すると、スマホのホーム画面のようにちょっとずらすだけで、すぐに次のコンテンツを表示させることができます。今まではJavaScriptの領域でしたが、これからはCSSのみで実装できます」
とあり、JavaScriptを使わなくてもCSSのみで、ある程度のスクロールの制御が可能になったということのようです。
「scroll-snapプロパティ」のサポートブラウザとして、
「scroll-snapのサポートブラウザは、Chrome、Firefox、Edge、IE、Safariのデスクトップ用ブラウザのすべてでサポートされています。Chromeは先日9/4にリリースされたChrome 69+です。モバイル用のブラウザでは、iOS用のSafaiのみサポートされています。scroll-snapは2016年に導入されて以来、大幅に改善されています。　参考: Introducing CSS Scroll Snap Points　scroll-snapのサポートブラウザ 」と紹介されています。

「表示領域にピタッと移動！CSSでスクロールスナップを実装しよう　2019年1月11日 」というサイトの解説もわかりやすいです。

「CSSのスクロールスナップの便利な使い方、実装の注意点を徹底解説　Post on:2020年12月22日 」というサイトでは、CSSのスクロールスナップが登場して4年現在で、ほぼすべてのブラウザにサポートされ、採用しているWebサイトやスマホアプリも増えてきた段階での、CSSのスクロールスナップについて、基礎知識をはじめ、各プロパティの機能や使い方、スクロールスナップの実際の使用例、実装の注意点などを紹介しています。

7.サブグリッド(Subgrid)
WebkitのサイトのGoogle翻訳されたものには、
「CSSグリッドは5年前の2017年3月に出荷され 、Web上のレイアウトデザインで可能なことに革命をもたらしました。サブグリッド はCSSグリッドレベル2 で定義されており、グリッドコンテナの孫をそのグリッドに配置する簡単な方法を提供します。DOM構造に関係なく、複雑なレイアウトにアイテムを並べることができます。Web上で機能するレイアウトシステムのビジョンは、グリッドとサブグリッドを一緒に使用することで、より完全に実現されます。」
とあります。

Mozillaのサイト「MDN」の「開発者向けのウェブ技術　＞　CSS: カスケーディングスタイルシート　＞　CSS グリッドレイアウト　＞　サブグリッド 」では、CSS グリッドレイアウトの Level 2で追加された、サブグリッドでできること、いくつかの使用例、この機能で解決されるデザインパターンを詳述しています。
このサイトにある、「Warning: この機能は Firefox 71 で使用可能になりますが、今のところ、これがサブグリッドを実装している唯一のブラウザーです。」の警告通り、本校執筆時の2022年5月時点では、Firefox 71以降でしか対応してないので、実装する場合はかなり限定的になるかと思われます。

「@oreo(Goodpatch)　2019年12月09日　CSSサブグリッドで真のフレキシブルなレイアウトを実現する方法 」というサイトでは、CSSグリッドで実現されたこととその問題点、その後にCSSグリッド Level 2で実装されたCSSサブグリッドで実現した、CSSグリッド Level 1の問題点の解決された部分について、わかりやすい解説がされています。

「@xrxoxcxox(Qiita株式会社)　投稿日 2021年06月03日　更新日 2022年02月23日　CSS Gridを使うときにSubgridを使うと楽＆事故りづらい 」というサイトにも具体例があるので、今後のブラウザのサポート状況によって実装を考えられている方は、ご参考にされると良いかと思われます。

8.タイポグラフィとエンコーディング(Typography and Encodings)
WebkitのサイトのGoogle翻訳されたものには、
「タイポグラフィとエンコーディングには、Web上のタイポグラフィに影響を与える一連のテストが含まれます。フォント機能 は、タイポグラフィを洗練するための強力なプロパティですが、サポートが不完全なため、本来の機能よりも使いにくくなっています。エンコーディングテストの大部分はすべてのブラウザで合格しますが、一部は合格しないため、含まれています。そして、icユニットが含まれています。」
とあります。

CSSフォントは古いブラウザ以外はサポートしているフォント機能ですが、最新バージョンはレベル４で、サポートブラウザはcaniuse でご確認ください。
「CSSフォントモジュールレベル4　W3Cワーキングドラフト、2021年12月21日 」

日本語Webタイポグラフィに関しては、下記のサイトが分かりやすかったです。
「Webデザイナーなら知っておきたいWebタイポグラフィの基本　2012.10.9 」

9.ビューポートユニット(Viewport Units)
まずビューポートユニットについての概要をつかむため、「css viewportとは 」のGoogle検索結果から、下記のサイトを参考にさせていただきました。

「HTML：viewport の正しい書き方　HTML最終更新：2021-12-18 by Joe 」
「HTMLの「viewport」とは設定をどのようにすればいいのか覚える　 2020.03.31 」
「“ビューポート”とは？スマートフォン向けのウェブページでビューポートを設定する　記事Jan. 27th,2019 」
「viewportとは？設定方法やスマホで効かない原因など徹底解説！　2022/04/21 」
「@ryounagaoka　投稿日 2015年06月11日　更新日 2018年10月01日　もう逃げない。HTMLのviewportをちゃんと理解する 」
「viewportを理解して正しいレスポンシブデザインを設定しよう　web制作　デザイナー必見・WEBサイト制作TIPS　ピックアップ　2017.07.05 」

他に、「CSS Viewport Units 」のGoogle検索結果からも、下記のサイトを参考にさせていただきました。

「CSS には vw, vh, vmin, vmax という単位がある　山田 直樹　2014.04.25 」
「知らないと損！CSSのvh/vwの使いこなしでレスポンシブなサイト制作が捗る　2017/05/09 Asha Laxmi 」
「ビューポート単位「vw, vh, vmin, vmax」を使ったCSSのテクニックのまとめ　サイト構築 -CSS　Post on:2020年4月2日 」

その結果、「CSS viewportとは、スマートフォン・タブレット・PCという異なる環境で、それぞれの画面サイズに対応したWebサイトを表示するための、レスポンシブデザインを設定するため、CSSメディアクエリなどと組み合わせて、それぞれの環境に合わせた設定をするための記述」というようなことがなんとなく認識できました。

ブラウザ対応状況は、Can I use のデータによると、2022年6月現在、現行の主要ブラウザはほぼ全て対応しているようです(OperaMini以外)。

WebkitのサイトのGoogle翻訳されたものには、
「Web開発者は、ビューポートユニットと同様に機能するツールを求めることがよくありますが、ユーザーがページをスクロールするとブラウザのビューポートのサイズが変化するモバイルデバイスでより適切に機能します。新しいビューポートユニット がそのソリューションです。100svh 可能な限り最小のビューポートの高さの100％を指します。100lvh 可能な最大のビューポートの高さの100％を指します。100dvh 動的ビューポートの高さの100％を指します。つまり、ユーザーがスクロールすると値が変化します。
100svhは、上から下への最小のビューポートを測定します。 100lvhは最大のビューポートを測定します。 100dvhは動的ビューポートを測定し、ユーザーがスクロールすると変化します。
他にも新しいビューポートユニットがあります、、、svwおよびlvw幅dvwに関して同じ目的を果たします。また、ビューポートのインラインまたはブロックの寸法を参照するための新しい単位があります。」
とあり、新しいビューポートユニットについて触れられています。

10.Web互換性(Web Compatibility)
WebkitのサイトのGoogle翻訳されたものには、
「Webの互換性に影響を与える可能性のある多くのシナリオがあります。たとえば、ブラウザの特定のバグにより、一部のWebサイトが意図したとおりに機能しなくなったり、1つのブラウザがWeb標準と異なる場合があり、WebサイトまたはWebアプリのユーザーに一貫性のないバグのあるエクスペリエンスが発生する可能性があります。Interop 2022は、Web互換性の測定を通じて、これらの問題を把握して対処することを目的としています。」
とあり、Interop 2022もCompat 2021に引き続き、Web互換性問題に対処していく事を改めて宣言しています。

上記10項目に加えて、
「調査プロジェクト(Investigation Projects)」として、

WebkitのサイトのGoogle翻訳されたものには、
「グループがWeb開発にとって重要であると知っているが、自動テストではまだ簡単に評価できない項目が他にもいくつかありました。私たちは、これらの分野でいくつかの調査に着手することを約束しました。手動でブラウザをテストし、自動テストがより役立つかどうか、そしてどのように役立つかを判断し、WPT自体のインフラストラクチャを改善し、相互運用性がまだ不足している可能性がある場所を発見します。適切な標準グループに提案を行います。調査の3つの領域は次のとおりです。
・編集、contenteditable、およびexecCommand
・ポインタとマウスのイベント
・ビューポート測定
グループ全体で達成された作業量に基づいて、各ブラウザの「2022調査」の結果は常に同じになります。」
とあります。

以上の10項目などを重点的に標準化していったのが、Interop 2022という標準化団体です。

今回の投稿は②ということで「Interop 2022」の記事でしたが、
前回は2022年7月の記事で、昨年の2021年のWEB標準化団体「Compat 2021」について書いておりますので、前回の投稿も参考にしていただければと思います。
長文になりすぎてしまって申し訳ありません。
ここまで読んでいただきありがとうございました。

おまけとして、今回の投稿をするにあたって検索したページのあちこちに使われていた、CodePenというサービスですが、下記のサイトに使い方などがありますが、Webサイトつくり隊でもお試しで作ってみたJavascriptを、CodePenを使って紹介されていた方がいらしたので、私もHTML+CSSなどの練習などに使ってみようと思いました。
「@fumu238　投稿日 2020年03月01日　更新日 2020年03月02日　CodePenの使い方(知らない人向け) 」

Follow me!