Перестройка Firefox.com с помощью нативного CSS

Mozilla и Lincoln Loop перестроили Firefox.com, используя современный нативный CSS без препроцессоров, реализуя мечту CSS Zen Garden 2008 года. В то время ограниченные свойства CSS вынуждали полагаться на хаки, обработку на стороне сервера и верстку на основе таблиц из-за несогласованности отображения браузерами.

Сегодня кастомные свойства, Grid и Flexbox закрыли этот разрыв, обеспечивая чистые, многократно используемые системы дизайна. Перестройка Firefox.com включает более 70 компонентов и 25 шаблонов страниц как компоненты Wagtail, поддерживающие 19 локалей, при этом команды контента собирают страницы без помощи инженеров.

PostCSS используется только в продакшене для инлайн-импорта @import-запросов из-за проблем с производительностью, в то время как написанный CSS — это чистый нативный CSS, не требующий шага сборки для валидности.

Проект подтверждает, что браузер теперь говорит на языке, который пишут дизайнеры, реализуя видение на два десятилетия. Ключевые влияния: 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-запросов по соображениям производительности, а не для преобразования основного языка стилей.