ネイティブCSSでFirefox.comを再構築

MozillaとLincoln Loopは、プレプロセッサなしのモダンなネイティブCSSを使用してFirefox.comを再構築し、2008年のCSS Zen Gardenの夢を実現しました。当時、CSSのプロパティが限られていたため、ブラウザのレンダリングの不一致により、ハック、サーバーサイド処理、およびテーブルベースのレイアウトに依存する必要がありでした。

今日、カスタムプロパティ、Grid、Flexboxがその差を埋め、クリーンで再利用可能なデザインシステムを実現しています。Firefox.comの再構築には、70以上のコンポーネントと25のページテンプレートがWagtailコンポーネントとして含まれ、19のロケールをサポートし、エンジニアリングの帮助なしでページを组装する_contentチームがあります。

PostCSSは、パフォーマンスの問題により、@importステートメントをインライン化するためにのみ本番環境で使用され、執筆されたCSSはプレビルドステップ不要の純粋なネイティブCSSです。

このプロジェクトは、ブラウザが now デザイナーが書く言語を話すことを確認し、20年間のビジョンを実現しました。主要な影響力には、Nicole Sullivan、Rachel Andrew、Jen Simmons、Chris Coyier、Kasey Kelly、Eric Meyerがおり、彼女の現代CSSの思考を形成しました。核心的な価値は、正しい選択が容易であるデザインシステムであり、デザイナーの意図が直接生産に流れます。

主要エンティティ:

企業: Mozilla, Lincoln Loop

人物: Dave Shea, Nicole Sullivan, Rachel Andrew, Jen Simmons, Chris Coyier, Kasey Kelly, Eric Meyer, Jo Sprague

よくある質問:

質問: Firefox.comの再構築において「プレプロセッサなし」とは何を意味しますか？

回答: 執筆されたCSSはブラウザが直接理解できる純粋なネイティブCSSであり、PostCSSはパフォーマンスの理由で本番環境での@importステートメントのインライン化にのみ使用され、核心的なスタイル言語を変換するものではありません。