CSS, giderek daha fazla pseudo-sınıf ekleyerek JavaScript olaylarına yanıt vermemizi sağlıyor. Bu pseudo-sınıflar, aslında durumları (state) izler, olayları (event) değil. Ancak, :hover ve :active gibi pseudo-sınıflar, pointerenter/pointerleave gibi olay çiftlerini kapsadığından, olay dinleyicilere benzer bir işlev görür. CSS'in bu yeteneği, JavaScript kullanmadan birçok etkileşimi yönetmemize olanak tanır.
:focus ve :focus-visible pseudo-sınıfları, JavaScript'teki focus ve blur olaylarına benzer. :focus-visible ise daha karmaşıktır; tarayıcı, klavye kullanımı gibi çeşitli sezgisel yöntemlerle odak göstergesinin ne zaman görüneceğine karar verir. JavaScript'te bu durumu yakalamak için element.matches(':focus-visible') sorgusu kullanılabilir. Bu, CSS'in sunduğu basitliğin güzel bir örneğidir.
:checked pseudo-sınıfı, JavaScript'teki change olayına karşılık gelir. Bir onay kutusunun işaretlenip işaretlenmediğini kontrol etmek için CSS yeterlidir. :valid ve :invalid pseudo-sınıfları ise form doğrulama işlemlerinde kullanılır. JavaScript'te checkValidity() metodu veya ValidityState nesnesi ile benzer işlevler sağlanabilir, ancak CSS bu durumları anında yakalar.
Sonuç ve Değerlendirme
:user-valid ve :user-invalid pseudo-sınıfları, kullanıcı bir değer girip odağı başka bir yere taşıyana kadar tetiklenmez. Bu, JavaScript'teki change olayının davranışına benzer. Ayrıca, :autofill pseudo-sınıfı, tarayıcının otomatik doldurma işlemini yakalamak için kullanılabilir. JavaScript'te bu işlemi temiz bir şekilde yakalamak zordur.
CSS, gelecekte daha da güçlenecek. Animasyon Tetikleyicileri (Animation Triggers) spesifikasyonu kapsamında önerilen event-trigger özelliği, JavaScript olaylarını dinleyerek animasyonları başlatmayı hedefliyor. Bu, CSS'in olay yönetiminde daha da ileri gitmesini sağlayacak. Henüz desteklenmese de, bu özellik sayesinde CSS'in sadece durum değil, olayları da doğrudan yönetmesi mümkün olabilir.
Medya öğeleri için pseudo-sınıflar da yeni. :buffering, :muted, :paused, :playing gibi pseudo-sınıflar,
Sonuç olarak, CSS ve JavaScript arasındaki çizgi giderek bulanıklaşıyor. CSS pseudo-sınıfları, birçok olay dinleyicinin işlevini üstlenirken, yeni özelliklerle bu yetenek daha da artacak. Geliştiriciler, hangi durumda hangi teknolojiyi kullanacaklarına dikkat etmeli. JavaScript, karmaşık mantık ve DOM manipülasyonu için hâlâ vazgeçilmez olsa da, CSS basit durum yönetiminde giderek daha bağımsız hale geliyor.
Kaynak: css-tricks.com
