はじめに
この記事はChrome Dev Summit 2019 内のセッション"Next-generation web styling"の視聴レポートです。
Next-generation web styling (Chrome Dev Summit 2019)
※特に注釈がない限り、本稿に掲載の画像は全て上記動画からの引用となります。
また、セッションで紹介されたプロパティのデモは全て、こちらのサイトで見ることができます！
CSS@CDS
冒頭から身も蓋もないことを言いますが、このセッションは本当に面白くて内容もとっつきやすいので、こんな翻訳記事読んでる時間があるならとっとと元動画を見るべきです。
のっけから陽気過ぎるプレゼンター、スライドは最高にキュートでセンスが良く、ちょくちょくデモも挟んでくれるので英語力に自信がなくてもノリでなんとなくの内容は理解出来るはず。
あなたの心に少しでもCSSを愛する気持ちがあるのなら、一刻も早く見るべきです。
いいですか、さあ見ましょう。今すぐ見るのです。
そして見た後で、「面白かったな。ところであそこ何て言ってたかな？」なんて思った時に、この記事が少しでも理解の助けになれば嬉しいです。
陽気過ぎるプレゼンターのAdam Argyle氏。このクール過ぎるTシャツどこで買えるんだろ。
Awww scroll-snap
まずは、実はIE11でも使えるscroll-snapから！
ほんのちょっとスクロールするだけで、要素がいい感じの位置にピタッとくっついてくれるというものです。
横方向だけでなく縦方向のスクロールにも対応しており、親にscroll-snap-type: both;とoverflow: hidden;、子にscroll-snap-align: center;という組み合わせで縦横双方向スクロールも可能です。
また、上のキャプチャにあるコードでは、overscroll-behavior: contain;という指定により、親であるコンテナ内を最後までスクロールしてもスクロールイベントが要素の外に飛び出してしまわないようにしています。
ちなみにこのセクションのタイトルは、Chromeがクラッシュした時に出るエラーメッセージ「Aw, snap!」とかけてるっぽいですね、おちゃめ。
引用元: Google Chrom ヘルプ
scroll-snap面白いですね、IE11でも使えるのは夢ありますね！なんだか希望が湧いてきました。さあ次いきましょう！
ちなみにこれ以降、IE11で使用可能なプロパティは一切出てきません。
:focus-within
ナビゲーションメニューにありがちな、hoverやfocusで子階層のドロップダウンメニューが出てくるこんなやつ、みなさんも見たことありませんか？こんなコード書いたりしてませんか？
これって実はキーボードしか使えないユーザーに非常に優しくないんです。
上記の実装例では、Tabキーでli要素にアクセスした場合に、ドロップダウンメニューが開かないんです。それどころか、さらにTabキーを押すとcssで非表示にしてある子要素にカーソルの照準が当たってしまい、ユーザーは今どこにカーソルがいるのか追えなくなってしまうのです。
これでは到底アクセシブルだとは言えません。
そこで使えるのが:focus-withinプロパティです。
これはぜひ！冒頭に貼ったリンクからデモを見てみてください！
@media(prefers-*)
ユーザーの好みに合わせたスタイルを提供するための、新しいメディアクエリだそう。
昨今はデバイス側の設定でフォントの大きさやコントラスト、カラーテーマなんかをユーザーが自由に設定出来るようになっていますが、この設定に合わせてブラウザ側の表現も柔軟に変化出来るというものです！すごい……
例えば、以下のように@media (prefers-reduced-motion)というメディアクエリを書けば、デバイス側の設定で「アニメーションを減らす」としているユーザーに対しては、控えめなアニメーションを提供することが出来るようになります。
セッションでは他にも、カラーテーマの切り替えを行う@media (prefers-color-scheme)なんかも紹介されていました。
これだけでもかなりワクワクしますが、なんとまだまだ実装検討中のものが控えているのだとか。
これは楽しみですね〜。
Logical properties
続いてCSSの論理プロパティについてのお話です。
これは、要素を従来のようにwidthとheightという物理的なアプローチでとらえるのではなく、書字方向（テキストがどっち向きに書かれてるか）によってとらえ直そうとするものです。
テキストが伸びていく長さをinline-size、 テキストの行数に相当するものをblock-sizeとして定義し、padding, border, marginにいても、top, left, right, bottomではなく、startとendでスタイリング出来るようにしています。
こちらのスライドがとても分かりやすいのですが、要するに論理プロパティを使うと、書字方向によってテキストの先頭位置が違うので、それに合わせて適切な位置に余白をとったり、また縦横比も書字方向の違いによって振り分けたり出来るようになるのです。
現時点ではあまりそういうシチュエーションはなさそうですが、論理プロパティでスタイリングをしておけば、書字方向を動的に切り替えた場合にもスタイル崩れが起きないというメリットもあります。
今後多言語対応サイトが増えていくにつれ、重要度が高まっていきそうです。
sticky situations
これは新技術というより、position: sticky;をうまく使ったCSSハック紹介でした。
引用: Sticky Desperado / CSS@CDS
こんなアプリっぽい表現をCSSだけで実現できちゃうの、いいですよね〜。
この他にあと2種類のsticky実装例が紹介されており、どれもその工夫具合がたまらないので、こちらもぜひ上記のリンクからデモとコードを見てもらいたいです！
backdrop-filter
filterプロパティの親戚みたいな感じですが、こっちは自身の背後にある要素に対して効果をあてられるものです。したがって、backdrop-filterプロパティでスタイリングされる要素は背景が透過でないと、その効果を確認することができません。
valueに入るのは基本的にfilterのvalueと同じものっぽいです。
:is
これはセッション後すぐにマークアップ界隈でめちゃくちゃ話題になりましたね〜！今更感ありますが軽く紹介です。
これまでカンマで並べて書くしかなかったスタイリングがこんなにスッキリしました！
カスタムプロパティが出てきた時も思ったんですが、いずれピュアなCSSがどんどんsassのような機能を取り入れていくのでは……
gap for flex-box
まだFirefoxしか対応していないみたいですが、gridレイアウトにおけるgapをなんとflexboxでも使えるんだそう！
flexって縦方向の余白調整が面倒だったので、これは嬉しいです！早く他のブラウザにも実装してほしいですね〜。
セッションではgridとflexboxを組み合わせたデモも紹介されていました。
画像の例だと、上がgrid、下がflexboxでスタイリングされているのですが、いずれも単一のgapプロパティにより余白の設定がなされています。これは使い所によってはめちゃくちゃ強そうです。
CSS Houdini
CSSフーディーニと読みます。ポケモンのフーディンと同じく、アメリカで一番有名なマジシャンの名前が元ネタのようです。
こいつが一体何なのかについて、とても綺麗にまとめている記事があったので引用します。
ブラウザのレンダリングプロセスの中でJavaScriptがアクセス出来る範囲を広げ（APIの提供）、CSSの機能を拡張出来るようにしようというのがHoudiniです
引用: CSSのHoudiniとは何者か
※ちなみにこの記事には、以下でサラッと紹介するにとどまった3つのAPIについて、もう少し詳しい説明が書いてあります。みなさんぜひ読んでみてください。
Houdniだけでいくらでも記事書けちゃいそうなくらいの濃い内容なのでここでは深入りしませんが、jsでポリフィルつけるよりもパフォーマンスが良く、さらにスタイルの拡張性も高いのがHoudiniなのだそう。
ここで現時点でのAPI実装状況について確認できます。
2019年12月現在でまだほとんどのブラウザでサポートされていませんが、Chromeは既に3つのAPIに対応しています。
Property & Values API
CSSのカスタムプロパティにJSでアクセス出来ます。
これによって初期値やフォールバック値、親からスタイルを継承するか否か等をJSで指定できます。
さらに、これまでCSSだけでは実現できなかったビジュアルの再現も可能になります。
（この辺は本当に、テキストと静止画での説明じゃ全然ピンとこないと思うので、ぜひ動画をご覧ください）
これを将来的にはCSSだけで全て書けるようにするよ！だそう。すごいなあ……
Typed OM API
これまでJSでCSSのスタイル情報を取得しようとした場合、このように文字列が返ってきていました。
これを以下のように書き換えて、オブジェクトの形でスタイルのデータを取得するのがTyped OMです。
Paint API
Paint Workletと呼ばれるJSを使って、backgroundやborderに自由なグラフィックを設定できるというものです。
実際に見てみましょう！
paint(rainbowtize)とありますが、このrainbowtizeという描画処理を別途Workletで定義しているというわけです。Workletとは軽量版のWeb Workerのようなもので、Paint Workletの他にもいくつか種類があります（この記事ではそこまでは触れません）。
Paint Workletを使う利点としては、メインスレッドと別のスレッドでスクリプトが動くので、ページのパフォーマンスに影響を与えないこと！
Paint APIについてもっと詳しく知りたい方は、ICSさんのこちらの記事が大変素晴らしいので、ぜひ見てみてください。
どんな背景でも自由に描ける!CSS Paint APIの使い方
おわりに
いかがでしたか？
CSS Houdiniはかなりアツい内容でしたね、こんなに素敵な技術なんだから、きっと標準化も遠い未来の話ではありませんね！
……まあ、真面目に書くと、2016年にHoudini Task Forceで仕様策定が始まってから4年弱で、未だ全てのAPIを網羅するブラウザが存在しないことを考えると、まだまだ標準化までは長い時間が必要だとは思います。それでも、JSでより楽しく自由なマークアップができる未来がいつかくるのだと思うと、今から待ち遠しくってたまりません。マークアップだいすきクラブのみなさんも、ワクワクしちゃったのではないでしょうか。
今回はあんまり触れられなかったけど、いずれCSS Houdiniについて掘り下げた記事も書いてみたいな〜。
あ、ちなみに昨日は同じくChrome Dev Summit 2019のHTMLに関するセッションの記事を書きました！
そっちもぜひどうぞ！ HTML will never die but YOU will