CSS artık sadece stil vermekle kalmıyor; JavaScript olaylarına yanıt vermek için pseudo-sınıflarını genişletiyor. :hover, :active, :focus gibi pseudo-sınıflar, aslında durumları (state) temsil etse de, olay dinleyicileri gibi davranabiliyor. Örneğin, :hover, pointerenter ve pointerleave olayları arasındaki anı yakalar. Bu, CSS'in JavaScript'in işini hafifletme potansiyelini gösteriyor.
Pseudo-sınıfların en güçlü yanlarından biri, JavaScript'te karmaşık kodlarla yapılan işlemleri basitleştirmeleri. :checked pseudo-sınıfı, checkbox ve radio butonlarının durumunu izlerken, JavaScript'te change olayını dinlemek gerekir. Benzer şekilde, :valid ve :invalid, form doğrulama durumunu anında yansıtırken, JavaScript'te checkValidity() veya ValidityState kullanmanız gerekir.
CSS'in evrimi, :focus-within ve :has() gibi pseudo-sınıflarla daha da ileri gidiyor. :has() selektörü, bir ebeveynin belirli bir alt öğeye sahip olup olmadığını kontrol ederek, koşullu stillendirme imkanı sunuyor. Bu, JavaScript'te DOM traversali ile yapılan işlemleri CSS seviyesine taşıyor.
Kullanıcı etkileşimini daha doğal hale getirmek için :user-valid ve :user-invalid pseudo-sınıfları geliştirildi. Bu pseudo-sınıflar, kullanıcı bir değer girip odaklanmayı bıraktıktan sonra tetiklenir, yani change olayına benzer bir davranış sergiler. Bu, form doğrulamada daha kullanıcı dostu bir deneyim sağlar.
Medya elemanları için yeni pseudo-sınıflar da geliyor. :buffering, :muted, :paused, :playing gibi pseudo-sınıflar,
Gelecekte, CSS Animation Triggers spesifikasyonu ile event-trigger özelliği, olaylara doğrudan animasyon tetikleme imkanı sunacak. Bu, JavaScript'in invoker komutlarına benzer bir yapı sağlayarak, CSS'in yeteneklerini daha da genişletecek. Şimdilik desteklenmese de, bu gelişmeler CSS ve JavaScript arasındaki çizginin giderek bulanıklaştığını gösteriyor.
Kaynak: css-tricks.com
