IE後のCSSとUXPとCEP
最近CSSの進化がすごいですね。カスケードレイヤー、コンテナクエリ、sin、cos関数と次々と大幅な機能が追加されています。IEのサポートが終わって以来IEを意識する必要が無いため今後新しいCSSがどんどん取り入れられるでしょう。
今後どんどん使われれそうなCSS
任意の要素の幅などを分岐点として特定の要素のCSSを変えることができるようになるコンテナクエリ、CSSの入れ子がSass無しでもできるCSSネスト、簡素に中央の配置ができるdisplay:gridのplace-content: centerなど色々あります。複雑なレイアウトを組むわけでなくてもCSSネストなんかは特別な環境設定を行わずにCSSを書くのが楽になるためあらゆる面で使われるでしょう。以下簡単なサンプルです。
CSS ネスティング
UXPとかCEPではどうなのか
問題が今後のAdobeの拡張機能系ではどうなるのかですが恐らくフロントエンドの進化の速さに対してUXPもCEPも当分は遅れをとったままになるでしょう。まずCEPは過去の記事でも取り上げましたが2021年頃のChromiumがベースになっています。UXP移行期を考えるとここから大幅に進化するのは考えにくです。よって上記のもしくは今後でてくる最新の機能が使えるのは期待薄です。
問題がUXPですが2023年7月現在いまだにgrid-layoutすら対応していないので上記の機能が使える日はかなり先になりそうです。一応UXP7.2くらい？に大きな進化があるとは聞いてますがそれでもまだまだモダンブラウザ環境には全く及ばないでしょう。
UXPのCSS関係の欠陥
それ以外にもUXPには現在デフォルトでSpectrum UXPが使えますがこれがまた厄介でtext formがz-indexを無視するなど致命的なバグがいくつかあります。CSS変数でもsetPropertyメソッドがなぜか効かないなど大きなバグが残っています。参考 Set CSS Property per JS
これからのCSS
今後UXPなんかのシステムとモダンブラウザの環境の隔離が大きくなると有名なCSSフレームワークが全く使えない、ググった記事を元にUIを作ろうとしたけど全く動かないといった場面がかなり増えるでしょう。初心者から既存のパーツを作って一からUIを開発する手間を省きたい熟練者も多くの壁にぶつかることになります。一応UXPではSpectrum Web Componentのサポートに向けて進んでいますがまだ時間がかかりそうなのと将来Spectrum Web Component以外のフレームワークがほとんど使えないということもあり得ます。少なくともUXPが本格的に多くのアプリケーションに導入されるまではこの状況は続きそうです。
モダンブラウザ上だったらJSからもCSS変数をコントロールできる。