CSS, artık sadece stil vermekten ibaret değil. Giderek artan pseudo-sınıfları sayesinde, JavaScript olaylarını dinlemek zorunda kalmadan durumları yakalayabiliyoruz. :hover, :active, :focus gibi pseudo-sınıflar, aslında olayları değil, durumları temsil ediyor. Ancak bu durumlar, JavaScript'teki pointerenter, pointerdown gibi olaylarla neredeyse birebir örtüşüyor. Bu da CSS'in, JavaScript'in iş yükünü hafiflettiği anlamına geliyor.
Peki, :focus-visible gibi daha karmaşık pseudo-sınıflar ne durumda? :focus-visible, klavye kullanımı gibi durumlarda odak göstergesinin görünüp görünmeyeceğine karar veriyor. JavaScript'te bunu kontrol etmek için element.matches(':focus-visible') sorgusu yapmak gerekiyor. CSS burada daha doğrudan bir çözüm sunuyor. Ayrıca :focus-within ve :has() gibi pseudo-sınıflar, ebeveyn-çocuk ilişkilerini yakalayarak daha karmaşık senaryolarda bile JavaScript ihtiyacını azaltıyor.
Form elemanlarında durum biraz daha farklı. :checked pseudo-sınıfı, checkbox ve radio butonlarının işaretlenme durumunu yakalarken, JavaScript'te change olayı kullanılıyor. Ancak CSS, :valid ve :invalid ile geçerlilik kontrolünü de üstleniyor. JavaScript'te checkValidity() veya ValidityState kullanarak aynı işlemi yapmak mümkün, ancak CSS'in sunduğu :user-valid ve :user-invalid gibi pseudo-sınıflar, kullanıcı etkileşiminden sonra devreye girerek daha kullanıcı dostu bir deneyim sağlıyor.
Nasıl Önlem Alınmalı?
Medya elemanları için yeni pseudo-sınıflar da yolda. :buffering, :muted, :paused, :playing gibi pseudo-sınıflar,
Detaylar ve Etkileri
Gelecekte ise CSS Animation Triggers spesifikasyonu ile event-trigger özelliği geliyor. Bu özellik, JavaScript olaylarını dinleyip animasyonları tetikleyerek, CSS'in olay yönetimindeki rolünü daha da ileri taşıyacak. Şu an için desteklenmese de, bu tür yenilikler CSS ve JavaScript arasındaki çizgiyi iyice bulanıklaştırıyor. Geliştiriciler, hangi durumlarda CSS'i, hangi durumlarda JavaScript'i kullanacaklarına daha dikkatli karar vermek zorunda kalacak.
Sonuç olarak, CSS pseudo-sınıfları, JavaScript olaylarının birçok işlevini üstleniyor. :hover, :focus, :checked gibi temel pseudo-sınıflar, günlük kullanımda JavaScript ihtiyacını büyük ölçüde azaltıyor. Form validasyonu ve medya elemanları gibi alanlarda da benzer bir dönüşüm yaşanıyor. Geliştiricilerin, bu pseudo-sınıfları etkin bir şekilde kullanarak daha sade ve bakımı kolay kodlar yazması mümkün. Ancak karmaşık mantık ve DOM manipülasyonu gerektiren durumlarda JavaScript hâlâ vazgeçilmez.
Kaynak: css-tricks.com
