Bir web sayfasında hangi CSS stillerinin kullanıldığını veya kullanılmadığını kontrol etmenin bir yolu var mı?

121

Şu anda bir web sayfasında hangi CSS stillerinin kullanıldığını bilmek ister.

css

— YARDIM
kaynak

2

CSS denetçisi olan bir tarayıcı kullanın. Safari ve Chrome (Webkit olarak da bilinir) bunu geliştirici araçlarının bir parçası olarak sağlar. Firefox'ta bu, Firebug eklentisi tarafından sağlanır. Internet Explorer'da bildiğim kadarıyla benzer bir şey yok. Denetçi, bir öğeyi seçmenize, sağ tıklamanıza ve "Öğeyi İncele" yi seçmenize izin verir - ardından, seçtiğiniz öğeye hangi seçicilerin ve hangi kuralların uygulandığını size gösterecektir.

— Lee

@Lee ie8 geliştirici araç çubuğu, css seçicilerdeki firebug gibi davranır, sağ tarafta uygulanan stilleri seçebilir ve görebilirsiniz.

— kobe

yalnızca belirli bir sayfada kullanılan

— css'i

58

Firebug için CSS Kullanımı eklentisini yükleyin ve o sayfada çalıştırın. Bu sayfa tarafından hangi stillerin kullanıldığını ve kullanılmadığını size söyleyecektir.

— kobe
kaynak

@Harry, bu eklentiyi yükledikten sonra, sekmede ağa sahip olduğunuz firebug'ın bir parçası olacak ve //// başka bir şeye ihtiyacınız olursa bana bildirin

— kobe

33

Chrome'da buna benzer bir şey var mı?

— Pedro Luz

3

Bu artık işe yaramıyor gibi görünüyor ve maalesef artık desteklenmiyor.

— nostromo

1

Firebug'ın artık korunmadığına dikkat edin. Bu eklentinin Firefox yerleşik DevTools ile çalışmadığını düşünüyorum.

— Andrew

İnceleme sırasında Chrome'da denetim seçeneğini kullanabilirsiniz. Bu sadece o sayfada kullanılmayan css'i gösterir.

— Sarath Hari

81

Google Chrome, kullanılmayan CSS'yi kontrol etmenin iki yolu vardır .

1. Denetim Sekmesi: > Sayfada Sağ Tık + Öğeyi İncele, "Denetim" sekmesini bulun ve denetimi çalıştırarak "Web Sayfası Performansı" nın işaretli olduğundan emin olun.

Kullanılmayan tüm CSS etiketlerini listeler - aşağıdaki resme bakın.

Güncelleme: - - - - - - - - - - - - - - VEYA - - - - - - - - - - - - - -

2. Kapsam Sekmesi: > Sayfada Sağ Tık + Öğeyi İncele, en sağdaki üç noktayı bulun (resimde daire içine alınmış) ve Konsol Çekmecesini açın (veya Esc tuşuna basın), son olarak çekmecenin sol tarafındaki üç noktayı tıklayın (daire içine alınmış Resimde) Kapsam aracını açmak için.

Chrome, kullanılmayan CSS ve JS'yi görmek için bir araç başlattı - Chrome 59 Güncellemesi Sayfadaki bir kullanıcı deneyiminin daha iyi kapsanmasını sağlamak için bir kaydı (görüntüdeki kırmızı kare) başlatmanıza ve durdurmanıza olanak tanır.

Dosyalarda kullanılan ve kullanılmayan tüm CSS / JS'leri gösterir - aşağıdaki resme bakın.

— Cordell
kaynak

3

Hangilerinin de kullanıldığını görmek harika olurdu .... ama bu harika, teşekkürler.

— Serj Sagan

Anlayabildiğim kadarıyla, neyin kullanıldığını bilmek istiyorsanız, en iyi bahsiniz Chrome için bir eklenti yüklemektir - üzgünüm

— Cordell

Yeni Chrome 59 güncellemesi, kullanılmış / kullanılmayan CSS ve JS'yi görmenize olanak tanır

— Cordell

Chrome bunu yapmak için hangi kitaplığı kullanır?

— Alexey Shevelyov

1

@UMAR multi-page website coverage == (single-page coverage) * n burada n = bir web sitesindeki her sayfa . Aracı / bu cevabı "işe yaramaz" olarak sınıflandırmak kimseye fayda sağlamaz.

— Shai Cohen

40

Sadece eksiksizlik için ve yorumlarda sorulduğu için - şimdi Chrome'da aynı amaç için CSS denetim aracı da var . Burada bazı ayrıntılar:

http://meeech.amihod.com/very-useful-find-unused-css-rules-with-google

— Jan Petzold
kaynak

3

Bu yanıtın bahsettiği "CSS denetim aracı" nın Chrome Geliştirici Araçlarındaki Denetimler sekmesiyle aynı olduğundan emin değilim , ancak bu size hangi CSS kurallarının kullanılmadığını söyleyecektir (ör. "Bazı.css:% 42 mevcut sayfa tarafından kullanılmıyor. ").

— Kenny Evitt

11

UnCSS'ye bir göz atın . Kullanılan CSS'den bir CSS dosyası oluşturmaya yardımcı olur.

— Robert Brisita
kaynak

1

Bu harika bir program. Teşekkürler! Rob

— r0berts

1

Tek seferlik iyi bir web aracı. ty

— billynoah

1

Bu harika - UnCSS cannot be run on non-HTML pages, such as templates or PHP files- boşver .......

— Brian Powell

@ brian-powell evet, önce şablon çıktısının oluşturulması gerekir. UnCSS neye ihtiyaç olduğunu başka nasıl bilebilir?

— Robert Brisita

8

CSS Dig kullanıyorum . Chrome için üretildi, ancak bence harika bir araç!

— cs.matyi
kaynak

Bunu denedim - her şeyi cssdig.com'u arayarak yapıyor, bu yüzden yerel olarak barındırılan hiçbir şeyi göremiyor veya analiz edemiyor.

— Brilliand

0

Sadece basit bir js betiği olan bu aracı kullanmayı deneyin https://github.com/shashwatsahai/CSSExtractor/ Bu araç, aktif stiller için tüm kaynakları listeleyen belirli bir sayfadan CSS'nin alınmasına ve kaynak olarak bir JSON'a kaydetmenize yardımcı olur. değer olarak anahtar ve kurallar. Tüm CSS'yi href bağlantılarından yükler ve bunlardan uygulanan tüm stilleri söyler Tüm css'leri bir .css dosyasına kaydetmek için kodu değiştirebilirsiniz. Böylece tüm CSS'nizi birleştirir.

— Shashwat Sahai
kaynak

0

Herhangi bir üçüncü taraf araç ve uygulama olmadan, kapsam sekmesindeki krom geliştirme araçlarını kullanarak kullanılmayan CSS ve javascript'i bulabilirsiniz. google geliştiricilerinden aşağıdaki gönderiyi okuyun. Chrome kapsamı sekmesi

— Mehdi Safari
kaynak