CSS, artık sadece stil vermekle kalmıyor; JavaScript olaylarına benzer şekilde davranan sözde sınıflarla etkileşimleri yönetiyor. :hover, :active, :focus gibi sözde sınıflar, aslında durumları temsil etse de, çoğu zaman olay dinleyicileri gibi hissettiriyor. Bu, CSS'in evriminde önemli bir adım: geliştiriciler, basit etkileşimler için JavaScript yazmak zorunda kalmıyor. Ancak bu sözde sınıfların olay değil, durum olduğunu unutmamak gerek. Örneğin, :hover sözde sınıfı, pointerenter ve pointerleave olayları arasındaki anı yakalar; yani bir durumu, olayı değil.
:active sözde sınıfı, bir bağlantı veya düğmeye tıklandığında devreye girer ve pointerdown ile pointerup arasındaki süreci kapsar. İlginçtir ki, pointer-events: none CSS bildirimi, seçilen öğede işaretçi olaylarının ateşlenmesini engeller. Bu da CSS'in olay yönetimindeki rolünü gösteriyor. :focus ve :focus-visible ise odaklanma olaylarına benzer. :focus-visible, klavye kullanımı gibi durumlarda odak göstergesinin görünüp görünmeyeceğine karar verir. JavaScript'te bu durumu kontrol etmek için element.matches(':focus-visible') kullanmak en temiz yoldur.
:checked sözde sınıfı, onay kutuları ve radyo düğmeleri gibi öğelerin işaretli durumunu izler. JavaScript'teki change olayına benzer; ancak CSS doğrudan durumu yönetir. Örneğin, bir onay kutusunun işaretli olup olmadığını kontrol etmek için JavaScript'te event.target.checked kullanılırken, CSS'de :checked sözde sınıfı yeterlidir. Bu, basit durum yönetimlerinde JavaScript ihtiyacını ortadan kaldırır.
Uzmanların Görüşleri
:valid ve :invalid sözde sınıfları, form doğrulamasında kritik rol oynar. JavaScript'te invalid olayı yalnızca geçersiz durumda ateşlenirken, CSS her iki durumu da kapsar. Ayrıca :user-valid ve :user-invalid, kullanıcının bir değer girip odaktan çıkmasını bekler; bu da change olayına benzer. :autofill sözde sınıfı ise otomatik doldurma durumunu izler; JavaScript'te bunu temiz bir şekilde yakalamak zordur.
Gelecekte Ne Bekleniyor?
Medya öğeleri için sözde sınıflar henüz yeni: :buffering, :muted, :paused, :playing gibi sözde sınıflar,
Önemli Gelişmeler
Gelecekte CSS, Animation Triggers spesifikasyonu ile event-trigger adlı yeni bir özellik kazanabilir. Bu özellik, JavaScript olaylarını dinleyerek animasyonları tetikleyecek. Şu anda desteklenmese de, potansiyel olarak invoker komutlarına benzer bir yapı sunabilir. Bu, CSS'in olay yönetimindeki sınırlarını daha da genişletecek.
Sonuç olarak, CSS sözde sınıfları, JavaScript olaylarının yerini tamamen almasa da, basit durum yönetimlerinde güçlü bir alternatif sunuyor. Geliştiriciler, :hover, :focus, :checked gibi sözde sınıfları kullanarak daha az JavaScript kodu yazabilir ve daha temiz bir yapı elde edebilir. Ancak karmaşık mantıklar için JavaScript hâlâ vazgeçilmez. Bu dengeyi iyi kurmak, modern web geliştirmenin anahtarı.
Kaynak: css-tricks.com
