コロラド州デンバーに住む著者、アーティスト、ウェブ デベロッパーである Miriam Suzanne は、現在、Container Queries や Cascade Layers などの魅力的な CSS 仕様の開発に取り組んでいます。
この投稿は Designcember の一部です。web.dev がお届けするウェブデザインの祭典。
Miriam Suzanne はコロラド州デンバーに住む著者、アーティスト、ウェブ デベロッパーです。ウェブ代理店 OddBird の共同創設者、CSS Tricks のスタッフ ライター、Sass コアチームのメンバー、CSS ワーキング グループの W3C 招待エキスパートでもあります。最近は、カスケード レイヤ、コンテナクエリ、スコープといった CSS の新機能の開発に力を注いでいます。オフラインでの Miriam は小説家であり、劇作家であり、ミュージシャンでもあります。先ほど Sass や CSS と彼女の仕事についてお話ししました。
<ph type="x-smartling-placeholder">
Rachel: まず、グリッド フレームワーク Susy によるあなたの仕事について知ったのですが、なぜ Susy を作成したのですか？
Miriam: 2008 年当時、ウェブ上のレイアウトは大きく変わりました。開発者はテーブル レイアウトから、よりセマンティックな（ただし依然として面倒な）フローティング グリッドに移行しました。12 列の画一的な「グリッド フレームワーク」が急成長を遂げ、事前定義済みの（通常は静的な）グリッドに、事前定義された一連の CSS クラスを持たせることができるようになりました。もっとカスタマイズできるものが必要であれば、自力で考えました。ウェブサイトの応答性を高める必要があることは明らかでしたが、メディアクエリはまだ利用できず、Fluid フロートに関するブラウザの互換性に関する問題が数多く発生していました。
私は Natalie Downe の CSS Systems のアプローチを採用していました。この手法は、フォントサイズとビューポートの両方のサイズにうまく対応できる点でしたが、計算やブラウザのハッキングが繰り返されるのでイライラしました。それと同時に Sass が注目を浴び始めていたので、私が必要としていたものにぴったりでした。Susy の最初のドラフトはとてもシンプルで、計算と必要なハックを加えるためにいくつかのミックスインを追加するだけで済みました。目標としたのは、必要最小限のコードだけを出力することでした。事前定義されたクラスがない、完全にカスタマイズ可能なグリッド。
Rachel: CSS プリプロセッサから CSS 仕様の開発にシフトした経緯を教えてください。プリプロセッサの作業は、仕様を記述する良い背景だったと思いますか？
Miriam: 私の経験では重複がたくさんあり、それでもその分断の両面で活発に活動しています。しかし、その主な理由は Natalie Weizenbaum が率いる Sass チームのおかげです。同社は極めて長期的な視点で、開発中のウェブ標準とスムーズに統合できるツールを開発しようと努めています。画一的な「独自性」を超える中核となるウェブ標準の将来について考えるとき、長期的な柔軟性を念頭に置いたソリューションの構築と構築が不可欠です。
デベロッパーの多様なニーズとアプローチを尊重しながら、ユーザー補助やその他の重要な考慮事項を奨励、促進するツールを構築するにはどうすればよいでしょうか。
Rachel: CSS には、これまで Sass に含まれていた機能を基本的に置き換えるものがたくさんあります。Sass などを引き続き使用すべき理由は何か？
ミリアム: はい、人によってはそうですが、普遍的な答えはありません。変数の例を見てみましょう。Sass 変数は字句スコープで設定され、リストやオブジェクトなどの整理されたデータ構造、色操作など、サーバー上でコンパイルされます。これは、ブラウザで実行する必要のないデザイン システム ロジックに最適です。
CSS 変数には一部重複があり、値を保存することもできますが、カスケード ベースの長所と短所のセットはまったく異なります。Sass はカスタム プロパティを処理できず、CSS は構造化データを処理できません。どちらも便利で強力ですが、固有のニーズはさまざまです。
不要になったツールを排除でき、プロジェクトによってはサーバーサイドの変数とクライアントサイドの変数の両方が不要になるというのは素晴らしいことです。承知しました。しかし、2 つがまったく同じで、一方が他方を置き換えるだけだと仮定するのは簡単すぎます。それぞれの言語が本質的に同じ機能を提供するところまで来たとしても、設計ロジックの一部はサーバー側で発生し、一部はクライアント側で行われるユースケースが必ずあります。プリプロセッサは長期にわたって Google にあります。
Rachel: 標準の作成に関わったことで驚いたこと、そのプロセスについて一般的に認識されていないと思われることがあれば教えてください。
Miriam: 参加前は、標準プロセスは神秘的で魔法のようなブラック ボックスのように感じられ、何を期待できるのかわかっていませんでした。ブラウザ内部の知識が足りないのではないかと不安でしたが、実際のところ、ブラウザ エンジニアを増やす必要はありません。ウェブサイトやアプリケーションを構築するデベロッパーやデザイナーの増員が必要です。
驚いたことに、主要な標準作業の担当者は非常に少なく、ウェブサイトの開発や設計を主に行っている担当者はごくわずかでした。W3C はボランティアでしばしば組織から報酬が支払われますが、主な業務ではありません。また、メンバーシップも安価ではありません。その結果、参加者は日常のデザイナーやデベロッパー、特に小規模な代理店やフリーランスでクライアント業務をこなす人とは、疎外されてしまいます。招待されたエキスパートとしての私の役割は完全にボランティアであり、お金のかかる趣味です。ただし、その仕事のための資金が他になければ、
実際には、このプロセスは非常に公開されて一般に行われており、デベロッパーの関与が必要です。しかし、常に非常に多くの会話が一度に行われているため、自分の居場所を見つけるのが難しいことがあります。特に、日常業務ではない場合です。
Rachel: 長い間、多くのウェブ デベロッパーにとってコンテナクエリは至上目標でした。それが実現できることを大変嬉しく思います。多くの人がコンテナクエリの有用性について考えているように感じます。コンテナクエリの創造性もさらに高められる可能性があると思いますか？
Miriam: もちろんです。ただ、この 2 つはまったく別のものだとは思いません。時間は限られており、保守可能でパフォーマンスの高いコードを記述するよう努めています。現実的に行うのが難しいものは、創造力を発揮して可能性を発揮する可能性が低くなります。
それでも、ウェブ業界は企業の利益に大きく貢献しており、こうしたビジネス上の懸念事項はウェブ アーティストよりも常に長く続いています。機能の主要なユースケースとして、ウェブの創造性を無視すると、多くのものが失われます。CSS アートの仲間たちがコンテナクエリのプロトタイプを操作しているところを見るのをとても楽しみにしています。Jhey Tompkins さんは、古いアンチ CSS ミームの解説として、CSS ベネチアン ブラインドの巧妙でインタラクティブなデモを作成しました。この分野には探求すべきことがたくさんあると思います。他にどのようなアイデアが生まれるか、楽しみでなりません。
当初のユースケースとして、サイズベースのクエリにも重点を置いてきましたが、スタイルクエリ、つまり CSS プロパティまたは変数の値に基づいて条件付きスタイルを記述する機能がどのように使用されているのかを見るのが楽しみです。これは非常に強力な機能であり、これまでのところ、ほとんど活用されていません。クリエイティブな機会がさらに広がります。
Rachel: CSS では役に立たないもの（または今後実現する方法がある）で、役に立つと思われるものはありますか？
Miriam: これまで取り組んできた他の仕様にも、とても興味があります。カスケード レイヤを使用すると、作成者は具体性の問題をより細かく管理できます。また、スコープを使用すると、セレクタ ターゲティングをより正確に行うことができます。しかし、どちらもアーキテクチャ的な懸念事項です。私のアーティストが特に気に入っているのは、CSS の切り替え、インタラクティブなスタイルを作成するための宣言型方法、コンテナの「タイムライン」です。これにより、メディアやコンテナのブレークポイント間で値をスムーズに移行できます。これはレスポンシブ タイポグラフィにとって非常に実用的な意味を持ちますが、レスポンシブ アートやアニメーションのクリエイティブな機会も数多く生み出します。
Rachel: 他に誰が、今、ウェブで本当に面白くて面白いクリエイティブな仕事をしているのですか？
Miriam: どう答えられるかわかりませんね。さまざまな分野で創造的な仕事をしている人がたくさんいますね。CSSWG と Open-UI の両方で、断片化に関する取り組みを含め、多くの画期的な標準の取り組みが進行中です。しかし、私は多くの場合、ウェブ アーティストから、コマースとは直接関係のない方法で、人々がどのようにこれらのツールを制作に利用しているかを知ることができます。Jhey、Lynn Fisher、Yuan Chuan をはじめ、ウェブ テクノロジーが視覚的かつインタラクティブにできることの限界を押し広げようとしている多くの人々。ビジネス主体の仕事をしている人でも、芸術的テクニックから多くのことを学べます。
ウェブ、特にソーシャル メディアに求めるものについて再考を絶えず要求してくれる Ben Grader のような、より概念的なウェブアートにも感謝しています。たとえば、彼の新しい minus.social をチェックしてみましょう。
Rachel: css.oddbird.net で Miriam が取り組んでいる CSS の最新情報をチェックし、ウェブサイト miriam.codes と Twitter @TerribleMia で他の活動もチェックしてください。