2013-04-02 14 views
10

Ho una pagina che contiene più fogli di stile e la maggior parte degli stili in essa contenuti non sono effettivamente utilizzati nella pagina (obsoleto, ecc.). Vorrei esportare un nuovo foglio di stile contenente tutti gli stili sulla pagina che sono effettivamente in uso. C'è un modo per fare questo?Scopri quali stili CSS vengono utilizzati su una determinata pagina

+1

possibile duplicato del [c'è un modo per verificare quali stili CSS vengono utilizzati o non utilizzati su una pagina Web?] (http: // StackOverflow.it/questions/4361007/is-there-a-way-to-check-which-css-styles-are-being-used-or-not-used-on-a-web-pag) –

+3

Ho trovato questo dupe by Cerca su google la tua domanda parola per parola. –

+0

questo potrebbe essere d'aiuto: http://stackoverflow.com/questions/2224154/find-unused-images-css-rules-js-script-blocks –

risposta

3

Penso che questo sito Web faccia quello che vuoi: CSS Trashman. Ci vuole un po 'di tempo per funzionare, ma funziona. Ha ridotto il CSS del mio sito personale da 3,31 KB a 402 byte.

Se si preferisce utilizzare uno strumento da riga di comando, CSS Rationator alimenta CSS Trashman.

+2

http://www.csstrashman.com/ reindirizza solo a https://github.com/begriffs/css-ratiocinator Data: 2015-04-02 –

+0

Stavo cercando la stessa cosa e ho trovato un piccolo javascript per fare questo. Puoi verificarlo su https://github.com/mocanuga/unusedCSS – mocanuga

+0

@mocanuga Come dovremmo usarlo? – Jordan

1

ho trovato questo: http://unused-css.com/

Caratteristiche

  • Esplora le pagine del vostro sito automaticamente, trovare le selettori CSS inutilizzati e creare nuovi file pulito CSS è possibile scaricare
  • Autentica ed esplorare le pagine che richiedono l'autenticazione. Quindi controllerà le regole CSS non utilizzate.
  • ricerca di regole CSS in file JavaScript
  • Personalizzare l'elenco dei selettori CSS per mantenere
  • anteprima la modifica apportata al file CSS
  • comandi
  • Segui CSS importazione
  • Impostare un agente utente per il crawler

Ma io non sono sicuro che questo sarebbe una buona idea, qualcosa come: JavaScript trigered selettori, visualizzazione contestuale, codice del layout condizionale ... Quindi, fate attenzione se y ou tentare di 'batch' lavorare i file .css.

+0

Non esporta selettore usato, mostra solo non utilizzato = [ – ThomasReggi

+1

Sembra impossibile ottenere i risultati senza pagare. – MECU

5

Ho avuto lo stesso problema, complicato dal fatto che le pagine che devo analizzare sono di sola accesso e per lavoro, quindi non posso fornire il mio login a un'app esterna (che è come le scansioni inutilizzate-css.com pagine dietro un muro di accesso).

ho trovato due estensioni di Chrome:

  1. CSS Remove and Combine
  2. unusedCSS

ho usato solo il primo, come ha fatto egregiamente. Ha contato gli elementi CSS nella pagina, mi ha detto quanti sono stati usati e non utilizzati e mi ha permesso di scaricare un foglio di stile di tutti gli elementi usati. Non sembrava includere funzionalità per sfogliare un sito e accumulare elementi visti, era solo una pagina per pagina, ma mi permetteva comunque di sfoltire 450 fino a 150.

2

Nel Chrome DevTools, c'è una scheda Audit che vi permetterà di eseguire una verifica pagina Web Prestazioni e visualizzato un elenco di regole CSS inutilizzati:

enter image description here

Problemi correlati