CSS polyfill とその未来

[Meguro.css #12](https://megurocss.connpass.com/event/354285/) で話したスライドです。

スピーカーノート
---

前回のmegroesが終わって2次会的なところに行った時にちょうどこの話をしてたんですよね。
なんでCSSにpolyfillが無いのかとかあったらいいのにねとか。
それからしばらくして、いろいろなきっかけもあり調べる機会があったのでお話させていただこうと思います。
というわけでCSS polyfillについて話します。よろしくお願いします。

簡単に自己紹介を、ken7253というディスプレイネームで活動しています。数字の部分は読まなくていいです。
どちらかというとブラウザとか標準まわりが好きでそういう勉強会もやったりしてます。

はい本題です、みなさんCSSの最新機能はプロダクション環境で使えてますか？
まあやんごとなき理由っで難しいってこともありますが最近は良い基準がありますよね。

はいBaselineです。

Baselineではこれだけの機能がWidely availableとして広く使えるものとして定義されています。
まあただこれはあくまで指標を提示してくれるのであって使えなかった機能を使えるようにはしてくれません。

一方で（自分は）JSを書くとき互換性をあまり気にしたことは無いです、それはなぜでしょうか？

JSを生で書くというのは最近はめっきり減ってきて、トランスパイルやバンドルの処理を挟むことが多くなってきていますね。
そのような中でTSがダウンレベリングをしてくれたり、core-jsのpolyfillを自動的に入れてくれたりとかそういうことが行われていて、使えない機能を静的解析で弾いてくれるたりして（正しく環境構築していれば）JSは互換性を気にするコストというのは殆ど無いというのが現実じゃないかなと思います。

一方でCSSはどうでしょうか？古くはCSS変数や:hasなどがpost-cssのプラグインやSass等で提供されていましたがこれはトランスパイルであり対応範囲には限界があります。
静的解析でエラーを出してくれるのはありますがランタイム上（ブラウザ）の動的な処理を補完してくれるわけではありません。

はい、前提の共有は終わったのでなぜCSSのPolyfillは実現が難しいのか考えていきましょう。

例として新しいプロパティ`new-feater`のpolyfillを作ることを考えます。
この時CSSというのはまず、未知のプロパティを無視しますね。

そうするとまずはこの図のCSS parserに介入できるようになれればよさそうって感じです。
HTMLのpolyfillはWCで作られてたりするのでcustomElementRegistryみたいに事前に登録しておくとかでもいいかもしれません。

はいじゃあCSS Parserに介入（フック）できたら、処理をJS側に移譲して色々出来そうですね。
独自のセレクターとかも作れそうだし、独自のアットルールとかも作れそうな気がします。
ただこれだけだとレイアウトとかに介入するのは厳しいかもしれません。

というわけで次にカスタムペインティングとでも言いましょうか、レンダリングに関与できるAPIがあるといいですね。
そうするとかなりCSS polyfillというのは現実的になってくるんじゃないかなと思っています。
なんかそういうAPIあったらいいな…無いかな…

というわけで自分がこれを調べるきっかけになった記事があるのでぜひ読んでほしいという話でした。
Houdiniが再始動することに心躍らせながらいきていこうかなと思います。
ちょっとここではかなり雑な説明しか出来なかったので興味がある人は後で話しかけてください！ありがとうございました！！