Mostra codice CSS mancante in Google Chrome

Come posso vedere quali proprietà CSS non vengono trovate/applicate da Chrome? (Se qualsiasi altro browser può fare il trucco, sto bene con esso. Chrome è la mia prima preferenza.)Mostra codice CSS mancante in Google Chrome

Se ho

<div class="myClass">

e non ho myClass nel mio file CSS, ho vorrebbe che Chrome registrasse un errore o un avviso.

Conosco l'ispettore elementi che funziona correttamente per osservare manualmente i singoli elementi. Voglio qualcosa che possa eseguire la scansione dell'intero DOM e segnalare eventuali CSS mancanti.

fonte

2014-07-22 Koder

Potrebbe esserci una ragione per la classe non correlata ai CSS. Potrebbe essere usato da Javascript, quindi rimuoverlo potrebbe rompere la funzionalità del sito. –

no strumento di sviluppo predefinito su Chrome ti aiuterà con questo, è possibile consultare http://stackoverflow.com/q/983586/1542290 –

@Paulie_D, Hai ragione, ma questo non è il caso nel mio sito come sono quasi nel pieno controllo di cosa sta succedendo .. – Koder

Non esistono "selettori CSS mancanti" poiché è possibile utilizzare classi e ID per altri scopi diversi dagli stili.

Ma è possibile rilevare le regole CSS inutilizzate (come indicato da Berdiya Onur) e si può anche fare il contrario e rilevare classi e ID non utilizzati da alcuna regola CSS.

Hai solo bisogno di creare un elenco delle regole CSS (puoi farlo con document.styleSheets) e confrontarlo con un elenco di tutte le classi e ID (puoi ottenerlo usando document.querySelectorAll ('*')) .

In strumenti di sviluppo (F12) è possibile eseguire solo andare alla scheda 'Audit' ed eseguire un 'test delle prestazioni Web'. Mostrerà anche quali file contengono le regole non utilizzate.

Ho fatto tutto in jsbin, spero vi piaccia (controllate il JS)!

fonte

2014-07-22 12:53:49 rafaelcastrocouto

Il motivo per cui ho fatto questa domanda è stato a causa di un cambio di stile recente nel mio sito web. Ho un nuovo css che ha alcuni dei vecchi selettori di CSS in esso ma manca alcuni di loro. Posso eseguire un confronto di file tra nuovo e vecchio, ma volevo vedere che cosa sta utilizzando l'html e riempire gli spazi vuoti solo con quelli che vengono utilizzati. La tua soluzione ti sarà sicuramente d'aiuto. Grazie. – Koder

@Paulie_D e Rafael - Il fatto che puoi raggruppare le classi per svolgere altre attività non significa che non sia utile trovare quelle che non sono nei tuoi fogli. Ad esempio, vorrei usare jqgrid senza un'installazione completa dell'interfaccia utente jQuery. Quali classi ho bisogno di shim? È importante sapere che potresti ottenere un superset di ciò che è necessario, ma non un esercizio inutile. – ruffin

Mostra codice CSS mancante in Google Chrome

risposta

Problemi correlati