2026’da CSS: Frontend Geliştirmeyi Yeniden Şekillendiren Yeni Özellikler

• CSS platformunun evrimi sayesinde artık karmaşık animasyonlar ve etkileşimler bile JavaScript olmadan uygulanabilecek bir seviyeye ulaştı
• Yeni eklenen özellikler; <select> özelleştirme, kaydırma durumunu algılama, kardeş öğe hesaplama, öznitelik tabanlı stillendirme ve daha fazlasını destekliyor
• appearance: base-select ve ::picker(select) kullanıldığında erişilebilirliği ve yerel davranışı korurken tam stil kontrolü sağlanabiliyor
• sibling-index() ve attr() ile veri tabanlı animasyonlar ve renk stillendirmesi sade biçimde uygulanabiliyor
• Bu değişimler, JavaScript bağımlılığını azaltan ve erişilebilirlik ile bakım kolaylığını artıran bir frontend geliştirme paradigması değişimi anlamına geliyor

---

CSS’in yeni özelliklerine genel bakış

• 2026 CSS sürümünde etkileşim ve animasyon için çok sayıda yeni özellik sunuluyor
  • appearance: base-select, <select> öğesini özelleştirilebilir moda geçiriyor
  • select::picker(select), açılır menü yüzeyini temsil eden bir sanal öğe olup gölge, kenarlık, boşluk gibi stiller uygulanabiliyor
  • selectedcontent, seçilen seçeneğin görüntülendiği alanı stillendirmeyi sağlıyor
• Kaydırma ile ilgili özellikler de önemli ölçüde genişletiliyor
  • ::scroll-button(), kaydırılabilir kapsayıcıda otomatik oluşturulan sağ-sol gezinme düğmeleri sunuyor
  • ::scroll-marker ve ::scroll-marker-group, sayfalama noktaları veya görsel göstergeler işlevi görüyor
  • scroll-target-group ve :target-current, o anda görünen bölüme karşılık gelen bağlantıyı otomatik vurguluyor
• Kaydırma durumuna dayalı container query desteği de ekleniyor
  • container-type: scroll-state ve @container scroll-state(snapped: x) ile kaydırma konumuna göre stil değiştirmek mümkün
• Ağaç sayım fonksiyonları ve tip belirtilmiş öznitelik referansı özellikleri de geliyor
  • sibling-index() ve sibling-count(), kardeş öğelerin sırasını ve sayısını döndürüyor
  • attr(), öznitelik değerlerini renk gibi tiplerle okuyup doğrudan CSS özelliklerinde kullanmayı mümkün kılıyor
• @starting-style, animasyonun başlangıç anındaki stili tanımlamak için deneysel bir söz dizimi

Demo: Yerel HTML <select> özelleştirmesi

• <select> öğesi erişilebilirlik ve anlamsal yapı sunar, ancak geçmişte stil kontrolü sınırlıydı
• Yeni CSS özellikleri ile JavaScript olmadan tam özelleştirme mümkün hale geliyor
  • appearance: base-select ile özelleştirme modu etkinleştirilir
  • select::picker(select) ile açılır menü yüzeyi stillendirilir
• Tarayıcının otomatik olarak yönettiği işlevler
  • Taşma yönetimi: Açılır menünün ekran dışına çıkmaması için otomatik kaydırma uygulanır
  • Anchor konumlandırma ayarı: Görünüm alanındaki boşluğa göre en uygun konum otomatik seçilir
  • Odak yönetimi ve klavye gezinmesi: Arrow, Enter, Escape tuşları desteklenir
  • Zengin içerikli seçenekler: İkonlar, etiketler ve benzeri yapılandırılmış içerikler eklenebilir
• Desteklemeyen tarayıcılarda varsayılan <select> öğesine geri düşülür, ayrıca polyfill gerekmez

sibling-index() ile kademeli animasyon

• Açılır menü seçenekleri açıldığında ardışık biçimde kayan animasyon uygulanabilir
• sibling-index(), bir öğenin kardeşleri arasındaki sırasını (1’den başlayarak) döndürür
  • Örneğin: ilk seçenek 0s, ikinci 0.2s, üçüncü 0.4s gecikmeye sahip olabilir
• Öğeler eklendiğinde ya da silindiğinde zamanlama otomatik yeniden hesaplanır, bu da bakımı kolaylaştırır
• Eskiden :nth-child() veya custom property ile elle tanımlanması gereken süreç basitleştirilmiş olur

attr() ile veri tabanlı stillendirme

• attr() fonksiyonunun tip belirtilmiş sürümü, HTML öznitelik değerlerinin doğrudan stile aktarılmasını sağlar
  • Örnek: data-bg-color özniteliği, background-color: attr(data-bg-color color, transparent) ile okunup kullanılabilir
• Öznitelik tipi açıkça belirtildiğinde tarayıcı doğru şekilde parse eder ve fallback renk tanımı da yapılabilir
• HTML içinde yalnızca rengi değiştirerek CSS’i güncellemeden ilerleyebilen veri merkezli bir stillendirme yapısı kurulabilir

CSS ile yapılan açılır menü ve JavaScript sürümünün karşılaştırması

• Aynı açılır menüyü JavaScript ile uygulamak 150 satırdan fazla kod gerektirebilir
• CSS sürümü ise tek bir <select> ve birkaç öznitelikle aynı işlevi sunabilir
• Yerel erişilebilirlik, odak ve klavye kontrolü platform seviyesinde otomatik sağlanır

CSS’in geleceği ve geliştirme yönü

• Yeni CSS özellikleri, karmaşık kullanıcı arayüzlerini basit bildirime dayalı kodla kurmayı mümkün kılıyor
• Platformun yerleşik sunduğu yetenekler sayesinde tekrarlı kod ve harici kütüphane bağımlılığı azalıyor
• Yapay zeka çağında, bu tür sade ve bildirime dayalı yapıların otomatik kod üretiminin kararlılığını artırdığı görülüyor
• Gerçek dünyada kullanım için önerilen yaklaşım
  • Mevcut JavaScript merkezli UI bileşenlerini CSS tabanlı olarak yeniden değerlendirmek
  • Erişilebilirlik testlerini paralel yürütüp klavye ve ekran okuyucu uyumluluğunu doğrulamak
  • Tarayıcı desteği durumunu sürekli izleyerek kademeli geçiş yapmak
• Tüm bu değişimler, CSS’in frontend etkileşimlerinin merkez teknolojisi olarak yükseldiğini gösteriyor