🎨 CSS Advent Calendar: Day 25 / Epilogue

Table of Contents

はじめに

ここまでの 24日間で、Web におけるスタイリングの需要から、CSS の登場とその考え方、エコシステムにおける CSS 思想史と設計論、新たな手段としての Cascade Layers や CSS Scope の標準化、そして今後の Web Design の在り方について記してきました。

最終日の今日は、これまでのエントリを踏まえて、Web における UI の在り方について、筆者なりに考察してみたいと思います。

The Future of Web UI is Declarative and more Exciting than Ever

本アドベントカレンダーを始めるにあたって、Web で「見た目」の構築が可能になるまでにどのような背景があったのか、他の選択肢ではなくなぜ CSS が、Cascade が標準となったのかの歴史を振り返りました。

ブラウザにさまざまな設定がされていても、OS やデバイスが多様でも、入力や出力が多岐に渡っても、どんなに新しい/古い文書でも、できる限り多くの人にコンテンツが届くように、Web は設計されています。

そんな「未知で無限に広がる領域」とも言える Web というキャンバスで、「見た目」をコントロールする — 「アンコントローラブルに等しいものをコントロールしたい」という欲求に、これまで約 30年応え続けてきたのが、 CSS です。

この矛盾する状況で、「CSS がどのような進化をしてきたのか」以前に、「何が CSS の進化を可能にした要因だったのか」を理解することは、これからの CSS の進化の方向性を考えるヒントになるかもしれない。そう思って、今回のアドベントカレンダーでは、CSS の始まりから丁寧に辿ってきました。

「Hints であり Suggestions であり Influence するもの」という CHSS の思想。これは、CSS、そしてその根幹となる Cascade にも強く影響を与える考え方でした。

CSS を取り巻くエコシステムの変化としては、モバイルの登場を切り口に、SPA の普及、JavaScript フレームワークの隆盛、詳細度に基づいたさまざまな設計思想を取り上げました。 こうしたエコシステム変化に対して、より柔軟になるために、Cascade Layers や CSS Scope、Container Queries が標準のソリューションとして登場しました。

今回は「モバイル」というたった一つの切り口から連鎖した、CSS の思想の歴史を見てきました。 ただ、これは、Web を取り巻く社会情勢や思想の変化の一つに過ぎません。 こうした社会情勢や思想の変化を Web が、CSS が捉え続けていくことは、Web が多くの人に使われるものである以上、避けられないものです。

そんな、「アンコントローラブルな制約」に対して、「Hints」という CSS の思想は、「Declarative」な言語特性として表れ、変化に対応する柔軟な進化の土台であり続けてきました。

この柔軟な土台の上に、昨今の Web UI を取り巻く著しい変化は起こっています。

本連載では CSS にフォーカスしてきましたが、State of CSS/HTML や What’s New in Web UI/CSS などを俯瞰すると、Web UI 全般におけるこの傾向は明らかです。

例えば、HTML においても、<dialog>, <details>, <summary>, Customizable Select, Popover API, Command/Interest Invokers などの機能が登場し、より多くの UI パターンがネイティブにサポートされるようになっています。 CSS では、Cascade Layers, @scope, Container Queries, :has(), subgrid, @property, @when & @else, @if, @function, @mixin など、よりパワフルで柔軟なスタイリングを可能にする機能が登場しています。

こうした機能により、あらゆる状況での適切なレイアウトやサイズ、状態の管理、アクセシビリティ機能の担保、一貫したデフォルトの表示が、ブラウザに担われることが可能になってきています。 これにより、今まで必要だった JavaScript を削減でき、堅牢で一貫した動作を保証し、パフォーマンスを向上させ、より多くの人がアクセス可能な UI を構築できるようになります。

そして、これらは、Declarative な Web プラットフォームへの根本的な変化を体現しているものだと思います。

Declarative な UI の進化がこれからがさらに加速する、そのパーツとなる機能が今、プラットフォームには整い始めています。

Declarative Design の考え方を連載の最後に取り上げたのは、CSS が示してくれた「Hints」である「Declarative」であるという考え方が、未来の Web UI を考える上でのチェックポイントになると、筆者自身が期待しているからです。

HTML や CSS だけではなく、Web を構成するさまざまな技術や個人や組織が協力し合い、Web をみんなために、より良いものにしていく。 そのひとつとして、よりパワフルで、より堅牢で、より多くの人に届く、魅力的な UI を創造していける Web の未来に、とても心が躍らされます。

「CSS」という非常に広範なテーマを扱ったため、書ききれなかったことも多く、抽象度の高い話もあったかもしれませんが、このアドベントカレンダーを通じて、少しでも得られるものがあったのであれば幸いです。

今後もまた違う形で、Web UI の動向を追っていければと思います。

saku