Proyek CSS Zen Garden

 (csszengarden.com)
2 poin oleh GN⁺ 2025-04-28 | 1 komentar | Bagikan ke WhatsApp
  • CSS Zen Garden adalah proyek demo yang menunjukkan bahwa dokumen HTML yang sama pun dapat menjadi pengalaman visual yang sama sekali berbeda hanya dengan desain berbasis CSS
  • Saat memilih stylesheet dari daftar desain, HTML tetap apa adanya dan hanya CSS eksternal yang berubah, sehingga rendering halaman menjadi berbeda
  • Peserta dapat mengunduh contoh HTML/CSS dan bekerja secara lokal, tetapi saat mengirimkan, mereka hanya boleh memodifikasi stylesheet
  • File CSS yang selesai beserta aset terkait diunggah ke server web milik sendiri dan dikirimkan sebagai tautan; karya yang terpilih akan ditempatkan di server CSS Zen Garden
  • CSS yang praktis lebih diutamakan daripada fitur eksperimental, serta diperlukan CSS yang dapat divalidasi dan dapat berjalan di IE9+ serta browser Chrome, Firefox, iOS, dan Android terbaru

Eksperimen CSS yang membuat HTML yang sama terlihat sepenuhnya berbeda

  • CSS Zen Garden adalah demo untuk menunjukkan daya ekspresi CSS
  • Pengguna dapat memilih item yang diinginkan dari daftar desain untuk menerapkan stylesheet tersebut ke halaman saat ini
  • Batasan utamanya adalah tidak mengubah HTML dan hanya mengganti file CSS eksternal
    • Hasil visual berubah sambil tetap mempertahankan struktur dokumen yang sama
    • Menunjukkan sejauh mana desain dan coding dapat memperluas kemungkinan visual web
  • Ini dapat dilihat sebagai proyek pembelajaran yang mendorong partisipasi dan inspirasi, serta berbagi hasil yang benar-benar dapat diimplementasikan dengan CSS

Cara berpartisipasi dan alur pengiriman

  • Peserta mendesain ulang halaman ini dengan desain visual yang kuat dan kemampuan CSS
    • File contoh memiliki komentar, sehingga pemula CSS pun dapat menggunakannya sebagai titik awal
    • Tutorial lanjutan dan tips tersedia di CSS Resource Guide
  • Pengerjaan dapat dilakukan pada salinan lokal setelah mengunduh contoh HTML dan CSS
  • Untuk mengirimkan, unggah file CSS yang sudah selesai beserta aset terkait ke server web yang Anda kendalikan, lalu kirim melalui tautan pengiriman
    • Mengirimkan pekerjaan yang belum selesai tidak disarankan
    • Kiriman yang terpilih akan diunduh oleh pihak CSS Zen Garden dan ditempatkan di server mereka
  • Imbalan partisipasi berupa pengakuan, inspirasi, dan kontribusi pada materi bersama yang menunjukkan kemungkinan CSS

Persyaratan CSS dan lisensi

  • Persyaratan difokuskan pada CSS yang fungsional dan praktis, bukan fitur eksperimental terbaru
    • Jika memungkinkan, penggunaan CSS 1 & 2 lebih disukai
    • CSS 3 & 4 harus dibatasi pada elemen yang didukung secara luas atau menyediakan fallback yang kuat
    • CSS harus lolos validasi
    • Dengan mempertimbangkan user agent terbaru dan lingkungan mobile, tata letak yang identik hingga tingkat piksel di semua platform mungkin sulit dicapai
    • Desain harus berjalan setidaknya di IE9+, serta browser Chrome, Firefox, iOS, dan Android terbaru
  • Kiriman harus berupa karya seni orisinal dan menghormati hukum hak cipta
    • Materi yang dapat menyinggung sebaiknya diminimalkan
    • Karena desain bertema taman sudah cukup banyak, tema visual yang unik dan menarik lebih dianjurkan
  • Hak cipta grafis tetap berada pada pengirim, tetapi CSS harus dirilis dengan lisensi Creative Commons BY-NC-SA 3.0 yang sama dengan situs, agar dapat digunakan orang lain untuk belajar

Bacaan terkait

