Snippet Kode CSS Modern: Jangan Lagi Menulis CSS Seperti Tahun 2015

 (modern-css.com)
3 poin oleh GN⁺ 2026-02-16 | 1 komentar | Bagikan ke WhatsApp
  • Kumpulan kode yang memperlihatkan perbandingan berdampingan antara teknik hack CSS yang sudah usang dan sintaks CSS native modern sebagai penggantinya
  • Memanfaatkan standar terbaru seperti Grid, Flexbox, warna OKLCH, container query, scroll-timeline untuk mengurangi ketergantungan pada JavaScript
  • Dibagi berdasarkan topik seperti warna, layout, animasi, selector, tipografi, workflow untuk menyajikan alternatif modern bagi tiap fitur
  • Melalui standar CSS terbaru, kita bisa mengurangi ketergantungan pada JS, Sass, dan library eksternal, serta memaksimalkan penggunaan fitur native browser

Bacaan terkait

1 komentar

 
GN⁺ 2026-02-16
Opini Hacker News

  • CSS tahun 2025 terasa seperti mengajak kita kembali menulis inline style seperti tahun 2005 langsung di HTML
    Ini memang membahas Tailwind, tapi pada akhirnya tetap mengabaikan pemisahan antara format dan presentasi

    • Mitos tertua dalam pengembangan web adalah konsep “separation of concerns”
    • HTML dan CSS hanyalah pemisahan teknologi
      Jika HTML benar-benar hanya menangani konten dan CSS hanya menangani style, kita tidak perlu membuat div soup seperti .container-wrapper .container .container-inner
      Fakta bahwa kita harus mengubah HTML setiap kali layout berubah adalah buktinya
    • Tidak perlu mengobfusksi kode, pakai saja Tailwind
    • Menurutku justru itu lebih baik
      Kode terkait komponen terkumpul di satu tempat, jadi tidak perlu bolak-balik antar file
    • Menurutku ini ide yang bagus
      Layout dan style adalah bagian UI yang tidak bisa dipisahkan
      HTML bukan konten, melainkan layout
      Bahkan kalau pun percaya pada separation of concerns, HTML dan CSS tetap berada pada lapisan presentasi yang sama
      Percaya bahwa keduanya bisa dipisahkan berarti menolak realitas

  • Aku merangkum daftar peningkatan utama CSS belakangan ini

    1. nested selectors
    2. :has(...)
    3. :is(...) — dulu kita harus memakai trik seperti :not(:not(...))
    4. :where(...) — mirip :is(...), tetapi bobot selektornya 0 sehingga berguna saat memakai selector yang kompleks
    • Sangat setuju dengan poin #1
      Kebanyakan LLM tidak tahu fitur ini
      Disarankan menambahkan contoh di AGENTS.md
      Ada baiknya merujuk ke dokumentasi MDN Nesting Selector
      Dengan memanfaatkan selector &, kita bisa mendapatkan keterbacaan dan pengurangan duplikasi sekaligus
    • Favoritku adalah text-box: trim
      Rasanya melegakan karena era harus menjelaskan ke desainer selama 20 tahun bahwa menyelaraskan bagian atas huruf kapital itu mustahil akhirnya selesai
    • Secara pribadi, fitur @layer yang paling kusukai
    • Poin 2~4 bagus, tetapi aku tidak suka nested selectors tidak bisa di-grep

  • Beberapa contoh masih bisa berjalan di semua browser dengan cara lama, tetapi cara baru hanya bekerja di Chrome/Edge
    Menurutku memasukkan contoh seperti itu tidak bertanggung jawab karena memperkuat monopoli Blink

    • Setuju. Akan lebih baik jika filter default disetel ke “newly available” sambil tetap mencakup tiga browser utama (Chrome/Edge, Safari, Firefox)
    • Ini bukan salah situsnya
      Justru yang perlu disorot adalah kurangnya kepatuhan Mozilla terhadap standar

  • Kita harus berhenti menempelkan elemen di tepi layar
    Ada situs yang membuat lebih dari separuh layar diisi elemen statis
    Lebih alami jika konten dibiarkan ikut scroll

  • Ironisnya, situs tersebut memaksa dark mode dan tidak memakai prefers-color-scheme

  • Sering kali kita melihat, “Wah, contoh CSS-nya kreatif!”, tetapi dukungan browser masih di kisaran 40~50%, jadi ada keterbatasan nyata

    • Dulu kurangnya dukungan seperti ini masalah besar, tetapi sekarang sudah jauh membaik
      Memang berkat pengaruh Chromium yang berlebihan, tetapi hasilnya tetap positif
      Lihat Interop 2025
    • Jika filter contoh diubah ke “widely available”, tingkat dukungannya akan jauh lebih tinggi
    • Ini hanya soal waktu
      Vendor browser cepat atau lambat menambahkan fitur lebih dulu demi dukungan luas di masa depan

  • Membingungkan karena contoh yang ditandai tidak didukung di Firefox ternyata berjalan normal di demo aslinya
    Aku jadi bertanya-tanya apakah ada polyfill yang diterapkan

    • Labelnya adalah “Limited availability”
      Persentase hijau di kiri bawah menunjukkan rasio pengguna browser yang mendukung fitur tersebut
      Sering kali angkanya bahkan di bawah setengah
      Jadi pada akhirnya ini lebih mirip “latest Chrome CSS” daripada “modern CSS”
    • Pelabelan dukungan fitur benar-benar berantakan
      Misalnya sibling-index() masih belum berjalan di Firefox, tetapi ditandai sebagai “widely available”

  • Akhir-akhir ini aku bingung harus memakai Tailwind, CSS-in-JS, Sass/SCSS, atau Vanilla CSS

    • Tidak ada jawaban mutlak
      Pakai yang cocok untuk timmu
      Kalau Tailwind cocok, pakai itu, kalau proyek pribadi pakai inline CSS, kalau sudah terbiasa dengan Sass lanjutkan saja,
      dan kalau ingin all-in ke CSS modern, itu juga pilihan yang keren

  • Karena sudah terlalu lama berkecimpung di pengembangan web, bahkan contoh yang disebut “cara lama” pun banyak yang terasa sebagai fitur yang baru pertama kali kulihat

  • Ini pertama kalinya aku melihat fitur pengaturan kecerahan warna
    Dulu aku mengerjakannya dengan Sass dan Compass, tetapi merawat toolchain terasa merepotkan
    Sekarang karena sudah didukung langsung di CSS, semuanya jadi jauh lebih praktis