#34「State of CSS 2022の気になるトピックをピックアップ」

最近いくつかのブラウザに実装されたinert属性や、新しく仕様に追加されたcolor-contrast関数、また現在仕様策定中のCSS Anchored Positioning、selectmenuについて、その背景やプロパティの詳細についてお話ししました。

※ オフラインのため、音声ファイルを再生できません。ネットワーク状況をご確認の上、再度アクセスしてください。

古川
こんにちは！
ミツエーテックラジオは株式会社ミツエーリンクスのスタッフがWebデザイン、 WebフロントエンドなどのWeb技術に関するニュースやツールなどをシェアするためのポッドキャストです。

司会は古川が務めます。今回のゲストは加藤くんです。よろしくお願いします。

加藤
よろしくお願いします。
古川
はい。今日のテーマは「State of CSS 2022の気になるトピックをピックアップ」です。近頃web.devで、Webブラウザの新しい機能についてまとめられてる記事っていうのがいくつかアップされていたんですけど、今回は「State of CSS 2022」の中から、これは気になる…！と思った機能についてざっくばらんに加藤くんと話していきたいなと思います。
加藤
これ「State of CSS 2022」って最初聞いたときはあの毎年行われているサーベイの話かなと思いましたよね。この記事は5月に開催されたGoogle I/Oのセッションを記事にしたもののようですので、ぜひリスナーのみなさんも記事を眺めながら聞いていただけたらなと思います。
古川
はい。ではさっそくなんですけど、こう加藤くん的にめちゃくちゃ気になってるのって何かありますか？
加藤
めちゃくちゃ気になってるのって言われると難しいですね。わかりやすいところでいうと、まずはinert属性とか？
古川
あーあれは普通にすごいって思いました。
加藤
うん、そうですね。dialog要素が先に使えるようになったので、一番使いたい時に使えなかった感じではありますけどね。
古川
うーん確かに。まあ一応これ、どんなものか説明してもらってもいいですか？
加藤
はい。inert属性がついている要素とShadow DOMを含むその子要素全体が不活性になるっていう属性なんですけど、不活性というのは簡単に言うとフォーカスできない、クリックできない、テキストの選択や編集もできないっていう状態ですね。
古川
これ、モーダルダイアログを自前で実装する時はあったら良かったなって思ったんですけど、ちなみにほかに使い道とかありますかね？
加藤
もともとinertはdialog要素の仕様の一部だったようなんですけど、そのあとBugzillaにdialog要素を使わずに要素を不活性にするっていうスレッドが立って、そこでユースケースは何ですか？みたいな話がされてましたね。
古川
へー、どんなユースケースがあったんですか？
加藤
分かりやすいところでいうとカルーセルのような、DOMツリーには要素が存在するけど画面上では見えていない要素、いわゆるオフスクリーンな要素に対して使うケースとかですかね。
古川
うーん、これ、見えてない要素にはフォーカスが当たらないようにするって感じですか？
加藤
そうですね。まぁあとはドロワーとか、dialog要素と似たような機能を持つけど、dialog要素を使って実装しようとするとちょっと無理な実装になってしまうケースもあるので、そういう時は使えそうですね。
古川
これ使う上での注意点とかってありますか？
加藤
えっと1つはinert属性が付与されて不活性になっているサブツリーの中の、この要素だけ部分的に活性にしたい！ということができないっていうところですかね。
古川
あーたとえばinert属性とかdisabled属性みたいな真偽値属性だとそうなりますかね。使うんだったらちゃんと考えて設計しないとだめそうな感じがします。
加藤
そうですね。あとは、inert属性がついている要素の見た目についての定義は特に仕様では示されていないので、inert状態であることがユーザーに伝わるようにちゃんとスタイリングする必要があります。
古川
うーん、なるほど。クリックできそうな見た目しているのに押しても何も起きないのは結構ストレスかもしれないので、注意したいと思います。
加藤
はい。次に気になってるのが、color-contrast()ですかね。これはいくつかの色の中から、ベースとなる色とのコントラスト比がより高い色を自動で決定してくれるっていうCSSの関数ですね。
古川
うん、そうですね。えーとまぁこれ具体例を挙げると、たとえばベースとなる背景色をgrayで指定して、まぁその上に乗るテキストの色をblackにしようかwhiteにしようか迷ってるとするじゃないですか。
加藤
はい。
古川
そうなったときに、そのgrayに対して、まぁblackかwhiteかコントラスト比率が高い方をブラウザが判定して返してくれるっていう感じで動作します。
加藤
うーん、なるほど。
古川
で、ベースの色と比較する色のリスト、えっと、さっきの例えだとblackとかwhiteかなんですけど、それに続けて、どれくらいのコントラスト比を担保するかっていうのもユーザーが指定することができます。えー数値で指定できるのと、キーワードとしてAAとAA-largeとAAAが用意されてます。
加藤
あーそのAAとかっていうのは、WCAGで定義されている適合レベルを示してますか？
古川
そうです。
加藤
なるほど。これ便利だなーって思ったのが、うまく使えば色を変えるためにわざわざクラスを切り替える必要がなくなるのでそこはいいなって思ったんですよね。
古川
うんうん。あのダークモード対応とか、カラーテーマがたくさんある場合っていうのはかなり記述がシンプルになりそうな感じがします。
加藤
ただやっぱり、色リストとかコントラスト比を指定するときに、「vs」とか「to」といったキーワードが入るんですけど、そのあたりがこれまでの一般的なCSSとはちょっと変わってきているので、あの書き方に慣れるまでに時間かかりそうかなーというのは思いますね。
古川
うーん、やっぱ高度なことやろうとすると構文も複雑になっちゃうかもしれないですね。
加藤
うーん、そうですね。
加藤
はい、ここからは「2022 and beyond」つまり、2022年以降に検討されている機能について話していきたいと思うんですが、古川さん anchor()って知ってますか？
古川
これ、自分も知らなかったので調べたんですけど、CSS Anchored Positioningっていうのが提案されてて、今って例えば要素の絶対配置をするときはposition: relativeとabsolute使って、親要素を起点に配置するじゃないですか。
加藤
うん、そうですね。
古川
なので、2つの要素が親子関係にあることが必要なんですけど、まぁそうなっちゃうと、複雑な配置をしようとすると結構マークアップとか、かなり悩むと思うんですよ。
加藤
はい。
古川
なんですけど、このanchor()っていうのを使うことで、親子関係など関係なく、任意の要素に対して絶対的な配置をするっていうことができます。
加藤
あー。それはスゴイですね。とは言ったものの、何でしょう、ユースケースがあんまり思いつかないですね。
古川
えーと、ツールチップとかポップアップメニューがCSSで実装できるイメージですかね。
加藤
あ、なるほど。ツールチップを表示するボタンとツールチップ本体のマークアップが離れていても実現できるっていうことですね？なるほど、それは便利だ。
古川
そうなんですよ。しかもですね、たとえばツールチップを実装するときって、ツールチップが画面から見切れないようにボタンの上にツールチップを表示したり下に表示したり、右寄せ、左寄せみたい感じで調整したりするときってあるじゃないですか。
加藤
あるあるですね。あれはJS必要になりますよね。
古川
そうなんですよ。今はこう、JSを使ってそうやって実装したりするんですけど、anchorが実装されれば、CSSだけでビューポートに合わせてツールチップの表示位置っていうのを設定できるみたいで、そのさっきの見切れる…とかも回避できるらしいです。
加藤
ふーんスゴイですねそれ。ただなんかそこまでCSSでやろうとするとCSSのコードが逆にすごい複雑になりそうですね。
古川
これ実はさっきのcolor-contrastと同様で、これまで見たことない書き方をするんですけど、口頭で説明するのが結構難しいので、ぜひ仕様を見ていただければと思います…。
加藤
はい、分かりました！
古川
そういえば、フォームのスタイリングについても、accent-colorとかselectmenu要素とかが紹介されていますね。
加藤
そうですね。Interop 2022の重点分野にもForm compatibilityが含まれていたので、その辺りも注力されているんですかね。ところで<selectmenu>っていうのはなんですか？
古川
えっと、簡単に言えば<selectmenu>っていうのは見た目をカスタマイズできる自由度の高いselect要素って感じですね。
加藤
あーselect要素の見た目がカスタマイズできるようになるんじゃなくて、新しい要素として定義されるんですか？
古川
んーそうみたいです。これ、いまはChromiumだけで実装が進んでいるみたいなんですけど、もともとWICGのプロジェクトの1個のOpen UIの中で提案されていたコンポーネントをベースに実装を進めているようです。
加藤
なるほど。今まであんまり気にしてこなかったんですけど、たしかにselect要素とかoption要素って特にスタイリングしづらい、というか、ほぼほぼできないですよね。
古川
うーんそうなんですよね。まぁ、だからといって他の要素を使ってけっこう見せかけで実装したりすると思うんですけど、それってアクセシビリティを損ねてしまったりとか、フォームの要素としての機能っていうのが失われてしまうケースがけっこう起きがちなんですよね。
加藤
うーん。たしかに。ちなみに<select>と<selectmenu>はどういった違いがあるんですか？
古川
<select>要素は<option>か<optgroup>っていう2つの要素が基本的な子要素として認められていたと思うんですけど、この<selectmenu>っていうのはそこの自由度っていうのがかなり高いみたいです。
加藤
あーいろんな要素が使える感じですか？
古川
うーん、まだちょっと正式なWeb標準仕様じゃないんで何とも言い難いですけど、デモを見てる限りではまぁ結構自由に使えそうな気がします。
加藤
へーそれはスゴイですね。でもそれってさっき言ってたような独自に実装するのとはどう違うんでしょうか？
古川
えーと<selectmenu>は中身を見てくと、メニューを表示するためのトリガーになるbuttonと、現在この選択されている値を示すselected-valueと、メニューの本体であるlistboxの3つのパーツで構成されてて、それぞれのパーツをslot属性で指定することで自由なHTMLに置き換えることができるみたいです。
加藤
んーなるほど。じゃ制限があったうえでの自由度の高さっていうことですね。
古川
うーん、そうですね。これOpen UIでは、Webでよくある色んな一般的なコンポーネントのネーミングとか構造の標準化っていうのを目指しているみたいで、<selectmenu>以外にもいくつかのコンポーネントの提案がされているみたいなので、ぜひこれ見てみるといいと思います！
古川
ということで、ざっくばらんに新しい仕様について話してきたんですけど、加藤くんいかがでしたでしょうか？
加藤
そうですね。今日話してきたような機能ってこれまでJavaScriptでどうにか実装してきたけど、そういうのがCSSの標準仕様に吸収されていっている感じがしますね。
古川
んーそうですね。まぁなんでもかんでもCSSでやる方がいい、ということじゃもちろんないんですけど、HTMLとCSSとJavaScriptをそれぞれ適所適材に使い分けられるようになってきているなって感じがします。やっぱりこれ引き続きブラウザ動向に注目していきたいと思います。
ということで、今回記事に掲載されているすべての機能っていうのはこの回でご紹介できなかったんですけど、ポッドキャストの文字起こしに記事へのリンクを記載しておりますので、ぜひ記事をご確認いただければと思います。
今回のポッドキャストは以上です。ミツエーリンクスではスマートなコミュニケーションをデザインしたいUIデザイナー、UI開発者を募集しています。採用サイトではオンライン説明会やオンライン面接なども行っておりますので、ぜひチェックしてみてください。
またこのPodcastはApple Podcast、Google Podcast、Amazon Music、Spotify、YouTubeで配信していますので、お好みのプラットフォームをフォローいただけると、最新のエピソードをすぐ視聴にできます！こちらもぜひご活用ください。
最後に 「#ミツエーテックラジオ」でご意見、ご感想、こんなこと話してほしいというリクエストなどお待ちしております。 それでは今日はこの辺で！ありがとうございましたー！
加藤
ありがとうございました！