Google Chrome'da eksik CSS'yi göster

Chrome tarafından hangi CSS özelliklerinin bulunamadığı/uygulanmadığını nasıl görebilirim? BenGoogle Chrome'da eksik CSS'yi göster

<div class="myClass">

varsa

(diğer tarayıcı hile yapabilirsiniz, ben. Krom benim ilk tercihidir. Onunla iyiyim) ve benim CSS dosyasındaki Sınıfım yok Chrome'un bir hata veya uyarı kaydetmesini ister.

Tek tek elemanlara manuel olarak bakmak için iyi çalışan eleman denetçisini biliyorum. Tüm DOM'yi tarayabilen ve eksik CSS'leri işaretleyebilecek bir şey istiyorum.

kaynak

2014-07-22 Koder

Sınıfın CSS ile ilgili olmaması için bir sebep olabilir. Javascript tarafından kullanılabilir, bu yüzden sitenin işlevselliğini bozabilir. –

Chrome'da varsayılan bir Google Tool aracı, bu konuda size yardımcı olacaktır, http://stackoverflow.com/q/983586/1542290 –

@Paulie_D adresine bakabilirsiniz. Haklısınız, fakat sitemde neredeyse durum böyle değil. neler olup bittiğini tam kontrolde .. – Koder

Sınıflar ve kimlikleri stiller dışındaki amaçlarla kullanabildiğiniz için "CSS seçicilerinde eksik" diye bir şey yoktur.

Ancak kullanılmayan CSS kurallarını (Berdiya Onur'un işaret ettiği gibi) algılayabilir ve bunu başka bir şekilde gerçekleştirebilir ve herhangi bir CSS kuralı tarafından kullanılmayan sınıfları ve kimlikleri belirleyebilirsiniz.

Sadece CSS kurallarının bir listesini oluşturmanız gerekir (bunu document.styleSheets ile yapabilirsiniz) ve tüm sınıfların ve kimliklerin bir listesiyle karşılaştırmanız gerekir (bunu document.querySelectorAll ('*') kullanarak alabilirsiniz) .

Geliştirici araçlarda (F12) 'Denetimler' sekmesine gidip 'Web performansı testi'ni çalıştırın. Ayrıca hangi dosyaların kullanılmayan kuralları içerdiğini de gösterecektir.

Hepsini jsbin'da yaptım, umarım beğenirsiniz (JS'ye bakın)!

kaynak

2014-07-22 12:53:49 rafaelcastrocouto

Bu soruyu sormamın sebebi web sitemdeki yeni bir stil düzeni değişikliğiydi. İçinde eski css seçicilerinden bazılarına sahip olan yeni bir css var, ancak bazılarını eksik. Yeni ile eski arasında bir dosyayı karşılaştırabilirim ama gerçek html'nin ne olduğunu ve sadece kullanılanlarla boşlukları doldurduğunu görmek istedim. Çözümünüz kesinlikle yardımcı olacaktır. Teşekkür ederim. – Koder

@Paulie_D & Rafael - Sınıfları başka görevlerde kullanacak şekilde kandırabilmeniz, sayfalarınızda bulunmayan öğelerin kullanışlı olmadığını bulmak anlamına gelmez. Örneğin, tam jQuery UI yüklemesi olmadan jqgrid kullanmak istiyorum. Ne tür sınıflara ihtiyacım var? Gerekli olanın bir üst kümesi olabileceğini bilmeniz önemlidir, ancak işe yaramaz bir egzersiz değildir. – ruffin

Google Chrome'da eksik CSS'yi göster

cevap

İlgili konular