Estrazione solo del css utilizzato in una pagina specifica

Question

Supponiamo che tu abbia un sito generato dinamicamente su cui sono state lavorate troppe persone, passate e presenti, e ora hai una raccolta di fogli di stile condivisi che contengono oltre 20.000 righe di CSS. Non è organizzato affatto, ci sono alcuni selettori di classe e id-based ma anche troppi selettori basati su tag. E poi dici di avere 100 modelli che usano questi stili, tramite qualche controller.

C'è uno strumento, forse qualcosa che funziona come Firebug, che puoi puntare a un URL e determinerebbe tutti i selettori CSS applicabili per quella pagina e li riverserà in un file? Fondamentalmente un modo per strappare i fogli di stile condivisi su una pagina per pagina.

Answer 1

ho usato Dust-Me Selectors prima , che è un plugin per Firefox. È molto facile da usare e versatile in quanto mantiene un elenco combinato su un numero di pagine di cui vengono utilizzati i valori CSS.

Lo svantaggio è che non ero in grado di automatizzarlo per spider un intero sito, quindi ho finito per usarlo solo sulle pagine chiave/tempate del mio sito. È comunque molto utile.

http://www.sitepoint.com/dustmeselectors/

https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/

Contrariamente al commento di cui sopra Dust-Me Selectors 2.2 è compatibile con Firefox 3.6 (ho appena installato).

Answer 2

Hmm .. Mi piacerebbe gettare un po 'di forza bruta in questo estraendo i vari selettori CSS utilizzando un analisi server del file CSS, quindi eseguirli come un selettore jQuery all'interno del browser. Non molto elegante, ma dovrebbe funzionare?

Answer 3

Questi sembrano promettenti:

• Unused-CSS.com - Servizio che i ragni tuo sito web e messaggi di posta elettronica i risultati
• CSS Usage - Firebug addon

Answer 4

Questa estensione di Firefox probabilmente risolverà il tuo problema, Dust-Me Selectors. C'è anche una piccola applicazione desktop chiamato CssCleaner o CssHelper ma non sono riuscito a trovare un link ad esso ... (basta qui alla mia macchina scaricato molto tempo fa per un compito simile)

Answer 5

SnappySnippet

C'è un annuncio open source di chrome chiamato SnappySnippet L'ho trovato molto meglio di altri semplicemente estende gli strumenti di sviluppo già disponibili in chrome. Puoi anche estrarre solo una parte della pagina con tutti i css rilevanti.Guardate this stackoverflow post

Answer 6

(non per Firefox, ma forse questo aiuta qualcuno)

Se si sta lavorando su Chrome è possibile utilizzare questa estensione:

