2022年になりました。矢倉眞隆（@myakura）と申します。昨日に続き，新春特別企画のブラウザとウェブ標準動向について紹介します。

取り上げるトピックの数やそのインパクトから，今回はCSSを独立した記事として取り上げることになりました。「ブラウザとウェブ標準動向」についても寄稿していますので，そちらもお読みいただければうれしいです。

2022年以降のCSSは大きく変化しそうだなと思っています。これまでも，CSS3と呼ばれていた機能による表現力の強化，FlexboxやGridなど強力なレイアウト機能の追加など，大きな変化と言えるだろうものはありました。しかし現在提案・実装されている機能は，CSSの根幹を拡充するものと，これまでと性質が異なるものです。

Compat 2021とInterop 2022で互換性の向上

CSSのつらいところとしてまず取り上げられるのが，ブラウザ実装の挙動の違いです。2021年はCSSの互換性を向上させようという，Compat 2021というプロジェクトがChrome，Microsoft，Igaliaを中心に行われました。仕様のテストスイートweb-platform-testsのうち，複数ブラウザでパスしていないCSSの機能を修正していくというもので，ChromiumではFlexboxやGrid，position: sticky，CSS Transformsのバグ修正のほか，aspect-ratioプロパティの実装が行われました。

FirefoxやSafariでもバグの修正や機能の実装が行われ，年末までには全ブラウザでスコアが上昇する喜ばしい結果となりました。

プロジェクトが一定の成果をみせたことで，今年も同様の取り組みが行われます。名前はInterop 2022と改められ，MozillaやAppleもトピック選定に加わっています。機能はスクロールやビューポート，フォーム要素など引き続きCSSが中心になりそうです。現在はFirefoxでのみ実装されているSubgridや，ウェブ標準の記事でも取り上げたdialog要素の実装もトピックに挙がっているので，それらのリリースも期待したいですね。

:focus-visible擬似クラスが全ブラウザでサポート

ウェブページでTabキーを押すと，リンクや入力フォームのまわりに枠線がつきます。これをフォーカスリング（またはフォーカスインジケーター）と言うのですが，このスタイルに関して機能の向上がありました。

フォーカスリングのスタイル指定には:focusという，フォーカスされている状態にマッチする擬似クラスが定義されていましたが，ここに新たに:focus-visibleという擬似クラスが登場したのです。

:focus疑似クラスはフォーカスされた状態にマッチするのですが，これはマウスでボタンをクリックした状態も含まれます。このためボタンクリック時に意図せず枠線がついてしまうことがあり，その見栄えや挙動を嫌って，サイトやアプリ開発者がフォーカスリングを消してしまうスタイルを書くことがあったのです。

/* アクセシビリティを損なうよくないCSS */
:focus {
  outline: none;
}

これはアクセシビリティを損なうものなので，解決策が検討されました。それが:focus-visible擬似クラスになります。

:focus-visible擬似クラスは「フォーカスリングを出すべき状態」にマッチする擬似クラスです。たとえば，リンクやフォーム入力欄，マウスにTabキーで移動した場合には「フォーカスリングを出すべき状態」ですが，ボタンをマウスクリックする場合はそうではありません。

/* 見えるべきときに見えるフォーカスリング */
:focus-visible {
  outline: 2px solid;
  outline-offset: 2px;
}

この実装に合わせ，フォーカスリングが消される原因となっていた，意図しないフォーカスリングが出てしまう条件の調整もブラウザ内で行われました。ChromeやFirefoxは昨年に:focus-visibleが実装・リリースされ，すでに使えるようになっています。Safariも昨年初め頃からIgaliaによって実装が進められ，年末には開発版で有効になりました。リリースも近いでしょう。今からフォーカスリングのスタイルを書く場合には，:focusを使い消すのではなく，:focus-visibleを使って見やすいフォーカスリングのスタイルとなるようにしてください。

Scroll-linked Animationsが実装中

Scroll-linked Animationsという仕様があります。アニメーションというと時間経過による値の変化を指すことが多いですが，これはスクロール位置の変化と値の変化を関連づけるものです。画面をスクロールしたらふわっと要素が出てきたり，ページ上部にどれくらい読んだかを示すインジケーターバーを出すページがありますが，ああいった表現をCSSで実現する仕組みになります。

こうした表現は華美であるものの，スクロール位置をJavaScriptで都度取得し，要素の位置やスタイルを都度書き換えなければならず，ガタガタしたり重たく感じる実装がとても多いものです。Scroll-linked AnimationsはWeb Animations仕様を拡張し，CSSに@scroll-timelineというブロックを追加することで，宣言的にスクロールのアニメーションを定義できるようになっています。

Chromeでは以前から実装が行われており，Firefoxでも実装が始まっています。構文を変更する提案がされているなど，まだ仕様の安定度合いが高くないようですが，今後に期待したい機能のひとつです。