Firefox.com, önişlemcisiz natif CSS ile yeniden inşa edildi ve CSS Zen Garden farkını kapattı

Firefox.com saf, natif CSS ile yeniden inşa edildi

Mozilla'nın amiral gemisi ürün sitesi Firefox.com, tamamen modern, natif CSS ile yazılmış bir stil sistemi kullanacak şekilde yeniden inşa edildi — Sass yok, önişlemci lehçesi yok. Bunları, çalışmayı Mozilla ve Lincoln Loop ajansıyla birlikte yürüten geliştirici Jo Sprague aktardı. Hacker News'in ana sayfasına ulaşan “The CSS Zen Garden dream, finally shipped” başlıklı bir blog yazısında Sprague, bu yeniden inşayı iki on yıllık eski bir vaadin gerçekleşmesi olarak çerçeveliyor: Dave Shea'nın CSS Zen Garden'ının bir zamanlar gösterdiği, içerik ile sunumun katı biçimde ayrılması.

Üretimde dağılan hayal

Sprague, Zen Garden'ı 2008'de, mezuniyetinden kısa süre sonra keşfettiğini anlatıyor. Proje, tek bir HTML dosyasının yalnızca CSS kullanarak bambaşka bir şeye dönüştürülebileceğini gösteriyordu — ve gerçekliğin tam da burada yoldan saptığını yazıyor. Dönemin tarayıcılarında CSS değişkenleri yoktu, mevcut özellikler eksiksiz bir tasarımı ifade edemiyordu ve geliştiriciler sunucu tarafı işlemeye, görsellere, tablo düzenlerine ve üst üste hilelere başvuruyordu; çabanın büyük kısmı tek bir tasarımın her tarayıcıda tutarlı davranmasını sağlamaya harcanıyordu. Sprague'a göre Zen Garden teoride neyin mümkün olduğunu kanıtladı; müşteri işlerini teslim etmek ise bambaşka bir hikâyeydi.

Bu farkı kapatmak yaklaşık iki on yıl sürdü ve Sprague ilerlemenin büyük kısmını son birkaç yıla bağlıyor: custom property'ler tarayıcılara gerçekten anladıkları değişkenleri kazandırdı, Grid ve Flexbox ortama uygun düzen sistemleri sundu ve bir zamanlar eksik olan özellikler artık var — hem de tasarımcıların onların etrafını dolanmak yerine doğrudan üzerine inşa edebileceği kadar tutarlı biçimde uygulanıyorlar.

Yeniden inşada neler teslim edildi

Firefox.com'da ekip, 70'ten fazla bileşen ve 25 sayfa şablonundan oluşan bir tasarım sistemi teslim etti; bunlar Wagtail bileşenleri olarak uygulandığı için sitenin içerik ekibi mühendis yardımı olmadan sayfalar oluşturabiliyor. Site şu anda 19 yerel ayarı destekliyor. Custom property'ler doğrudan tasarım dosyalarından dışa aktarılıyor, stiller tarayıcı hilelerine başvurulmadan tek seferde yazılıyor ve her modern tarayıcı eksiksiz deneyimi alıyor. Eski tarayıcılar ise siteyi kullanılabilir ve erişilebilir kılan minimal, markalı bir stil sayfası alıyor.

Dürüst bir dipnot: PostCSS ayakta

Sprague, üretime çıkan bir build aracının hâlâ kaldığını açıkça söylüyor: PostCSS yalnızca @import ifadelerini satır içine almak için çalışıyor; çünkü natif @import bazı tarayıcılarda zayıf performans gösteriyor ve bu ölçekte bir site, yaklaşım saflığı uğruna hızdan fedakârlık edemez. Sprague'a göre asıl ayrım noktası tam da bu olmalı ve herhangi bir “build adımı yok” iddiası bununla tanımlanmalı. Yazılan CSS sade ve kendi başına ayakta duruyor — içindeki hiçbir şey geçerli olmak veya anlam kazanmak için build gerektirmiyor — ve build adımı yalnızca tarayıcının aksi halde tek tek çekeceği dosyaları düzleştiriyor. Gerçek test şudur: yazdığınız kod tarayıcının kendi dili mi, yoksa derleme anında kaybolan bir lehçe mi?

Neden önemli

Firefox.com, bir tarayıcı hakkında olan ve açık webi 20 yıldır savlayan bir kuruluş tarafından inşa edilen bir site — ki Sprague bunun, platformun gerçekten hazır olup olmadığını sınamak için düşünülebilecek en iyi prova alanı olduğunu söylüyor. Proje, önişlemciler için pratik gerekçelerin büyük ölçüde buharlaştığına işaret ediyor: değişkenler, tema desteği ve sağlam düzen artık platform özellikleri ve bir tasarımcının kararları yol boyunca defalarca çevrilmeye gerek kalmadan üretime ulaşabiliyor. Sprague ayrıca daha geniş topluluğu — Nicole Sullivan, Rachel Andrew, Jen Simmons, Chris Coyier ve Eric Meyer'i adıyla anıyor — CSS'i bir ezber yığını değil bir sistem olarak görmeyi bir nesle öğrettikleri için anıyor. Ön uç yeniden inşası düşünen ekipler için çıkarım, araçların eskidiği değil; PostCSS'in tek bir performans düzeltmesi için hâlâ hakkını verdiği. Asıl çıkarım şu: doğruluk kaynağı artık her modern tarayıcının natif olarak anladığı standart CSS olabilir.