Modern CSS kod snippet'leri: CSS'i artık 2015'teki gibi yazmayalım

 (modern-css.com)
3 puan yazan GN⁺ 2026-02-16 | 1 yorum | WhatsApp'ta paylaş
  • Eski CSS hack tekniklerini ve bunların yerini alan modern yerel CSS sözdizimini yan yana karşılaştıran bir kod derlemesi
  • Grid, Flexbox, OKLCH renkleri, container query, scroll-timeline gibi güncel standartlardan yararlanarak JavaScript bağımlılığını azaltıyor
  • Renk, yerleşim, animasyon, seçiciler, tipografi, iş akışı gibi başlıklara ayrılarak her özellik için modern alternatifler sunuyor
  • Güncel CSS standartlarıyla JS, Sass ve harici kütüphane bağımlılığını azaltmak ve tarayıcının yerel özelliklerini mümkün olduğunca kullanmak mümkün

İlgili okumalar

1 yorum

 
GN⁺ 2026-02-16
Hacker News yorumları

  • 2025'in CSS'i denince, sanki 2005'teki gibi inline stilleri doğrudan HTML'e yazalım deniyormuş gibi geliyor
    Tailwind'den bahsediyorum ama sonuçta biçim ile sunumun ayrımını görmezden gelmiş oluyor

    • Web geliştirmedeki en eski efsane, “concern separation” kavramıdır
    • HTML ile CSS sadece teknolojilerin ayrımıdır
      HTML gerçekten yalnızca içerikten, CSS de yalnızca stilden sorumlu olsaydı, .container-wrapper .container .container-inner gibi bir div çorbası oluşturmaya gerek kalmazdı
      Düzeni her değiştirdiğimizde HTML'i de değiştirmek zorunda olmamız bunun kanıtı
    • Kodu okunmaz hale getirmeye gerek yok, doğrudan Tailwind kullanın
    • Bence bu daha iyi bile
      Bileşenle ilgili kodun tek yerde toplanması sayesinde dosyalar arasında gidip gelmek gerekmiyor
    • Bence iyi bir fikir
      Düzen ve stil, ayrıştırılamayan UI parçalarıdır
      HTML içerik değil, düzendir
      Concern separation'a inansanız bile HTML ile CSS aynı sunum katmanına aittir
      Bunların ayrılabileceğine inanmak, gerçeği görmezden gelmek gibi

  • Son dönemde CSS'teki başlıca iyileştirmelerin bir listesini çıkardım

    1. İç içe seçiciler (nested selectors)
    2. :has(...)
    3. :is(...) — eskiden :not(:not(...)) gibi hilelere başvurmak gerekiyordu
    4. :where(...) — :is(...)'e benzer ama selector specificity'si 0 olduğu için karmaşık seçicilerde kullanışlıdır
    • #1'e güçlü biçimde katılıyorum
      LLM'lerin çoğu bu özelliği bilmiyor
      AGENTS.md içine örnek eklemenizi tavsiye ederim
      MDN Nesting Selector belgesine bakmak faydalı olur
      & seçicisiyle aynı anda okunabilirlik ve tekrarın azaltılması sağlanabilir
    • Benim en sevdiğim text-box: trim
      20 yıldır tasarımcılara büyük harflerin üst hizasını tutturmanın imkânsız olduğunu açıklamak zorunda kaldığım dönem bittiği için kendimi özgür hissediyorum
    • Şahsen en çok @layer özelliğini seviyorum
    • 2~4 güzel ama iç içe seçiciler grep ile aranamadığı için sevmiyorum

  • Örneklerin bazıları eski yöntemle tüm tarayıcılarda çalışırken, yeni yöntem yalnızca Chrome/Edge'de çalışıyor
    Böyle örnekler koymak Blink tekelini güçlendirdiği için bana sorumsuzca geliyor

    • Katılıyorum. Varsayılan filtrenin “newly available” olması yerine üç büyük tarayıcıyı da (Chrome/Edge, Safari, Firefox) kapsaması iyi olurdu
    • Bu sitenin suçu değil
      Asıl Mozilla'nın standartlara uyumdaki eksikliği eleştirilmeli

  • Öğeleri ekranın kenarlarına sabitlemeyi bırakmak lazım
    Bazı sitelerde ekranın yarısından fazlasını statik öğeler kaplıyor
    İçeriğin kaymasına izin vermek daha doğal

  • İronik biçimde, ilgili site karanlık moda sabitlenmiş ve prefers-color-scheme kullanmıyor

  • “Ne güzel yaratıcı CSS örnekleri var!” diye bakıyorsun, sonra tarayıcı desteğinin %40~50 seviyesinde olduğunu görüp pratik kısıtlarla karşılaşıyorsun

    • Eskiden bu tür düşük destek büyük sorundu ama artık çok daha iyi
      Chromium'un aşırı etkisi sayesinde olmuş olsa da sonuçta olumlu
      Interop 2025'e bakın
    • Örnek filtresini “widely available” yaparsanız destek oranı çok daha yükseliyor
    • Sadece zaman meselesi
      Tarayıcı üreticileri bir gün geniş çaplı destek sağlamak için özellikleri şimdiden ekliyor

  • Firefox'ta çalışmadığı söylenen örnekler gerçek demoda düzgün çalıştığı için kafa karıştırıyor
    Acaba polyfill uygulanmış mı diye merak ediyorum

    • Gösterilen şey “Limited availability” etiketi
      Sol alttaki yeşil yüzde, o özelliği destekleyen tarayıcı kullanıcılarının oranını gösteriyor
      Çoğu zaman bu oran yarının altında kalıyor
      Sonuçta bu “modern CSS”ten çok “en yeni Chrome CSS'i” gibi
    • Özellik destek etiketlemesi tam bir karmaşa
      Örneğin sibling-index() Firefox'ta hâlâ çalışmıyor ama “widely available” olarak işaretlenmiş

  • Bugünlerde Tailwind, CSS-in-JS, Sass/SCSS ve Vanilla CSS arasında hangisini kullanmak gerektiği konusunda kafam karışıyor

    • Tek bir doğru yok
      Ekibinize uyanı kullanın
      Tailwind uygunsa onu, kişisel projeyse inline CSS'yi, Sass'a alışkınsanız onu,
      en yeni CSS'e tamamen yönelmek istiyorsanız o da harika bir seçim

  • O kadar uzun süredir web geliştiriyorum ki, “eski yöntem” denilen örneklerde bile ilk kez gördüğüm birçok özellik var

  • Renk parlaklığı ayarlama özelliğini ilk kez gördüm
    Eskiden bunu Sass ve Compass ile yapıyordum ama toolchain bakımını sürdürmek zahmetliydi
    Artık doğrudan CSS içinde desteklenmesi çok daha kullanışlı