CSS, artık sadece stil vermekle kalmıyor, aynı zamanda JavaScript olaylarını taklit eden sözde sınıflarla etkileşimleri yönetmemize yardımcı oluyor. :hover, :active, :focus gibi sözde sınıflar, aslında durumları (state) temsil etse de, çoğu zaman olay dinleyicileri (event listeners) gibi davranıyor. Bu durum, CSS ile JavaScript arasındaki çizgiyi giderek bulanıklaştırıyor. Örneğin, :hover sözde sınıfı, pointerenter ve pointerleave olayları arasındaki anı yakalarken, :active ise tıklama anını temsil ediyor. Bu sayede, basit etkileşimler için JavaScript yazmaya gerek kalmıyor.
Ancak CSS sözde sınıfları her zaman birebir olay karşılığı değil. Örneğin, :focus-visible, kullanıcının klavye ile gezindiğini tespit etmek için gelişmiş sezgisel yöntemler kullanıyor. JavaScript'te bu durumu kontrol etmek için element.matches(':focus-visible') sorgusu yapmak gerekiyor. Bu da CSS'in bazı durumlarda JavaScript'ten daha pratik olduğunu gösteriyor. Ayrıca, :focus-within ve :has() gibi daha karmaşık sözde sınıflar, ebeveyn-çocuk ilişkilerini yönetmede büyük kolaylık sağlıyor.
Form doğrulama söz konusu olduğunda, :valid ve :invalid sözde sınıfları hemen devreye girerken, :user-valid ve :user-invalid kullanıcı etkileşiminden sonra (örneğin, alandan çıkıldığında) tetikleniyor. Bu, JavaScript'teki change olayına benzer bir davranış. Ayrıca, :autofill sözde sınıfı, otomatik doldurma durumunu yakalamak için JavaScript'te bulunmayan bir yetenek sunuyor. Medya öğeleri için ise :buffering, :muted, :paused ve :playing gibi yeni sözde sınıflar, video/audio durumlarını stilize etmeyi kolaylaştırıyor.
Önemli Gelişmeler
Gelecekte, Animation Triggers spesifikasyonundaki event-trigger özelliği, CSS'in olayları doğrudan dinlemesini sağlayacak. Bu, CSS'in yeteneklerini daha da genişletecek. Şimdilik, mevcut sözde sınıflar birçok durumu yönetmek için yeterli olsa da, JavaScript hala karmaşık mantıksal işlemler ve DOM gezintisi için vazgeçilmez. Ancak CSS'in hızlı evrimi, yakında daha fazla işlemi JavaScript olmadan yapabileceğimizi gösteriyor.