CSS rimuovere e combinare (https://chrome.google.com/webstore/detail/css-remove-and-combine/cdfmaaeapjmacolkojefhfollmphonoh)

• consente di scaricare un css combinato con tutti gli stili utilizzati
• mostra gli stili non utilizzati nella finestra popup
• stili include generati

Answer 7

• uncss: Find Unused CSS - CLI Tool, usa phantomjs ed esegue JS nella pagina, possono essere utilizzati su URL
• grunt-uncss - funziona solo su file statici
• (critical css - estratti CSS per gli elementi visibili nella finestra del browser)

Answer 8

Giù le mani il migliore che fa esattamente quello che vuoi ottenendo solo il css utilizzato sulla pagina e permette di semplice copia al vostro clipboard e incolla è questa estensione Chrome CSS Used

bella immagine Esempio

Answer 9

Se hai a che fare con pagine singole , è anche possibile utilizzare il mio bookmarklet per afferrare rapidamente solo il CSS che viene effettivamente utilizzato dalla pagina web:

1. Go here (se questo link è rotto , puoi anche scaricarlo da pastebin).
2. Trascina il pulsante grande sotto "Scarica bookmark" sulla barra dei segnalibri.

Questo è tutto. Ora, ogni volta che si desidera incapsulare una pagina statica (ad esempio, per renderla portabile o se si intende servirla dal proprio iframe), basta fare clic sul segnalibro e verrà visualizzato tutto il CSS utilizzato nella pagina corrente in una sovrapposizione. Clicca sull'ombra per chiudere la sovrapposizione.

Una cosa buona con questa soluzione è che supporta pagine reattive poiché vengono estratte anche le query multimediali. Come bonus, le query multimediali vengono ordinate per specificità della dimensione del viewport (ad esempio, @media (max-width: 767px) verrà dopo@media (max-width: 1023px)).

Se c'è una necessità, posso anche aggiungere un'opzione per minimizzare il CSS generato. Dal momento che ho usato questo bookmarklet solo per le mie esigenze, non è stato ampiamente testato, quindi per favore segnala eventuali problemi nei commenti.

NOTA: per fare in modo che questo bookmarklet funzioni con i file locali in Chrome, aggiungi --allow-file-access-from-files alla destinazione del collegamento Chrome.Esempio:

"C:\Program Files\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files 

Answer 10

Ecco la mia soluzione utilizzando JavaScript:

var css = []; 
for (var i=0; i<document.styleSheets.length; i++) 
{ 
    var sheet = document.styleSheets[i]; 
    var rules = ('cssRules' in sheet)? sheet.cssRules : sheet.rules; 
    if (rules) 
    { 
     css.push('\n/* Stylesheet : '+(sheet.href||'[inline styles]')+' */'); 
     for (var j=0; j<rules.length; j++) 
     { 
      var rule = rules[j]; 
      if ('cssText' in rule) 
       css.push(rule.cssText); 
      else 
       css.push(rule.selectorText+' {\n'+rule.style.cssText+'\n}\n'); 
     } 
    } 
} 
var cssInline = css.join('\n')+'\n'; 

Alla fine, cssInline è un elenco testuale di tutti i steelsheets della pagina e il loro contenuto.

Esempio:

/* Stylesheet : http://example.com/cache/css/javascript.css */ 
.javascript .de1, .javascript .de2 { -webkit-user-select: text; padding: 0px 5px; vertical-align: top; color: rgb(0, 0, 0); border-left-width: 1px; border-left-style: solid; border-left-color: rgb(204, 204, 204); margin: 0px 0px 0px -7px; position: relative; background: rgb(255, 255, 255); } 
.javascript { color: rgb(172, 172, 172); } 
.javascript .imp { font-weight: bold; color: red; } 

/* Stylesheet : http://example.com/i/main_master.css */ 
html { } 
body { color: rgb(24, 24, 24); font-family: 'segoe ui', 'trebuchet MS', 'Lucida Sans Unicode', 'Lucida Sans', sans-serif; font-size: 1em; line-height: 1.5em; margin: 0px; padding: 0px; background: url(http://pastebin.com/i/bg.jpg); } 
a { color: rgb(204, 0, 51); text-decoration: none; } 
a:hover { color: rgb(153, 153, 153); text-decoration: none; } 
.icon24 { height: 24px; vertical-align: middle; width: 24px; margin: 0px 4px 0px 10px; } 
#header { border-radius: 0px 0px 6px 6px; color: rgb(255, 255, 255); background-color: rgb(2, 56, 89); } 
#super_frame { min-width: 1100px; width: 1200px; margin: 0px auto; } 
#monster_frame { -webkit-box-shadow: rgb(204, 204, 204) 0px 0px 10px 5px; box-shadow: rgb(204, 204, 204) 0px 0px 10px 5px; border-radius: 5px; border: 1px solid rgb(204, 204, 204); margin: 0px; background-color: rgb(255, 255, 255); } 
#header a { color: rgb(255, 255, 255); } 
#menu_2 { height: 290px; } 

/* Stylesheet : [inline styles] */ 
.hidden { display: none; } 

Answer 11

Controllare PurifyCSS, e questo per coloro che in grado di gestire CLI o Gulp/Grunt/Webpack

È possibile rimuovere lo stile utilizzato da pagina singola o più pagine o dalla intero progetto, anche se pensavo che le classi venissero iniettate da javascript.

Se si può google, ci sono tonnellate di risorse da cui è possibile conoscere PurifyCSS.