Estrazione solo del css utilizzato in una pagina specifica

Supponi di avere un sito generato dinamicamente su cui hanno lavorato troppe persone, passate e presenti, e ora hai una raccolta di fogli di stile condivisi che contengono oltre 20.000 righe di CSS. Non è affatto organizzato, ci sono alcuni selettori basati su classi e ID ma anche troppi selettori basati su tag. E poi dì di avere 100 modelli che usano questi stili, tramite alcuni controller.

Esiste 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 scaricherebbe in un file? Fondamentalmente un modo per strappare i fogli di stile condivisi pagina per pagina.

Ho già utilizzato Dust-Me Selectors, 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 eseguire lo spider di un intero sito, quindi ho finito per usarlo solo su pagine / modelli chiave 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 sopra, Dust-Me Selectors 2.2 è compatibile con Firefox 3.6 (l'ho appena installato).

Senza dubbio lo strumento migliore che fa esattamente quello che vuoi solo ottenendo il CSS utilizzato sulla pagina e ti consente di copiarlo semplicemente negli appunti è questa estensione di Chrome CSS utilizzato

Bel esempio di immagine

Questi sembrano promettenti:

• Unused-CSS.com : servizio che analizza il tuo sito Web e ti invia i risultati tramite posta elettronica
• Utilizzo CSS : componente aggiuntivo Firebug

(Non per Firefox ma forse questo aiuta qualcuno)

Se stai lavorando su Chrome puoi usare questa estensione:

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

• ti permette di scaricare un css combinato con tutti gli stili utilizzati
• mostra gli stili inutilizzati nella finestra popup
• include gli stili generati

Mi sono imbattuto in Uncss-Online - Server non ufficiale, molto comodo per i test o per l'utilizzo una tantum! Penso che sia lo strumento migliore che abbia mai incontrato.

UnCSS è uno strumento che rimuove i CSS inutilizzati dai fogli di stile. Funziona su più file e supporta CSS iniettati da Javascript. Può essere utilizzato in questo modo:

• Copia e incolla il tuo HTML e CSS nelle caselle fornite
• Fare clic sul pulsante
• Aspetta che avvenga la magia
• Il CSS inutilizzato è sparito, prendi il resto e usalo!

Puoi controllare la loro pagina Github per altri modi avanzati di utilizzare questo strumento

SnappySnippet

C'è un add -on 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 pertinenti. Guarda questo post di stackoverflow

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 fogli di acciaio della pagina e del 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; }

• uncss: Trova CSS inutilizzati - strumento cli, utilizza phantomjs ed esegue JS sulla pagina, può essere utilizzato sugli URL
• grunt-uncss - funziona solo su file statici
• ( css critico - estrae CSS per gli elementi visibili nella finestra del browser)

Controlla PurifyCSS , e questo per coloro che possono gestire CLI o Gulp / Grunt / Webpack

Puoi rimuovere lo stile inutilizzato da una singola pagina o più pagine o dall'intero progetto, anche se le classi vengono iniettate da javascript.

Se puoi google, ci sono tonnellate di risorse là fuori da cui puoi imparare a conoscere PurifyCSS.

Questa estensione per Firefox risolverà probabilmente il tuo problema, Dust-Me Selectors . C'è anche una piccola app desktop chiamata CssCleaner o CssHelper ma non sono riuscito a trovare un collegamento ad essa ... (basta averla qui sulla mia macchina scaricata molto tempo fa per un'attività simile)

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

1. Vai qui (se questo collegamento è rotto, puoi ottenerlo anche da pastebin ).
2. Trascina il pulsante grande sotto "Scarica segnalibro" sulla barra dei segnalibri.

Questo è tutto. Ora ogni volta che vuoi incapsulare una pagina statica (cioè per renderla portabile o se intendi servirla dal suo iframe), fai semplicemente clic sul segnalibro e mostrerà tutti i CSS utilizzati nella pagina corrente in una sovrapposizione. Fare clic sull'ombra per chiudere la sovrapposizione.

Una cosa buona di questa soluzione è che supporta pagine reattive poiché vengono estratte anche le media query. Come bonus, le media query vengono ordinate in base alla specificità delle dimensioni del viewport (ad esempio, @media (max-width: 767px)verrà dopo @media (max-width: 1023px) ).

Se è necessario, posso anche aggiungere un'opzione per minimizzare il CSS generato. Poiché ho utilizzato questo bookmarklet solo per le mie esigenze, non è stato ampiamente testato, quindi per favore segnala eventuali problemi nei commenti.

NOTA: per far funzionare questo bookmarklet con i file locali in Chrome, aggiungilo --allow-file-access-from-filesalla destinazione del collegamento di Chrome. Esempio:

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

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 salvare l'output in un file JSON con qualsiasi nome.

Hmm .. Getterei un po 'di forza in questo estraendo i vari selettori CSS utilizzando un'analisi lato server del file CSS, quindi eseguirò ciascuno di questi come selettore jQuery all'interno del browser. Non molto elegante, ma dovrebbe funzionare?

A partire da settembre 2020 questa domanda ha quasi 10 anni. La maggior parte delle soluzioni fornite non funziona più oi progetti collegati sono scomparsi.

Tuttavia, la domanda è ancora estremamente pertinente poiché Google ora utilizza la velocità della pagina come una delle sue metriche di priorità.

Dopo aver fatto una serie di ricerche su tutti i collegamenti elencati, ho trovato purgecss.com . Questa sembra essere l'opzione migliore per ripulire CSS inutilizzati nelle moderne app web / SPA usando Angular, React, Vue, ecc. C'è anche l'integrazione di build con PostCSS, Webpack, Grunt e Gulp.

Inoltre, UnCSS sembra ancora essere mantenuto. È potente quanto PurgeCSS ma non integrato nei processi di compilazione o nelle app javascript a pagina singola.

Puoi anche utilizzare http://getcssusedinapage.com per ottenere il CSS utilizzato in una pagina. È gratuito, veloce e ti restituisce molti dettagli insieme a un codice CSS ottimizzato e ridotto al minimo che puoi semplicemente copiare e incollare nel tuo sito web