İçeriğe atla
TextArray1.41.0
%100 yerel

Kullanılmayan CSS seçici bulucusu

Bir stil sayfasını bir HTML sayfasıyla karşılaştırın ve hiçbir öğeyle eşleşmeyen seçicileri listeleyin.

Giriş
HTML
Çıkış
İlgili araçlar
CSS özgüllük hesaplayıcısıyeniGeliştirici araçları
CSS küçültücüGeliştirici araçları
HTML erişilebilirlik denetçisiyeniGeliştirici araçları
i18n anahtar farkıGeliştirici araçları
TOML'den JSON'ye dönüştürücüGeliştirici araçları
SQL'den JSON'aGeliştirici araçları
Kullanılmayan CSS seçici bulucusu
Bir stil sayfasını bir HTML sayfasıyla karşılaştırın ve bu araç, sayfadaki hiçbir öğeyle eşleşmeyen her seçiciyi listeler. Bu, yeniden tasarım, kaldırılan bir bileşen veya aylar boyunca kopyala-yapıştır CSS'den sonra geride kalan ölü kuralları bulmanın hızlı bir yoludur — yüzlerce kuralı olan bir dosyada göz kamasıyla aramak sıkıcı olan türde bir kumdan.
"Sözde sınıflar ve sözde öğeleri yoksay", .button:hover gibi bir kuralı düz .button olarak karşılaştırır, çünkü statik bir HTML anlık görüntüsü üzerine geliş veya odak durumunu gösteremez. Devre dışı bırakın ve araç ilk-çocuk, son-çocuk, nth-çocuk ve değil gibi güvenli olanları kontrol eder her öğenin gerçek konumuna karşı. "Seçicileri yoksay" normal bir ifade veya geri dönüş olarak düz metin parçası alır, bir komut dosyası tarafından çalışma zamanında değiştirilen sınıfları hariç tutmak için, örneğin js- veya is-active ile başlayan herhangi bir şey. "CSS kuralı olmayan HTML sınıfları/kimliklerini göster" karşılaştırmayı tersine çevirir, sınıf adlarındaki yazım hatalarını yakalamak için faydalıdır. "@media içindeki seçicileri dahil et", ortam sorgusu kurallarını yönetmeninizin geri kalanıyla aynı şekilde kontrol eder veya devre dışı bırakıldığında atlar. Çıktıyı "Temizlenmiş CSS"ye değiştirin, stil sayfasını geri alın ve her kullanılmayan kural çıkarılmış şekilde.
Karşılaştırma yazılı HTML yapısına karşı çalıştırılır — sayfanın yüklemesinden sonra bir komut dosyası tarafından enjekte edilen işaretleme yapıştırılan anlık görüntüde değildir, bu nedenle silmeden önce iki kez kontrol edin. Virgülle birleştirilen seçiciler ayrı ayrı kontrol edilir, bu nedenle iki sınıfı da kapsayan bir kural yalnızca her ikisi de kullanılmayan olarak doğrulandığında kaldırılır.
Her şey tarayıcınızda gerçekleşir: yapıştırdığınız CSS ve HTML hiçbir zaman hiçbir yere yüklenmez. Sonucu kopyalayın, bir .txt dosyası olarak indirin veya başka bir geçiş yapmak için doğrudan geri gönderin.
FAQ
@media, @supports ve @keyframes içindeki seçicileri kontrol ediyor mu?
@media içindeki seçiciler, tercih ederseniz bunları atlamak için bir seçenekle diğer kurallar gibi kontrol edilir. @font-face ve @keyframes gibi diğer at-rules, karşılaştırma için hiçbir eleman seçiciyle ilgili değildir, bu nedenle dokunulmaz bırakılırlar.
JavaScript tarafından eklenen veya kaldırılan sınıfları yakalayabilir mi?
Hayır — eşleştirme, yapıştırdığınız HTML'ye karşı yapılır, canlı, komut dosyası uygulanmış bir sayfaya karşı değil. JavaScript tarafından değiştirilen sınıfları hariç tutmak için "Seçicileri yoksay" seçeneğini kullanın, örneğin is-open veya js-active, böylece hiçbir zaman kullanılmayan olarak bildirilmez.
Çocuk veya kardeş seçici gibi kombinatörler ne olur?
Araç, tam seçici zincirini — soy, çocuk, komşu kardeş ve genel kardeş — yapıştırılan HTML yapısına karşı takip eder, yalnızca son sınıf adına karşı değil.
Bildiğim kullanılan bir seçici neden hala kullanılmayan olarak listeleniyor?
Çoğu zaman onu kullanan HTML yapıştırılmadı veya sayfa yükledikten sonra dinamik olarak eklendi. Tam işlenen işaretlemeyi yapıştırın veya bir komut dosyası tarafından uygulanıyorsa "Seçicileri yoksay" seçeneğiyle seçiciyi hariç tutun.
CSS veya HTML'm herhangi bir yere yükleniyor mu?
Hayır. Karşılaştırma tamamen tarayıcınızda çalışır — yapıştırdığınız stil sayfası veya işaretleme hiçbir zaman cihazınızı terk etmez.