Miriam Suzanne は、コロラド州デンバーを拠点とする著者、アーティスト、ウェブ デベロッパーです。現在は、コンテナクエリやカスケード レイヤなどのエキサイティングな CSS 仕様に取り組んでいます。
この記事は Designcember の一部です。web.dev がお届けするウェブデザインの祭典です。
Miriam Suzanne は、コロラド州デンバーを拠点とする著者、アーティスト、ウェブ デベロッパーです。OddBird（ウェブ エージェンシー）の共同創業者、CSS Tricks のスタッフ ライター、Sass コアチームのメンバー、CSS ワーキング グループの W3C 招待専門家です。最近は、カスケード レイヤ、コンテナ クエリ、スコープなどの新しい CSS 機能の開発に注力しています。オフラインでは、小説家、劇作家、ミュージシャンとして活躍しています。Sass と CSS を使用した彼女の仕事について話しました。
Rachel: 私は、あなたのグリッド フレームワーク Susy で初めてあなたの作品を知りました。それを作成するきっかけは何でしたか？
Miriam: 2008 年当時、ウェブのレイアウトは現在とはまったく異なるものでした。デベロッパーは、テーブル レイアウトからよりセマンティックな（ただし、まだハック的な）フロート グリッドに移行していました。12 列の「グリッド フレームワーク」がブームになりました。これは、事前定義された（通常は静的な）グリッドと、事前定義された CSS クラスのセットを提供するものです。カスタマイズ可能なものが必要な場合は、自分で用意する必要がありました。ウェブサイトのレスポンシブ対応の必要性は明らかでしたが、メディアクエリはまだ利用できず、流動的なフロートに関するブラウザの互換性の問題が多数ありました。
私は Natalie Downe 氏の CSS Systems アプローチを使用していました。これはフォントとビューポートの両方のサイズに対応する賢い方法でしたが、必要な数学的計算とブラウザ ハックの繰り返しに不満を感じていました。同時に、Sass が注目を集め始めており、私のニーズにぴったりでした。Susy の最初のドラフトは非常にシンプルでした。必要な計算を行い、ハックを追加するミックスインが 2 つだけでした。最小限のコードのみを出力することを目標としました。事前定義されたクラスのない、完全にカスタマイズ可能なグリッド。
Rachel: CSS プリプロセッサの開発から CSS 仕様の開発に移行した経緯を教えてください。プリプロセッサの作業は仕様書の作成に役立ちましたか？
Miriam: 私の経験では、多くの重複があり、私はその境界の両側で非常に活発に活動しています。しかし、これは主に Natalie Weizenbaum 氏が率いる Sass チームのおかげだと思います。Sass チームは、ウェブ標準の開発とスムーズに統合できるツールを開発しようと、非常に長期的な視点を持っています。コア ウェブ標準の将来を考えるうえで、万能の「意見の強い」ソリューションを超えて、長期的な柔軟性を構築することが不可欠です。
デベロッパーの多様なニーズやアプローチを尊重しながら、ユーザー補助などの重要な考慮事項を促進し、容易に実現できるツールを構築するにはどうすればよいでしょうか？
Rachel: CSS には、従来 Sass の一部であった機能を置き換えるものがたくさんあります。Sass のようなものを使用し続けるべき強い理由がありますか？
Miriam: はい、一部の人にはそうですが、普遍的な答えはありません。たとえば、変数を考えてみましょう。Sass 変数は字句スコープで、サーバーでコンパイルされ、リストやオブジェクトなどの整理されたデータ構造、色の操作などが行われます。これは、ブラウザで実行する必要のないデザイン システムのロジックに最適です。
CSS 変数には重複する部分があり、値を保存することもできますが、カスケードに基づく強みと弱みはまったく異なります。Sass はカスタム プロパティを処理できず、CSS は構造化データを処理できません。どちらも便利で強力ですが、具体的なニーズは異なる場合があります。
不要になったツールを削除できるのは素晴らしいことです。プロジェクトによっては、サーバーサイドとクライアントサイドの両方の変数を必要としない場合もあります。承知しました。しかし、それらが同一であり、一方が他方を置き換えるだけだと考えるのは単純すぎます。言語が本質的に同じ機能を提供するようになったとしても、サーバーサイドで実行される設計ロジックとクライアントサイドで実行される設計ロジックのユースケースは常に存在します。プリプロセッサは長期的に使用されます。
Rachel: 標準の作成作業に携わる中で、驚いたことや、一般的に知られていないと思われるプロセスについて教えてください。
Miriam: 参加する前は、標準化プロセスは謎に包まれた魔法のブラック ボックスのように感じられ、何が起こるかわかりませんでした。ブラウザの内部構造に関する知識が不足していて貢献できないのではないかと心配していましたが、実際にはブラウザ エンジニアは必要ありませんでした。ウェブサイトやアプリケーションを開発しているデベロッパーやデザイナーがもっと必要です。
驚いたことに、標準に主に焦点を当てている人はほとんどいませんでしたが、ウェブサイトの開発や設計を主に担当している人もほとんどいませんでした。W3C は、会員組織の「ボランティア」（多くの場合、組織から給与が支払われますが、主な仕事ではありません）で構成されており、会員資格は安くありません。そのため、特に小規模な代理店でクライアントの仕事をしている人やフリーランスの人は、日常的にデザインや開発を行っている人から外れてしまいます。招待されたエキスパートとしての私の役割は、その仕事のための外部資金を見つけなければ、完全にボランティアの、高価な趣味になっていたでしょう。
実際には、このプロセスは非常にオープンで公開されており、デベロッパーの関与が必要ですが、同時に多くの会話が行われているため、自分の居場所を見つけるのが難しい場合があります。特に、それが本業でない場合はなおさらです。
Rachel: コンテナ クエリは、長年にわたり多くのウェブ デベロッパーにとっての聖杯でした。この機能が追加されることを非常に楽しみにしています。多くの人がコンテナ クエリの有用性について考えていると思いますが、コンテナ クエリには創造性をさらに引き出す可能性もあると思いますか？
Miriam: もちろんです。ただし、それらを完全に別個のものとは考えていません。時間は限られています。メンテナンスしやすくパフォーマンスの高いコードを作成しようとしています。実際に何かを行うのが難しい場合、可能なことについて創造性を発揮する可能性は低くなります。
それでも、ウェブ業界は現在、大企業の利益が支配しているため、ウェブ アーティストよりも常にビジネス上の懸念が優先されます。ウェブの創造性を機能の主なユースケースとして無視すると、多くのものを失うと思います。CSS アートのユーザーがコンテナ クエリのプロトタイプを試しているのを見て、とても嬉しく思っています。Jhey Tompkins 氏は、古い反 CSS ミームに対するコメントとして、特に巧妙でインタラクティブな CSS ベネチアン ブラインドのデモを構築しました。この分野にはまだ探求すべきことがたくさんあると思います。今後、どのようなアイデアが生まれてくるのか楽しみです。
会話は、元のユースケースであるサイズベースのクエリにも焦点を当てていますが、スタイルクエリ（CSS プロパティまたは変数の値に基づいて条件付きスタイルを記述する機能）をユーザーがどのように活用するのか、とても楽しみです。これは非常に強力な機能ですが、これまでほとんど活用されていませんでした。クリエイティブな機会がさらに広がると思います。
Rachel: CSS でできないこと（または、今後できるようになること）の中で、有用だと思われるものはありますか？
Miriam: 私は、取り組んでいる他の仕様についても非常に楽しみにしています。カスケード レイヤを使用すると、著者は特異性の問題をより細かく制御できます。また、Scope を使用すると、セレクタのターゲットをより正確に設定できます。ただし、これらはどちらもアーキテクチャの概要に関する懸念事項です。アーティストとしての私は、CSS トグル、インタラクティブなスタイルを作成するための宣言型、コンテナの「タイムライン」など、メディアやコンテナのブレークポイント間で値をスムーズに移行できる機能に期待しています。これはレスポンシブ タイポグラフィに非常に実用的な意味合いを持ちますが、レスポンシブ アートやアニメーションのクリエイティブな可能性も大きく広げます。
Rachel: 今、ウェブで本当に面白い、楽しい、クリエイティブな仕事をしている人は他にいますか？
Miriam: うーん、どう答えたらいいかわからない。クリエイティブな仕事をしている人は、さまざまな分野にたくさんいるから。CSSWG と Open-UI の両方で、フラグメンテーションに関する取り組みを含め、多くのエキサイティングな標準化作業が進行中です。しかし、私はウェブ アーティストからインスピレーションを得ることが多く、彼らがこれらのツールを商業に直接結びつかない方法で制作に活用している様子に感銘を受けます。Jhey、Lynn Fisher、Yuan Chuan など、ウェブ技術で視覚的かつインタラクティブにできることの限界を押し広げている多くの人々がいます。ビジネス主導の仕事をしている人でも、芸術的なテクニックから多くのことを学べます。
また、Ben Grosser などのコンセプト重視のウェブアートも高く評価しています。彼は、ウェブ、特にソーシャル メディアに何を求めているのかを再考するよう私たちに促し続けています。たとえば、彼の新しい minus.social をご覧ください。
Rachel: Miriam の CSS に関する活動については css.oddbird.net をご覧ください。また、彼女のウェブサイト miriam.codes と Twitter アカウント @TerribleMia では、彼女のその他の活動についてもご確認いただけます。