CSS Özgüllüğü Gerçek Render Kazanan Kural DenetleyicisiHangi CSS kuralının gerçekten kazandığını doğrulamak için tarayıcı motorunu kullanın

Neden sadece hesaplamak yetmiyor, gerçekten render etmek gerekiyor?

İnternetteki CSS özgüllük hesaplayıcılarının çoğu, seçicinizi bir formüle koyup bir puan üretmekle sınırlıdır — örneğin #main p (1,0,1) puanı alır, .card.active ise (0,2,0) puanı alır. Ancak birden fazla kural çakıştığında gerçek bir tarayıcının neye karar verdiği; kalıtım, cascade sırası, !important ve aynı özelliğin farklı kurallarda nasıl yazıldığına da bağlıdır — teorik hesaplayıcılar bunların hepsini göz ardı eder. Bu araç farklı bir yaklaşım izler: yapıştırdığınız HTML ve CSS'yi gizli bir iframe içinde render ederek tarayıcının stilleri gerçekten uygulamasını sağlar, ardından gerçek sonucu getComputedStyle() ile okur. Gördüğünüz sonuç, kağıt üzerinde hesaplanmış bir sayı değil, tarayıcının gerçekten verdiği karardır.

(a, b, c) puanı gerçekte nasıl karşılaştırılır — çözümlü bir örnek

CSS özgüllüğü üç sayı (a, b, c) ile ifade edilir: a, ID seçicilerin sayısını; b, class/öznitelik/sözde sınıf seçicilerin sayısını; c ise tip/sözde eleman seçicilerin sayısını gösterir. Karşılaştırma, basamak karşılaştırmasına benzer — 'a' değeri daha yüksek olan doğrudan kazanır ve 'b' karşılaştırması yalnızca 'a' eşit olduğunda yapılır. Örneğin #main p (1,0,1) puanı alırken, .card .title.active (0,3,0) puanı alır — diğer seçici üç class üst üste yığsa da 'a' için 1 > 0 olduğundan #main p yine kazanır. İki kuralın özgüllüğü tam olarak eşitse, tarayıcı CSS içinde daha sonra tanımlanan kuralı uygular — bu nedenle kaynak kodundaki sıralama da önemlidir. !important, özgüllüğü tamamen geçersiz kılabilen tek unsurdur: özgüllüğü daha düşük olan bir kural !important içeriyorsa, !important içermeyen daha yüksek özgüllüklü bir kuralı yener (her iki kuralda da !important varsa, karar yine özgüllüğe döner).

Bu aracı gerçekten ne zaman kullanmalısınız?

Klasik tetikleyici şudur: 'bu CSS kuralını yazdım ama ekranda hiçbir şey değişmedi' — bu genellikle daha yüksek özgüllüğe (veya !important'a) sahip başka bir kuralın onu geçersiz kıldığı anlamına gelir. Çakışan HTML+CSS'yi yapıştırın, hata ayıklamak istediğiniz elemanın seçicisini girin; araç eşleşen tüm kuralları özgüllük puanlarıyla listeler ve gerçek tarayıcı motorunun hangisinin gerçekten kazandığını söylemesine izin verir — cascade'in hangi katmanının kazandığını artık tahmin etmenize gerek kalmaz.

Bu araç, dış yazı tipleri, görseller veya JavaScript çalıştırma desteği olmayan yalıtılmış bir iframe içinde render edilir; Shadow DOM'u veya dinamik olarak eklenen CSS-in-JS stillerini desteklemez — doğru sonuçlar almak için statik HTML/CSS parçacıkları yapıştırın.