CSS Zen Garden projesi

 (csszengarden.com)
2 puan yazan GN⁺ 2025-04-28 | 1 yorum | WhatsApp'ta paylaş
  • CSS Zen Garden, aynı HTML belgesinin yalnızca CSS tabanlı tasarım ile tamamen farklı bir görsel deneyime dönüşebileceğini gösteren bir demo projesidir
  • Tasarım listesinden bir stil sayfası seçildiğinde HTML aynı kalır, yalnızca harici CSS değişir ve sayfanın render edilme biçimi farklılaşır
  • Katılımcılar örnek HTML/CSS dosyalarını indirip yerelde çalışır, ancak gönderim sırasında yalnızca stil sayfasını değiştirebilir
  • Tamamlanan CSS dosyası ve ilgili varlıklar kendi web sunucularına yüklenip bağlantı olarak gönderilir; seçilen çalışmalar CSS Zen Garden sunucusuna dağıtılır
  • Deneysel özelliklerden çok pratik CSS önceliklidir; doğrulanabilir CSS ile IE9+ ve güncel Chrome, Firefox, iOS, Android tarayıcılarında çalışması gerekir

Aynı HTML'yi tamamen farklı gösteren bir CSS deneyi

  • CSS Zen Garden, CSS'in ifade gücünü göstermek için hazırlanmış bir demodur
  • Kullanıcılar tasarım listesinden istedikleri öğeyi seçip ilgili stil sayfasını mevcut sayfaya uygulayabilir
  • Temel kısıt, HTML'yi değiştirmeden yalnızca harici CSS dosyasını değiştirmektir
    • Aynı belge yapısı korunurken yalnızca görsel sonuç değişir
    • Tasarım ve kodlamanın web'in görsel olanaklarını ne kadar ileri taşıyabileceğini gösterir
  • Katılımı ve ilhamı teşvik eden, CSS ile gerçekten uygulanabilir sonuçların paylaşıldığı bir öğrenme projesi olarak görülebilir

Katılım yöntemi ve gönderim akışı

  • Katılımcılar güçlü bir görsel tasarım anlayışı ve CSS becerileri ile bu sayfayı yeniden tasarlar
    • Örnek dosyalarda yorumlar bulunduğundan CSS'e yeni başlayanlar için de bir başlangıç noktası olabilir
    • İleri seviye eğitimler ve ipuçları CSS Resource Guide içinde sunulur
  • Çalışma, örnek HTML ve CSS dosyaları indirilerek yerel bir kopya üzerinde yapılabilir
  • Göndermek için tamamlanan CSS dosyası ve ilgili varlıklar, katılımcının kontrol ettiği bir web sunucusuna yüklenmeli ve gönderim bağlantısı üzerinden iletilmelidir
    • Yarım kalmış çalışmaların gönderilmesi önerilmez
    • Seçilen gönderiler CSS Zen Garden ekibi tarafından indirilip sunucuya dağıtılır
  • Katılımın karşılığı; takdir görmek, ilham vermek ve CSS'in olanaklarını gösteren paylaşılan bir kaynağa katkıda bulunmaktır

CSS gereksinimleri ve lisans

  • Gereksinimler, en yeni deneysel özelliklerden çok işlevsel ve pratik CSS üzerine kuruludur
    • Mümkün olan yerlerde CSS 1 & 2 kullanımı tercih edilir
    • CSS 3 & 4, geniş destek gören ögelerle sınırlandırılmalı ya da güçlü alternatifler sunulmalıdır
    • CSS doğrulamadan geçmelidir
    • Güncel user agent'lar ve mobil ortamlar hesaba katıldığında tüm platformlarda piksel düzeyinde aynı düzeni sağlamak zor olabilir
    • Tasarım en az IE9+, güncel Chrome, Firefox, iOS ve Android tarayıcılarında çalışmalıdır
  • Gönderiler özgün çalışmalar olmalı ve telif hakkı yasalarına saygı göstermelidir
    • Rahatsız edici olabilecek materyaller en aza indirilmelidir
    • Bahçe temalı tasarımlar zaten yeterince fazla olduğundan, özgün ve ilgi çekici görsel temalar önerilir
  • Grafiklerin telif hakkı gönderende kalır; ancak CSS, başkalarının öğrenme amacıyla kullanabilmesi için siteyle aynı Creative Commons BY-NC-SA 3.0 lisansı altında yayımlanmalıdır

İlgili okumalar

