CSS bizi dinliyor. Hayır, öyle değil. Aksine, CSS, JavaScript olaylarına yanıt vermemize yardımcı olmak için giderek daha fazla sözde sınıf biriktiriyor, böylece bunu JavaScript'in kendisiyle yapmak zorunda kalmıyoruz. Ancak sözde sınıflar olayları değil durumları izlerken, bazen kesinlikle olay dinleyicileri gibi hissedebilirler (CSS bağlamında gerçekten önemli olduğu söylenemez).
Sonra tekrar, bugünlerde CSS nedir? Örneğin, Animasyon Tetikleyicileri spesifikasyonunda, temel olarak olayları dinleyen ve animasyonları tetikleyen bir olay tetikleyici teklifi var. Yine de bana sorarsanız, sözdizimi bundan çok daha fazlasını yapabilir (düşünün: invoker komutları ancak CSS için).
Ancak günümüzün gerçekliğinde kalabilmek için, aynı şeyi event-trigger için yapmadan önce, size bir nevi olay dinleyicileri olan farklı CSS sözde sınıfları boyunca yol göstereceğim ve burada şu anda desteklenmeyen bu özelliğin nasıl çalışacağını (sanırım) göstereceğim.
Detaylar ve Etkileri
: üzerine gelin ve :aktif
:hover durumu, pointerenter olayının tetiklendiği andan pointerleave olayının tetiklendiği ana kadar olan anı yakalar; bu, sözde sınıfların neden olay değil de durum olduğunu mükemmel bir şekilde gösterir.
:active, o anda fare, parmak veya kalemle basılan hedefle (örneğin, bir bağlantı veya düğme) eşleşir; bu da onu pointerdown ve pointerup / pointercancel'e benzer hale getirir.
Bu arada, pointer-events: none CSS bildirimi, işaretçi olaylarının seçilen öğe üzerinde tetiklenmesini engeller!
Nasıl Önlem Alınmalı?
:odak ve :odak-görünür
:focus sözde sınıfı, odaklanma ve bulanıklaştırma (odaklanma) JavaScript olaylarına benzer, ancak :focus-visible biraz daha karmaşıktır. :focus-visible, :focus tetiklendiğinde tetiklenir, ancak buna ek olarak tarayıcı, bir odak göstergesinin gösterilip gösterilmeyeceğini belirlemek için çeşitli buluşsal yöntemler kullanır. Kullanıcı klavyeyle mi çalışıyor? Öğe bir form kontrolü mü? Bu gerçekten CSS'nin sunduğu şeyleri takdir etmemi sağlıyor. Aslında bunu JavaScript kullanarak halletmenin en iyi yolu CSS sözde sınıfını sorgulamaktır:
element.addEventListener("focus", (event) => { if (event.target.matches(":focus-visible")) { /* Bir şeyler yapın */ } });
Uzmanların Görüşleri
JavaScript, "Eğer A Y ise, o zaman Z'den B'ye yapın" türünden konularda çok başarılıdır. DOM'da geçiş yapabilir, olay yayılımından yararlanabilir ve çok daha fazlasını yapabiliriz. Bu bakımdan CSS biraz sınırlı gelebilir. Ancak CSS hızla gelişiyor. Kaydırmayla yönlendirilen animasyonlar gibi birçok yeni "şunu yap" özelliği var ve gelecekte daha fazlasına sahip olacak. HTML, tümü CSS özelliklerine sahip olan
Aslında bunların bir kısmına daha sonra değineceğim. Daha bütünsel bir anlamda elimizde, bir çocuğun odağı varsa eşleşen :focus-with ve geçerli herhangi bir seçiciyi kabul eden ve iki seçici arasında böyle bir ilişki varsa eşleşen :has() bulunur.
Örneğin, bu iki seçici tamamen aynı şeyi yapar:
Önemli Gelişmeler
form:focus-within { /* İçerideki bir şey odağa sahip olduğunda forma stil verin */ } form:has(:focus) { /* İçerideki bir şeye odaklandığında forma stil verin */ }
:checked'in ne yaptığı oldukça açık. Onunla en çok eşanlamlı olan JavaScript olayı, ,