C'è un modo per verificare quali stili CSS vengono utilizzati o meno in una pagina web?

121

Vuoi sapere quali stili CSS sono attualmente utilizzati su una pagina web.

css

— AIUTO
fonte

2

Usa un browser con un ispettore CSS. Safari e Chrome (alias Webkit) lo forniscono come parte degli strumenti per sviluppatori. In Firefox questo è fornito dal plugin Firebug. Internet Explorer non ha nulla di simile che io sappia. L'ispettore ti consentirà di selezionare un elemento, fare clic con il pulsante destro del mouse e scegliere "Ispeziona elemento", quindi ti mostrerà quali selettori e quali singole regole sono applicate all'elemento selezionato.

— Lee

La barra degli strumenti per sviluppatori @Lee ie8 si comporta allo stesso modo di Firebug nei selettori CSS, puoi selezionare e vedere gli stili applicati sul lato destro.

— kobe

possibile duplicato di Estrazione solo del css utilizzato in una pagina specifica

— cweiske

58

Installa il componente aggiuntivo CSS Usage per Firebug ed eseguilo su quella pagina. Ti dirà quali stili vengono utilizzati e non utilizzati da quella pagina.

— kobe
fonte

@Harry, una volta installato questo plugin, sarà nella scheda come parte di Firebug dove hai net e tutto //// fammi sapere se hai bisogno di qualcos'altro

— kobe

33

C'è qualcosa di simile in Chrome?

— Pedro Luz

3

Questo non sembra funzionare più e sfortunatamente non è più supportato.

— nostromo

1

Attenzione che Firebug non è più mantenuto. Penso che questo componente aggiuntivo non funzioni con i DevTools integrati in Firefox.

— Andrew

È possibile utilizzare l'opzione di controllo in Chrome durante l'ispezione. Questo mostra solo CSS non utilizzato in quella particolare pagina.

— Sarath Hari

81

Google Chrome ha due modi per verificare la presenza di CSS inutilizzati .

1. Scheda Audit: > Fare clic con il pulsante destro del mouse su + Inspect Element sulla pagina, trovare la scheda "Audit" ed eseguire l'audit, assicurandosi che "Web Page Performance" sia selezionato.

Elenca tutti i tag CSS inutilizzati - vedi l'immagine sotto.

Aggiornamento: - - - - - - - - - - - - - - OPPURE - - - - - - - - - - - - - -

2. Scheda Copertura: > Fai clic con il pulsante destro del mouse + Ispeziona elemento nella pagina, trova i tre punti all'estrema destra (cerchiati nell'immagine) e apri Console Drawer (o premi Esc), infine fai clic sui tre punti a sinistra nel cassetto (cerchiati nell'immagine) per aprire lo strumento Copertura.

Chrome ha lanciato uno strumento per vedere CSS e JS inutilizzati - Chrome 59 Update Consente di avviare e interrompere una registrazione (quadrato rosso nell'immagine) per consentire una migliore copertura di un'esperienza utente sulla pagina.

Mostra tutti i CSS / JS utilizzati e non utilizzati nei file - vedi l'immagine sotto.

— Cordell
fonte

3

Sarebbe fantastico vedere anche quali vengono utilizzati ... ma è fantastico, grazie.

— Serj Sagan

Per quanto ne so, se vuoi sapere cosa viene utilizzato, la soluzione migliore è installare un plug-in per Chrome - scusa

— Cordell

Il nuovo aggiornamento di Chrome 59 ti consente di vedere CSS e JS usati / non utilizzati

— Cordell

Quale libreria utilizza Chrome per eseguire questa operazione?

— Alexey Shevelyov

1

@UMAR multi-page website coverage == (single-page coverage) * n dove n = ogni pagina in un sito web . Classificare lo strumento / questa risposta come "inutile" non giova a nessuno.

— Shai Cohen,

40

Solo per completezza e perché è stato chiesto nei commenti, ora c'è anche lo strumento di controllo CSS in Chrome per lo stesso scopo. Alcuni dettagli qui:

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

— Jan Petzold
fonte

3

Non sono sicuro che lo "strumento di controllo CSS" a cui si riferisce questa risposta sia lo stesso della scheda Audit negli Strumenti per sviluppatori di Chrome, ma questo ti dirà quali regole CSS non sono utilizzate (ad esempio "Some.css: 42% non è utilizzato dalla pagina corrente. ").

— Kenny Evitt

11

Dai un'occhiata a UnCSS . Aiuta a creare un file CSS di CSS utilizzati.

— Robert Brisita
fonte

1

Questo è un ottimo programma. Grazie! Rob

— r0berts

1

Buon strumento web per una tantum. ty

— billynoah

1

Questo è aweso - UnCSS cannot be run on non-HTML pages, such as templates or PHP files- non importa .......

— Brian Powell

@ brian-powell sì, l'output dei modelli dovrebbe essere generato per primo. In quale altro modo UnCSS saprebbe cosa è necessario?

— Robert Brisita

8

Sto usando CSS Dig . È fatto per il cromo, ma penso che sia un ottimo strumento!

— cs.matyi
fonte

L'ho appena provato: fa tutto chiamando a casa su cssdig.com, quindi non è in grado di vedere o analizzare nulla ospitato localmente.

— Brilliand

0

Prova a utilizzare questo strumento, che è solo un semplice script js https://github.com/shashwatsahai/CSSExtractor/ Questo strumento aiuta a ottenere il CSS da una pagina specifica che elenca tutte le fonti per gli stili attivi e salvarlo in un JSON con sorgente come chiave e regole come valore. Carica tutto il CSS dai collegamenti href e indica tutti gli stili applicati da essi. Puoi modificare il codice per salvare tutti i CSS in un file .css. Combinando così tutti i tuoi css.

— Shashwat Sahai
fonte

0

Senza strumenti di terze parti e app, puoi trovare CSS e javascript inutilizzati utilizzando gli strumenti di sviluppo di Chrome nella scheda Copertura. leggi il post qui sotto degli sviluppatori di Google. scheda copertura cromata

— Mahdi Safari
fonte