Miriam Suzanne はコロラド州デンバーに住む作家、アーティスト、ウェブ デベロッパーで、コンテナクエリやカスケード レイヤなどの CSS 仕様の開発に取り組んでいます。
この投稿は Designcember の一部です。web.dev がお届けするウェブデザインの称号です。
Miriam Suzanne はコロラド州デンバーに住む作家、アーティスト、ウェブ デベロッパーです。ウェブ代理店 OddBird の共同創設者、CSS Tricks のスタッフ ライター、Sass コアチームのメンバー、CSS ワーキング グループの W3C 招待エキスパートでもあります。最近では、カスケード レイヤ、コンテナクエリ、スコープなどの CSS の新機能の開発に注力しています。オフラインでのミリアムさんは、出版済みの小説家、劇作家、ミュージシャンです。Sass と CSS との取り組みについてお話ししました。
Rachel: 「Susy」というグリッド フレームワークのおかげで、あなたの仕事について最初に知りました。なぜそれを作ったのですか？
Miriam: 2008 年当時、ウェブのレイアウトはまったく異なるものでした。開発者は、テーブル レイアウトから、よりセマンティックな（しかし依然としてハッキリした）フローティング グリッドに移行していました。画一的な 12 列の「グリッド フレームワーク」がブームとなり、事前定義の（通常は静的な）グリッドに、事前定義された CSS クラスのセットを提供するというものでした。もっとカスタマイズできるものが必要な場合は、独力で対処できます。ウェブサイトの応答性を高める必要があることは明らかでしたが、メディアクエリはまだ使用可能でなく、Fluid フロートに関するブラウザの互換性の問題が多数ありました。
Natalie Downe の CSS Systems アプローチは、フォント サイズとビューポート サイズの両方に対応することに巧みで対応していましたが、計算処理やブラウザのハッキング作業の繰り返しに不満を感じていました。それと同時に Sass も注目を集めるようになり、私が求めていたものにぴったりでした。Susy の最初のドラフトは非常にシンプルで、数個のミックスインで計算を行い、必要なハックを追加できました。目標は、最小限にして、重要なコードのみを出力することでした。事前定義されたクラスを使わずに、完全にカスタマイズ可能なグリッドを作成できます。
Rachel: CSS プリプロセッサの開発から CSS 仕様の作業にどのように移行したのですか？プリプロセッサの開発は、仕様書を作成するうえで良いバックグラウンドだったと思いますか？
Miriam: 私の経験では多くの共通点があり、今でもそのどちらにも積極的に取り組んでいます。それでも、特に Natalie Weizenbaum が率いる Sass チームのおかげだと思います。Sass は、ウェブ標準の開発にスムーズに統合するツールを開発しようと、非常に長期的な視点で取り組んでいます。ウェブの主要な標準規格の未来を考える際には、画一的な「独自性のある」ソリューションを推進し、長期的な柔軟性を取り入れることが不可欠です。
ユーザー補助機能やその他の重要な考慮事項を奨励し、促進すると同時に、開発者の多様性のニーズとアプローチを尊重するツールを構築するにはどうすればよいでしょうか。
Rachel: CSS には、これまで Sass の一部だった機能を基本的に代替する、さまざまな機能が組み込まれています。Sass のようなツールを引き続き使用する明確な理由はありますか？
Miriam: はい、一部の方には当てはまると思いますが、普遍的な答えはありません。たとえば、変数について考えてみましょう。Sass 変数のスコープは語彙単位であり、リストやオブジェクト、色操作などの整理されたデータ構造を使用して、サーバー上でコンパイルされます。これは、ブラウザで実行する必要のないシステム ロジックの設計に最適です。
CSS 変数には一部重複があり、値を格納することもできますが、カスケード ベースの長所と短所はまったく異なります。Sass はカスタム プロパティを処理できず、CSS は構造化データを実際に処理できません。どちらも便利で効果的ですが、特定のニーズは異なる場合があります。
不要になったツールをなくせるのは素晴らしいことです。プロジェクトによっては、サーバーサイド変数とクライアントサイド変数の両方が必要なくなることもあります。承知しました。しかし、両者が同一であると仮定するのは単純で、一方が他方を単純に取って代わるだけです。たとえ各言語が本質的に同じ機能を提供する段階に進んだとしても、設計ロジックの一部はサーバーサイドで、クライアント サイドで行うユースケースは常にあります。プリプロセッサは長期にわたって Google に含まれています。
Rachel: 標準化の取り組みに関わる中で、何か驚いたことや、そのプロセスについて一般の人たちが気付いていないと思うことはありますか？
Miriam: 標準プロセスに携わる前は、不思議で魔法のようなブラック ボックスのように思われ、何を期待できるのかわかりませんでした。ブラウザの内部に関する知識が足りないかもしれないのではないかと不安に思われましたが、実際にはブラウザ エンジニアを増やす必要がありません。そのため、実際にウェブサイトやアプリケーションを構築する開発者やデザイナーをより多く必要としています。
驚いたのは、関係者の中で標準を第一に考えている人は非常に少数で、ウェブサイトの開発や設計を主目的としている人もごく少数であることに驚きました。W3C は、参加団体の「ボランティア」で構成されており（多くの場合、その組織が有償しているが、主な仕事ではありません）、メンバーシップは安いものではありません。そのため、参加者は日常的なデザイナーやデベロッパーから遠ざかってしまいます。特に、小規模な代理店やフリーランスでクライアントとして仕事をする人たちは、そういった関わりがありません。招待エキスパートとしての私の役割は、外部からの資金提供が見つからなかったら、完全にボランティアで、お金がかかる趣味でした。
実際には、プロセスは公開的で公開されており、デベロッパーの関与が必要です。しかし同時に、常に非常に多くの会話が繰り広げられるため、どこに置くべきか迷うことがあります。特に、日々の仕事でなければなおさらです。
Rachel:コンテナクエリは、長年にわたり、多くのウェブ デベロッパーにとって究極の目標であり続けています。その成果をとても嬉しく思っています。多くの人がコンテナクエリの有用性について考えているように感じます。コンテナクエリの創造性も向上する可能性はあると思いますか？
Miriam: もちろんです。ただ、これらが完全に異なるわけではありません。私たちは皆、限られた時間の中で、保守可能でパフォーマンスの高いコードを記述しようと努めています。現実的に行うのが難しい場合、可能なことを使って創造性を発揮することは難しくなります。
それでも、ウェブ業界は企業の大きな利害関係によって支配されており、こうしたビジネス上の懸念は常にウェブ アーティストよりも配信時間が長くなっています。機能の主なユースケースとしてウェブの創造性を無視すると、多くの損失があると思います。CSS アートチームのメンバーがコンテナクエリのプロトタイプを実際に試しているのを見るのが、とても楽しみです。Jhey Tompkins は、古い反 CSS ミームに関する解説として、CSS のベネチアン ブラインドの巧みでインタラクティブなデモを作成しました。この分野で探求すべきことはたくさんあると思いますし、他の人たちがどんなことを考えてくれるのを見るのも楽しみです。
また、当初のユースケースとしてサイズベースのクエリにも焦点を当ててきましたが、スタイルクエリ（CSS プロパティや変数の値に基づいて条件付きスタイルを記述する機能）がどのように使用されるかを見るのが楽しみです。これは非常に強力な機能で、まだあまり検討されていません。創造の可能性をさらに広げられると思います。
Rachel: CSS でできないこと（または、近日中に実施される方法）で便利だと思われることはありますか？
Miriam: 他にも仕様にとてもワクワクしています。カスケード レイヤにより、作成者は詳細性の問題をより詳細に制御できるようになります。また、スコープはセレクタ ターゲティングの精度を高めるために役立ちます。ただし、どちらもアーキテクチャ上の大まかな懸念事項です。このアーティストは、インタラクティブなスタイルを作成する宣言型の方法である CSS の切り替えや、コンテナの「タイムライン」といった機能に期待しています。これにより、メディアやコンテナ ブレークポイント間で値をスムーズに遷移できます。これはレスポンシブ タイポグラフィにとって非常に実用的な意味を持ちますが、レスポンシブ アートやアニメーションの可能性も大きく広がります。
Rachel: 他に誰がウェブで面白い、面白い、クリエイティブな仕事をしているの？
Miriam: そうですね。そんなにいろいろな分野でクリエイティブな仕事をしている人がたくさんいるんですよね。どうお答えすればよいかわかりません。CSSWG と Open-UI では、断片化に関する作業を含め、数多くの画期的な標準が進行中です。それでも、ウェブ アーティストからインスピレーションが高まったことはよくあります。また、ウェブ アーティストがこうしたツールをどうやって制作に取り入れているのかを、コマースに直接関係のない方法で実感しています。Jhey、Lynn Fisher、Yuan Chuan など、ウェブ テクノロジーの視覚的およびインタラクティブ性の限界を押し広げる多くの人々。ビジネス主体の仕事をしている人でさえも、芸術的なテクニックから多くのことを学べます。
ウェブ、特にソーシャル メディアに何を求めているのか、常に再検討を迫られているベン グロッサーのようなウェブアートの概念的な存在にも感謝しています。たとえば、彼の新商品 minus.social をチェックしてみましょう。
Rachel: Miriam の CSS に関する取り組み（css.oddbird.net）と、彼女のウェブサイト（miriam.codes）と Twitter（@TerribleMia）で他の Miriam の最新情報を確認できます。