1 yorum

 
GN⁺ 2025-04-28
Hacker News yorumları

  • Bunun yapıldığı dönemde web geliştirme yapmamış biri için kolay fark edilmeyen bir bağlam var.
    CSS öncesinde düzen oluşturmak için table öğeleri ızgara gibi kötüye kullanılır, görseller parçalara bölünüp her hücreye yerleştirilirdi. Bugün bunu bir ölçüde hatırlıyoruz ama o dönemde CSS’ye yönelik tepki epey unutulmuş gibi.
    Mevcut durumdan memnun olup CSS öğrenmek istemeyen çok sayıda web geliştiricisi vardı ve “CSS ile ancak sıkıcı, kutu kutu tasarımlar yapılabilir” miti inatla sürüyordu. Dave Shea, CSS Zen Garden ile harika tasarımları bir araya getirip göstererek bu iddiayı fiilen bitirdi; öyle ezici bir zaferdi ki, artık böyle bir tartışmanın yaşandığı bile unutulmuş olması ilginç.

    • Erken dönem CSS bugünkünden çok daha yetersizdi. border-radius bile ancak 2011 civarında geldi; nispeten basit sayılabilecek https://90s.dev/ gibi bir site bile modern CSS ile https://90s.dev/style.css baz alındığında yaklaşık 420 satır gerektiriyor.
      Üstelik nesting ve oyunun kurallarını değiştiren :has bolca kullanıldığı hâlde. O dönemde CSS’in temel sınırlamaları yüzünden, sezgisel olarak yapılamayan şekilleri gerçekleştirmek için hem CSS’i hem de HTML yapısını değiştirmek zorunda kaldığımı hatırlıyorum.
    • İlk dönemlerde table kullanılmasının nedeni, birden fazla tarayıcıda CSS ile düzgün hizalama yapmanın kâbus olmasıydı. Pahalı bir kâbustu; HTML’i sık sık baştan aşağı değiştirmeye bütçesi yeten, iyi finanse edilmiş bir startup iseniz sorun değildi sadece.
    • Tam zamanını net hatırlamıyorum ama yeni ortaya çıkan CSS’in daha karmaşık yerleşimler oluşturmak için yetersiz kaldığı bir dönem vardı. Flexbox yoktu, grid’den söz etmeye bile gerek yok.
      CSS Zen Garden’ın o noktada CSS ile nereye kadar gidilebileceğini göstermek için var olduğunu düşünüyorum.
    • Table öğeleriyle ızgara yapmanın gerçekte ne kadar yanlış olduğunu hiç anlayamadım. Bazı uygulamalar için anlamlı olan “semantik HTML” meselesi dışında pek bir şey göremiyorum.
    • CSS’e yönelik tepkiyi hatırlamıyorum ama yazı tipi stilleri için biraz CSS kullanırken yerleşim için table kullanan sitelerin yaygın olduğunu hatırlıyorum. Bu tepki değil, pratiklikti.
      Kararlı ve öngörülebilir bir ızgara gerekiyorsa table layout kullanılırdı; özellikle sıkışık ve karmaşık yerleşimlerde bu daha da geçerliydi. Yalnızca navigasyonun table layout olduğu durumlar da yaygındı ve o dönemin hedefi piksel mükemmelliği idi.
      2000 civarındaki spacer öğesini hatırlıyor musunuz? Sonunda tutunamadı; piksel GIF daha yaygın ve öngörülebilirdi.
      2014’te flexbox yaygınlaşana kadar CSS float düzenleri tabak çevirmeye benziyordu. Boş div’ler ile içinde içerik olan div’ler farklı davrandığı için insanı bezdirirdi; o zamanı geri alamam ama en azından parasını aldım.
      Erken dönem CSS’in havalı “Zen Garden” yerleşimlerini kolayca sunduğu fikri benim deneyimimle örtüşmüyor. Yalnız ben eğlenceli sanat siteleri değil, bilgi/medya siteleri yapıyordum.

  • Bu site eski; hem de iyi anlamda eski.
    2000’lerde benim için kültür şoku olmuştu ve Microsoft ASP.NET’ten uzaklaşıp Linux üzerinde uygulama geliştirmeye yöneltti. Inline style parametreleri olan “server controls” yaklaşımının tamamen yanlış, deyim yerindeyse “internet karşıtı” bir yol olduğunu fark ettim.
    Dojo JS’i yapan Alex Russell bir konferansta bu bakış açısını göstermişti; teknoloji haberlerini Microsoft kanalları üzerinden takip ederken ne kadar çok bilgiyi kaçırdığıma şaşırmıştım.
    Birkaç yıl boyunca araçlarım Web.py, HTML, JS ve CSS civarındaydı; ardından jQuery, Backbone, Underscore geldi, sonra React ve TypeScript yine yeni “full-stack” yaklaşımı hantallaştırmış gibi hissettirdi.

    • Böyle uygulamaları ASP.NET’te yapmanı engelleyen şeyin ne olduğunu bilmiyorum. ASP.NET bunu engellemiyordu; stylesheet oluşturmak ve JS dosyalarını ayırmak da mümkündü.
      İronik biçimde eski olan yeniden yeni oldu. Next.js tarafında view state yeniden yapılıyor; Tailwind inline styling’i, shadcn ise React bileşenlerini kullanıyor; neredeyse tam bir tur atılmış durumda.
    • Artık Svelte var; biraz “akıllı” bir full-stack olarak görülebilir.
    • O hâlâ çevrimiçi duruyor. Eski bir kalıntıya yakın ama https://www.ajaxtoolkit.net/ adresinde görülebilir. Drag panel’i olmayan enterprise yazılım yoktu.
      Bir süre semantik markup ve CSS öndeydi ama güncel trendleri kontrol etmeye bile ilgim kalmadı. “JavaScript içindeki HTML” (JSX) civarında ilgimi kestim.
    • ASP ve PHP ile başladım; ASP.NET daha çok Visual Studio geliştiricilerinin kaba saba web uygulamaları yapmasına yardım eden bir yapıdaydı ve geniş anlamdaki web’e uymuyordu.
      Linux’a geçmeye de gerek yoktu. IT departmanı Linux masaüstüne izin vermediği için her şeyi Windows’ta geliştirip hem Windows hem Linux sunucularına dağıtıyordum.

  • CSS Zen Garden’ın özü, semantik HTML’den en iyi şekilde yararlanırsanız sunumu ve içeriği ayırıp tamamen bağımsız şekilde ele alabileceğiniz düşüncesiydi gibi geliyor.
    Bugün de Zen Garden seviyesine kadar bu hâlâ mümkün ama aslında CSS’in sınırları içinde hareket ediyorsunuz. Akış daha çok “CSS bunu yapabildiği için böyle bir tasarım yapıyorum” şeklinde; “ben böyle bir tasarım istiyorum, o yüzden şu CSS’i kullanıyorum” değil.
    Yalnızca DOM’u doğrudan değiştirerek mümkün olan pek çok stil seçimi var ve saf CSS ile yapılamayan şeyler bulunuyor. W3C tartışmalarında bile “bir div daha sararsın olur, neden yeni bir CSS özelliğine gerek var ki” türünden yaklaşımlar gördüğüm oldu.
    Görsel eklemek veya değiştirmek kolay ama stillendirilebilir SVG değişimi mümkün değil; çünkü SVG node’larını doğrudan HTML’e koymak gerekiyor. Sonunda HTML ve JavaScript seviyesinde sunum kararları ile içerik yapısı kararlarını karıştırıyorsunuz; basit bir tasarım değişikliği bile tüm stack’e dokunur hâle geliyor.

    • CSS topluluğunun vaadi hep yapı ile sunumun ayrılabileceğiydi.
      30 yıl GUI yazdıktan sonra, artık çizginin yanlış yerden çekildiğine eminim. Bunun yerine niyeti izole etmek gerekiyor. Projemdeki Composites bu rolü üstleniyor ve gelecek hafta yayımlayacak olmaktan çok heyecanlıyım.
    • Burada XSLT devreye giriyor.
    • Öte yandan günümüzde CSS çok güçlü; boş hayaller değil, mecranın özelliklerini dikkate alan pek çok tasarım yalnızca CSS ve HTML ile temiz şekilde uygulanabiliyor.

  • CSS’i Zen Garden ve Eric Meyer gibi kaynaklardan öğrenmiş biri olarak Tailwind gibi modern CSS araçları anti-pattern gibi görünüyor

    • Tamamen katılıyorum. Tailwind’in gerçekten çok fazla sorunu var
      HTML stil bilgileriyle kaplanıyor. HTML okumak içerik ve anlamı görmek olmalı; pl-16 pr-8 bg-olive-500 text-gray-700 ifadesini “muhtemelen kart başlığıdır” diye çözmeye çalışmak değil
      Günümüzde insanların HTML okumadığını söyleyebilirsiniz ama böyle framework’leri kullanan geliştiriciler HTML’i korkunç bir karmaşaya çevirirse kim okuyacak? Framework sınıfları çok arttığında HTML’de içerikten çok gürültü oluyor; böylece HTML okuma ortadan kalkıyor ve bu da geliştiricilerin daha fazla sınıf ve stil yığdığı kendini güçlendiren bir döngüye dönüşüyor
      Web geliştiricileri stilleri de aşırı tekrar ediyor. .button gibi bir şey yerine text-white rounded bg-gray-aaa gibi kombinasyonlar yüzlerce yere dağılmış oluyor. Bunun Tailwind sorunu mu geliştirici sorunu mu olduğunu bilmiyorum ama büyük projelerde benzer UI öğelerinin tamamının stilini değiştirmek, hangi öğedeki hangi inline stili bulmak gerektiğini aradığınız bir köstebek vurma oyununa dönüşüyor
    • Bu tür CSS araçları, web geliştirmeyi doğaçlama biçimde öğrenmiş kişilere çekici geliyor gibi. Başta kafanızdaki tasarımı yapmak isteyip “başlık, metin, görsel”den başlayarak “nasıl ortalarım?”, “rengi nasıl değiştiririm?”, “öğeler arası boşluk?” diye öğreniyorsunuz
      Sonra hızla bir CSS fikir araç kutusu oluşuyor ama CSS’in düzgün çalışmasını sağlayan ayrıntıları kaçırıyorsunuz. position: absolute ve transform ile garip sorunların etrafından dolaşmayı biliyordum ama blok biçimlendirme bağlamını ya da kutu modelinin ince ayrıntılarını bilmiyordum
      CSS bilginiz, zayıf CSS bilgisinin üzerine yapıştırılmış yara bantlarından ibaretse sadece yakıt yakıyorsunuz demektir. O noktada, birleştirilebilir stil araç kutusu sunup birçok CSS tuzağından kaçınmanızı sağlayan bir yaklaşım çekici görünebilir
      Fikrimi değiştiren şey, HTML/CSS’i temelden öğreten kısa bir çevrimiçi kitap serisiydi. Her şeyi ilk ilkelerden açıklıyor ve neden öyle olduğunu anlatıyordu; yalnızca “bir div’i ortalamanın 10 yolu”nu verip geçmiyordu. Bir öğleden sonra hepsini okuyup web geliştirmeye bakışım değişti ama kitabın adını bir türlü hatırlayamıyorum. Özellikle “display: block bir Word belgesi gibidir, display: flex ise insanların beklediği şeye daha yakındır” cümlesi aklımda kalmış
    • Tailwind kodu gerçekten çirkin. Sevmiyorum. Ortaya çıktığında büyük siteler üzerinde çalışıyordum; CSS dosyasındaki birkaç satır ve tek bir sınıf adı yerine binlerce sayfanın her birine yüzlerce stil özelliği yapıştırma fikri, CSS’in avantajlarının yarısını geri alan büyük bir gerileme gibi görünmüştü
    • Yüzlerce kişilik şirketlerde standart olarak iyi çalıştığını düşünüyorum. Bir landing page’de her şeyi tek seferlik stillendirmek istiyorsanız, öyle yapabilirsiniz

  • Tailwind ve CSS-in-JS’in karanlık çağında parlayan küçük bir ışık gibi
    Yaklaşık 20 yıl önce CSS Zen Garden’ın ne kadar önemli olduğunu bugün kavramak zor

    • CSS-in-JS, Styled Components veya Emotion yaklaşımında olduğu gibi çoğunlukla kod organizasyonu için bir çözüm. CSS’in çalışma biçimini temelden değiştirmiyor
    • Bana CSS’i sevdirdiği kesin. Ama bu, büyük ölçekli projelerde Tailwind’in neden çekici olduğunu anlamadığım anlamına gelmiyor
    • CSS’i ilk öğrenirken onların çıkardığı kitabı almıştım. Gerçekten bambaşka bir dönemdi

  • Eskiden bu site üzerimde muazzam bir etki bırakmıştı
    Bilmeyenler için açıklayayım: Aynı HTML içeriği için yalnızca CSS ve görsellerle tasarım gönderebiliyordunuz. Özellikle etkileyici bulduğum örnekler şunlardı
    https://csszengarden.com/202/
    https://csszengarden.com/189/
    https://csszengarden.com/177/
    https://csszengarden.com/136/
    https://csszengarden.com/206/
    Kaydırdığınızda position: fixed olan bir kılıcın “sayfayı ortadan kestiği” bir tasarım da vardı ama artık listede yok gibi. Bir diğeri de sayfanın en üstünün deniz seviyesi olduğu, aşağı kaydırınca denizin dibinde bir ahtapot, denizaltı ya da dalgıçtan birinin bulunduğu bir tasarımdı diye hatırlıyorum

    • Ben de aynı şekilde. O tasarımlara bakınca günümüzde web tasarımının ne kadar sıkıcılaştığı aklıma geliyor

  • Oraya iki tasarım yüklemiştim ve hâlâ CSS’imi yeniden kullanmak için izin isteyen e-postalar alıyorum

  • Bugün HN’de CSS Zen Garden’ı görmek gerçekten sevindiriciydi. O dönem güzeldi
    Ama artık biraz söylenmem gerekiyor
    Tailwind ve benzeri CSS “framework”leriyle, genel olarak modern yazılım geliştirmede beni en çok endişelendiren şey, alttaki sistemi anlamamayı giderek gurur duyulacak bir şey gibi görmemiz
    Tailwind hızlı ve yüzeysel bir çözüm sunuyor. Utility class’ları sayfaya yapıştırınca, CSS’in gerçekte nasıl çalıştığını öğrenmeden “yeterince iyi görünen” bir sonuç çıkıyor. HTML’in içerikten çok CSS class’ıyla dolu bir karmaşaya dönüşmesi umursanmıyor
    Tavır şu: “Nasıl çalıştığının ne önemi var? Güzel bir sayfa çıktı ya. Başarı!”
    Bu sadece Tailwind’in sorunu değil, sektördeki daha büyük bir eğilim. Cehaleti kutluyor, gerçek bir anlayış inşa etmeden yalnızca sonuca acele ediyoruz
    Ne zamandan beri bilmemek övünülecek bir şey oldu? Derinliğin ve ustalığın isteğe bağlı, hatta istenmeyen şeyler olarak görülmesi üzücü

    • Çoğu HTML’in ne kadar kötü olduğuna bakınca insan şoke oluyor. Az önce Twitter’a baktım; zaman akışımdaki bir gönderi yalnızca bir paragraf metin, bir görsel ve yaklaşık 10 bağlantılı ikondan ibaretti ama HTML’i 254 satır, 21,8 kB idi; 104 iç içe geçmiş div ve 860’tan fazla class vardı
      Metin içeriğindeki karakter sayısından daha fazla class var; yalnızca class adları yaklaşık 9 kB tutuyor. Bu, zaman akışındaki her gönderi için tekrarlanıyor
      Birkaç div, birkaç class, ikon başına bir class ve birkaç satır CSS yeterli olmalı. Gerçekten, tek bir gönderideki class adlarının karakter sayısından daha az karakterle zaman akışındaki tüm gönderileri stillendirebilirsiniz
      Profesyonel geliştiricilerin nasıl bu kadar akıl almaz derecede şişkin HTML üretebildiğini anlamıyorum
    • Yazılım geliştirme, zamanla soyutlama katmanları inşa etme işidir. Assembly’de ne kadar iyisin?
    • Ne demek istediğini anlıyorum ama bunun Tailwind için geçerli olduğunu sanmıyorum. Tailwind class’ları doğrudan CSS özelliklerine karşılık gelir; dolayısıyla CSS’i anlamıyorsan aslında yapabileceğin pek bir şey yok

  • Geçmişten fırlamış gibi hissettiriyor. CSS Zen Garden’ı severdim ama hedefi ve felsefesi, web sitelerinin temel amacının belge sunmak olduğu bir dünyaya göre şekillenmişti
    Zengin medya dünyası, 2000’lerin ortaları civarında o web vizyonunu geride bırakmış gibi görünüyor

    • Zengin medyadan ziyade, web’in %100 pazarlama odaklı hâle geldiğini düşünüyorum. Aşağı kaydırdıkça reklam devam ediyor
    • Bu ciddi bir gerileme
      https://blog.danieljanus.pl/2019/10/07/web-of-documents/
    • “Web sitelerinin temel amacının belge sunmak olduğu bir dünya” demişsin ama biz hâlâ o dünyada yaşıyoruz. İğneleyici anlamda söylemiyorum
      Birkaç harita uygulamasını saymazsak web’in çoğu hâlâ bir şeyler okumaktan ibaret ve bu kadar çok ıvır zıvıra gerek yok. Sadece geliştiriciler basitliktense karmaşıklığı tercih ettiği için daha karmaşık hâle geliyor
    • “Modern medya” gerçekten zengin mi? Bence bilgi yoğunluğu ve sinyal-gürültü oranı aksine kötüleşiyor

  • Garden’ın geri dönmesine sevindim. CSS tabanlı web tasarımının en ileri nokta olduğu ve insanların derin iç içe geçmiş table’lar yerine derin iç içe geçmiş div’ler kullanmaya başladığı dönemde, CSS Zen Garden ve Spoono en sevdiğim web siteleriydi
    Kitabı da güzeldi