1 komentar

 
GN⁺ 2025-04-28
Komentar Hacker News

  • Ada konteks yang sulit terlihat jika Anda bukan orang yang pernah melakukan pengembangan web pada masa ketika ini dibuat.
    Sebelum CSS, elemen table disalahgunakan seperti kisi untuk membuat layout, dan gambar dipotong-potong lalu dimasukkan ke tiap sel. Sekarang orang masih ingat sejauh itu, tetapi penolakan terhadap CSS pada masa itu tampaknya sudah cukup terlupakan.
    Banyak pengembang web yang puas dengan status quo dan enggan belajar CSS, dan mitos bahwa “dengan CSS hanya bisa membuat desain kotak-kotak yang membosankan” sangat keras kepala. Dave Shea mengumpulkan dan menampilkan desain-desain keren lewat CSS Zen Garden, praktis mengakhiri argumen itu, dan lucunya kemenangannya begitu telak sampai fakta bahwa perdebatan seperti itu pernah ada pun kini terlupakan.

    • CSS awal jauh lebih miskin fitur dibanding sekarang. border-radius pun baru masuk sekitar 2011, dan bahkan situs yang relatif sederhana seperti https://90s.dev/ membutuhkan sekitar 420 baris menurut CSS modern di https://90s.dev/style.css.
      Itu pun sudah cukup banyak memakai nesting dan :has yang mengubah permainan. Saya ingat, karena keterbatasan mendasar CSS saat itu, untuk mewujudkan bentuk yang tidak bisa dibuat secara intuitif, struktur CSS dan HTML sama-sama harus diubah.
    • Alasan table dipakai pada masa awal adalah karena membuat semuanya sejajar dengan benar menggunakan CSS di berbagai browser adalah mimpi buruk. Mimpi buruk yang mahal, dan hanya baik-baik saja jika Anda startup dengan dana berlimpah yang punya keleluasaan untuk sering merombak HTML.
    • Titik waktunya tidak begitu jelas, tetapi pernah ada masa ketika CSS yang baru muncul masih belum memadai untuk membuat layout yang lebih kompleks. Flexbox belum ada, apalagi grid.
      Menurut saya CSS Zen Garden ada untuk menunjukkan sejauh mana CSS bisa digunakan pada saat itu.
    • Saya tidak pernah benar-benar paham apa yang sebenarnya begitu salah dari membuat kisi dengan elemen table. Selain pembicaraan tentang “HTML semantik” yang hanya bermakna untuk sebagian aplikasi, saya tidak begitu tahu.
    • Saya tidak ingat adanya penolakan terhadap CSS, tetapi saya ingat banyak situs memakai sedikit CSS untuk styling font sambil tetap memakai table untuk layout. Itu bukan penolakan, melainkan kepraktisan.
      Jika butuh kisi yang stabil dan bisa diprediksi, orang memakai layout table, terutama pada layout yang rapat dan kompleks. Kasus navigasi saja yang memakai layout table juga umum, dan tujuan saat itu adalah pixel perfect.
      Ingat elemen spacer sekitar tahun 2000? Pada akhirnya tidak pernah mapan, dan GIF piksel lebih umum serta lebih bisa diprediksi.
      Sampai flexbox populer pada 2014, layout CSS float terasa seperti memutar piring. Div kosong dan div berisi konten berperilaku berbeda sehingga menyiksa; waktu itu tidak bisa saya dapatkan kembali, tetapi setidaknya saya dibayar.
      Gagasan bahwa CSS awal dengan mudah memberikan layout “Zen Garden” yang keren tidak sesuai dengan pengalaman saya. Namun saya memang sedang membuat situs media informasi, bukan situs seni yang menarik.

  • Situs ini sudah tua, dan itu dalam arti yang baik.
    Pada tahun 2000-an, ini adalah kejutan budaya bagi saya, dan membuat saya beralih dari Microsoft ASP.NET ke membuat aplikasi di Linux. Saya sadar bahwa “server controls” dengan parameter inline style adalah pendekatan yang sepenuhnya keliru, bisa dibilang “anti-internet”.
    Alex Russell, pembuat Dojo JS, menunjukkan sudut pandang seperti itu di sebuah konferensi, dan saya terkejut menyadari betapa banyak informasi yang terlewat selama saya mendapatkan berita teknologi lewat kanal Microsoft.
    Selama beberapa tahun, alat saya hanya sekitar Web.py, HTML, JS, dan CSS; kemudian jQuery, Backbone, dan Underscore datang dan pergi, lalu React dan TypeScript terasa membuat “full-stack” baru kembali menjadi tumpul.

    • Saya tidak tahu apa yang membuat aplikasi semacam itu tidak bisa dibuat di ASP.NET. ASP.NET tidak mencegah hal itu, dan membuat stylesheet serta memisahkan file JS juga memungkinkan.
      Ironisnya, yang lama kembali menjadi baru. Di sisi Next.js, mereka sedang membuat ulang view state, Tailwind memakai inline styling, dan shadcn memakai komponen React, jadi hampir seperti berputar satu putaran penuh.
    • Sekarang ada Svelte, yang bisa dianggap sebagai full-stack yang agak “cerdas”.
    • Itu masih ada online. Lebih mirip relik tua, tetapi bisa dilihat di https://www.ajaxtoolkit.net/. Tidak ada software enterprise tanpa drag panel.
      Untuk sementara, markup semantik dan CSS sempat unggul, tetapi sekarang saya bahkan tidak lagi berminat memeriksa tren terbaru. Saya berhenti peduli kira-kira saat “HTML di dalam JavaScript” (JSX).
    • Saya mulai dengan ASP dan PHP, tetapi ASP.NET lebih bersifat membantu para developer Visual Studio membuat aplikasi web yang kasar, dan tidak cocok untuk web dalam arti luas.
      Tidak perlu juga pindah ke Linux. Karena departemen IT tidak mengizinkan desktop Linux, saya membuat semuanya di Windows, lalu men-deploy ke server Windows dan Linux.

  • Saya merasa inti CSS Zen Garden adalah bahwa jika HTML semantik dimanfaatkan semaksimal mungkin, presentasi dan konten bisa dipisahkan dan ditangani sepenuhnya secara independen.
    Sampai sekarang pun kurang lebih setingkat Zen Garden masih mungkin, tetapi sebenarnya itu bergerak di dalam batasan CSS. Lebih dekat ke “karena CSS bisa melakukan ini, maka kita membuat desain seperti ini”, bukan alur “karena kita menginginkan desain seperti ini, maka kita memakai CSS ini”.
    Banyak pilihan styling yang hanya mungkin jika DOM diubah langsung, dan ada hal-hal yang tidak bisa dilakukan dengan CSS murni. Dalam diskusi W3C pun saya pernah melihat pola seperti “kenapa perlu properti CSS baru kalau cukup membungkusnya dengan satu div lagi”.
    Menyisipkan atau mengganti gambar itu sederhana, tetapi mengganti SVG yang bisa di-styling tidak mungkin karena node SVG harus dimasukkan langsung ke HTML. Pada akhirnya, keputusan struktur presentasi dan konten bercampur di level HTML dan JavaScript, sehingga perubahan desain sederhana pun menyentuh seluruh stack.

    • Janji komunitas CSS selalu bahwa struktur dan presentasi bisa dipisahkan.
      Setelah 30 tahun menulis GUI, kini saya yakin posisi garis pemisah itu keliru. Sebagai gantinya, yang harus diisolasi adalah intensi. Composites di proyek saya menjalankan peran itu, dan saya sangat menantikan peluncurannya minggu depan.
    • Di sinilah XSLT muncul.
    • Sebaliknya, CSS masa kini sangat kuat, sehingga banyak desain yang bukan istana di udara, melainkan mempertimbangkan karakteristik mediumnya, bisa diimplementasikan dengan rapi hanya menggunakan CSS dan HTML.

  • Dari sudut pandang seseorang yang belajar CSS lewat materi seperti Zen Garden dan Eric Meyer, alat CSS modern seperti Tailwind tampak seperti antipattern

    • Sangat setuju. Tailwind punya banyak sekali masalah
      HTML jadi tertutup informasi gaya. Membaca HTML seharusnya berarti melihat konten dan makna, bukan menguraikan pl-16 pr-8 bg-olive-500 text-gray-700 sebagai “mungkin ini header kartu”
      Bisa saja dikatakan bahwa sekarang orang tidak membaca HTML, tetapi kalau developer yang memakai framework seperti ini membuat HTML menjadi kekacauan mengerikan, siapa yang mau membacanya? Ketika kelas framework menjadi terlalu banyak, HTML berisi lebih banyak noise daripada konten; akibatnya praktik membaca HTML menghilang, lalu developer kembali menumpuk lebih banyak kelas dan gaya—sebuah siklus yang menguatkan diri sendiri
      Developer web juga sangat sering menggandakan style. Alih-alih sesuatu seperti .button, kombinasi seperti text-white rounded bg-gray-aaa tersebar di ratusan tempat. Entah ini masalah Tailwind atau masalah developernya, tetapi di proyek besar, jika ingin mengubah style seluruh elemen UI yang serupa, jadinya seperti main pukul tikus tanah untuk mencari inline style mana pada elemen mana yang harus diubah
    • Alat CSS semacam itu tampaknya menarik bagi orang yang belajar pengembangan web secara tambal-sulam. Awalnya ingin membuat desain yang ada di kepala, lalu mulai dari “header, teks, gambar” dan belajar dengan pertanyaan seperti “bagaimana cara meratakannya ke tengah?”, “bagaimana mengubah warnanya?”, “jarak antar elemen bagaimana?”
      Setelah itu kotak perkakas ide CSS memang cepat terbentuk, tetapi detail yang membuat CSS bekerja dengan baik terlewat. Saya tahu cara mengakali masalah aneh dengan position: absolute dan transform, tetapi tidak memahami block formatting context atau rincian box model
      Jika pengetahuan CSS hanya berupa plester yang ditempel di atas pengetahuan CSS yang rapuh, itu sama saja membakar bahan bakar. Pada saat seperti itu, membawa kotak perkakas style yang bisa dikomposisikan dan membantu menghindari banyak jebakan CSS bisa terlihat menarik
      Yang mengubah pandangan saya adalah sebuah seri singkat berbentuk buku online yang mengajarkan HTML/CSS dari dasar. Semuanya dijelaskan dari prinsip pertama dan mengapa demikian, bukan hanya melempar “10 cara menengahkan div” lalu selesai. Saya membacanya habis dalam satu sore dan cara saya memandang pengembangan web berubah, tetapi saya sama sekali tidak ingat judul bukunya. Saya terutama ingat kalimat bahwa “display: block itu seperti dokumen Word, sedangkan display: flex lebih dekat dengan cara yang orang harapkan”
    • Kode Tailwind benar-benar jelek. Saya tidak suka. Saat Tailwind muncul, saya sedang mengerjakan situs-situs besar, dan gagasan menempelkan ratusan properti style di ribuan halaman alih-alih beberapa baris di file CSS dan satu nama kelas terlihat seperti kemunduran besar yang membalikkan separuh keunggulan CSS
    • Menurut saya ini bekerja cukup baik sebagai standar di perusahaan berskala ratusan orang. Kalau ingin menata semua hal di landing page sebagai sekali pakai, silakan saja

  • Seperti secercah cahaya di zaman gelap Tailwind dan CSS-in-JS
    Sekarang sulit merasakan betapa pentingnya CSS Zen Garden sekitar 20 tahun lalu

    • CSS-in-JS, seperti pendekatan Styled Components atau Emotion, terutama adalah solusi untuk organisasi kode. Itu tidak mengubah secara fundamental cara CSS bekerja
    • Yang pasti, itu membuat saya jatuh cinta pada CSS. Namun bukan berarti saya jadi tidak memahami mengapa Tailwind menarik untuk proyek berskala besar
    • Saat pertama belajar CSS, saya membeli buku yang mereka terbitkan. Benar-benar era yang berbeda

  • Dulu situs ini memberi pengaruh sangat besar pada saya
    Untuk yang belum tahu, orang bisa mengirimkan desain untuk konten HTML yang sama hanya dengan CSS dan gambar. Contoh yang sangat berkesan bagi saya adalah berikut ini
    https://csszengarden.com/202/
    https://csszengarden.com/189/
    https://csszengarden.com/177/
    https://csszengarden.com/136/
    https://csszengarden.com/206/
    Ada juga desain dengan pedang position: fixed yang saat discroll “membelah halaman di tengah”, tetapi sepertinya sekarang sudah tidak ada di daftar. Saya juga ingat satu desain lain: bagian paling atas halaman adalah permukaan laut, dan saat discroll ke bawah, di ujung bawah laut ada salah satu dari gurita, kapal selam, atau penyelam

    • Saya juga sama. Melihat desain-desain itu mengingatkan betapa membosankannya desain web sekarang

  • Saya pernah mengunggah dua desain di sana, dan sampai sekarang masih menerima email yang meminta izin untuk menggunakan ulang CSS-nya

  • Senang sekali melihat CSS Zen Garden di HN hari ini. Masa-masa itu memang menyenangkan
    Tapi sekarang saya harus sedikit menggerutu
    Hal yang paling saya khawatirkan dari Tailwind dan “framework” CSS sejenisnya, serta pengembangan perangkat lunak modern secara umum, adalah bahwa orang makin bangga karena tidak memahami sistem dasarnya
    Tailwind memberi solusi cepat dan dangkal. Tempelkan kelas utilitas ke halaman, lalu hasilnya terlihat “cukup bagus” tanpa perlu belajar bagaimana CSS sebenarnya bekerja. Tidak peduli kalau HTML berubah jadi kekacauan yang berisi lebih banyak kelas CSS daripada konten
    Sikapnya seperti, “Apa pentingnya bagaimana cara kerjanya? Halamannya terlihat bagus. Berhasil!”
    Ini bukan cuma masalah Tailwind, melainkan tren yang lebih besar di industri. Merayakan ketidaktahuan, dan terburu-buru mengejar hasil tanpa membangun pemahaman yang sungguh-sungguh
    Sejak kapan tidak tahu menjadi sesuatu yang dibanggakan? Menyedihkan ketika kedalaman dan keahlian diperlakukan sebagai hal opsional, bahkan tidak diinginkan

    • Mengejutkan melihat betapa buruknya kebanyakan HTML. Saya baru saja melihat Twitter; satu postingan di linimasa saya hanya berisi satu paragraf teks, satu gambar, dan sekitar 10 ikon tertaut, tetapi HTML-nya saja 254 baris, 21,8 kB, dengan 104 div bersarang dan lebih dari 860 kelas
      Jumlah kelasnya lebih banyak daripada jumlah karakter konten teks, dan nama kelasnya saja sekitar 9 kB. Itu diulang untuk setiap postingan di linimasa
      Beberapa div, beberapa kelas, satu kelas per ikon, dan beberapa baris CSS seharusnya sudah cukup. Serius, Anda bisa menata semua postingan di linimasa dengan jumlah karakter yang lebih sedikit daripada jumlah karakter nama kelas untuk satu postingan
      Saya tidak mengerti bagaimana pengembang profesional bisa membuat HTML yang sebegitu bengkak
    • Pengembangan perangkat lunak adalah soal menumpuk lapisan abstraksi seiring waktu. Seberapa mahir Anda menulis assembly?
    • Saya paham maksudnya, tetapi menurut saya itu tidak berlaku untuk Tailwind. Kelas Tailwind langsung berpadanan dengan properti CSS, jadi kalau tidak memahami CSS, sebenarnya tidak banyak yang bisa dilakukan

  • Rasanya seperti datang dari masa lalu. Saya menyukai CSS Zen Garden, tetapi tujuan dan filosofinya cocok untuk dunia ketika tujuan utama situs web adalah menyajikan dokumen
    Dunia media kaya tampaknya telah meninggalkan visi web itu sekitar pertengahan 2000-an

    • Menurut saya bukan media kaya, melainkan web berubah menjadi 100% berorientasi pemasaran. Digulir ke bawah pun isinya tetap iklan
    • Itu penurunan besar
      https://blog.danieljanus.pl/2019/10/07/web-of-documents/
    • Anda mengatakan “dunia ketika tujuan utama situs web adalah menyajikan dokumen”, tetapi kita masih hidup di dunia itu. Ini bukan sarkasme
      Selain beberapa aplikasi peta, sebagian besar web masih tentang membaca sesuatu, dan tidak membutuhkan begitu banyak barang tidak perlu seperti ini. Web menjadi lebih rumit hanya karena para pengembang lebih menyukai kerumitan daripada kesederhanaan
    • Apakah “media modern” benar-benar kaya? Menurut saya kepadatan informasi dan rasio sinyal terhadap derau justru makin buruk

  • Senang melihat Garden kembali. Pada masa ketika desain web berbasis CSS berada di garis depan dan orang mulai memakai div yang bersarang dalam-dalam alih-alih table yang bersarang dalam-dalam, CSS Zen Garden dan Spoono adalah situs web favorit saya
    Bukunya juga bagus