Extrahieren Sie nur das auf einer bestimmten Seite verwendete CSS

Angenommen, Sie hatten eine dynamisch generierte Site, an der zu viele Menschen in Vergangenheit und Gegenwart gearbeitet haben, und Sie haben jetzt eine Sammlung freigegebener Stylesheets, die über 20.000 CSS-Zeilen enthalten. Es ist überhaupt nicht organisiert, es gibt einige klassen- und id-basierte Selektoren, aber auch viel zu viele tagbasierte Selektoren. Angenommen, Sie haben 100 Vorlagen, die diese Stile über einen Controller verwenden.

Gibt es ein Tool, das vielleicht wie Firebug funktioniert und auf eine URL verweisen kann und das alle zutreffenden CSS-Selektoren für diese Seite ermittelt und in eine Datei kopiert? Grundsätzlich eine Möglichkeit, die freigegebenen Stylesheets Seite für Seite auseinander zu reißen.

Ich habe bereits Dust-Me Selectors verwendet, ein Firefox-Plugin. Es ist sehr einfach zu bedienen und vielseitig, da es eine kombinierte Liste über mehrere Seiten hinweg verwaltet, von denen CSS-Werte verwendet werden.

Der Nachteil ist, dass ich es nicht automatisieren konnte, um eine ganze Site zu spinnen, so dass ich es letztendlich nur auf Schlüsselseiten / Vorlagen meiner Site verwendete. Es ist trotzdem sehr nützlich.

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

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

Entgegen dem obigen Kommentar ist Dust-Me Selectors 2.2 mit Firefox 3.6 kompatibel (ich habe es gerade installiert).

Zweifellos das beste Tool, das genau das tut, was Sie wollen, indem es nur das verwendete CSS auf die Seite bringt und es Ihnen ermöglicht, es einfach in Ihre Zwischenablage zu kopieren, ist dieses verwendete CSS- Erweiterungs- CSS

Hübsches Bild Beispiel

Diese sehen vielversprechend aus:

• Unused-CSS.com - Service, der Ihre Website spinnt und Ihnen die Ergebnisse per E- Mail sendet
• CSS-Verwendung - Firebug-Addon

(Nicht für Firefox, aber vielleicht hilft das jemandem)

Wenn Sie an Chrom arbeiten, können Sie diese Erweiterung verwenden:

CSS entfernen und kombinieren ( https://chrome.google.com/webstore/detail/css-remove-and-combine/cdfmaaeapjmacolkojefhfollmphonoh )

• Ermöglicht das Herunterladen eines kombinierten CSS mit allen verwendeten Stilen
• Zeigt nicht verwendete Stile im Popup-Fenster an
• enthält generierte Stile

Ich bin auf Uncss-Online gestoßen - einen inoffiziellen Server, der sehr praktisch zum Testen oder zur einmaligen Verwendung ist! Ich denke, es ist das beste Werkzeug, das mir begegnet ist.

UnCSS ist ein Tool, mit dem nicht verwendetes CSS aus Ihren Stylesheets entfernt wird. Es funktioniert über mehrere Dateien hinweg und unterstützt mit Javascript injiziertes CSS. Es kann folgendermaßen verwendet werden:

• Kopieren Sie HTML und CSS und fügen Sie sie in die dafür vorgesehenen Felder ein
• Klicktaste
• Warten Sie, bis Magie passiert
• Nicht verwendetes CSS ist weg, nehmen Sie den Rest und verwenden Sie es!

Sie können auf der Github-Seite nach weiteren erweiterten Möglichkeiten suchen , dieses Tool zu verwenden

SnappySnippet

Es gibt ein Open-Source-Ad-on von Chrome namens SnappySnippet. Ich fand es viel besser als andere, erweitert nur die bereits verfügbaren Entwicklertools in Chrome. Sie können sogar nur einen Teil der Seite extrahieren, um alle relevanten CSS zu erhalten. Schauen Sie sich diesen Stackoverflow-Beitrag an

Hier ist meine Lösung mit 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';

Am Ende cssInlinebefindet sich eine Textliste aller Stahlblätter der Seite und ihres Inhalts.

Beispiel:

    /* 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: Nicht verwendetes CSS suchen - CLI-Tool, verwendet Phantomjs und führt JS auf der Seite aus, kann für URLs verwendet werden
• grunt-uncss - funktioniert nur bei statischen Dateien
• ( kritisches CSS - extrahiert CSS für Elemente, die im Browserfenster sichtbar sind)

Suchen Sie nach PurifyCSS und dies für diejenigen, die mit CLI oder Gulp / Grunt / Webpack umgehen können

Sie können den nicht verwendeten Stil von einer einzelnen Seite oder mehreren Seiten oder aus dem gesamten Projekt entfernen, obwohl die Klassen von Javascript eingefügt werden.

Wenn Sie googeln können, gibt es unzählige Ressourcen, von denen Sie mehr über PurifyCSS erfahren können.

Diese Firefox-Erweiterung wird wahrscheinlich Ihr Problem lösen, Dust-Me Selectors . Es gibt auch eine winzige Desktop-App namens CssCleaner oder CssHelper, aber ich konnte keinen Link dazu finden ... (habe sie einfach hier auf meinem Computer vor langer Zeit für eine ähnliche Aufgabe heruntergeladen)

Wenn Sie mit einzelnen Seiten arbeiten, können Sie auch mein Lesezeichen verwenden, um schnell nur das CSS abzurufen, das tatsächlich von der Webseite verwendet wird:

1. Gehen Sie hier (wenn dieser Link defekt ist, können Sie ihn auch von Pastebin erhalten ).
2. Ziehen Sie die große Schaltfläche unter "Lesezeichen herunterladen" auf Ihre Lesezeichen-Symbolleiste.

Das ist es. Wenn Sie nun eine statische Seite kapseln möchten (dh um sie portabel zu machen oder sie von einem eigenen Iframe aus bereitzustellen), klicken Sie einfach auf das Lesezeichen und es wird das gesamte verwendete CSS auf der aktuellen Seite in einer Überlagerung angezeigt. Klicken Sie auf den Schatten, um die Überlagerung zu schließen.

Eine gute Sache bei dieser Lösung ist, dass sie reaktionsfähige Seiten unterstützt, da die Medienabfragen auch extrahiert werden. Als Bonus sind Medienabfragen durch die Anzeigengröße Spezifität sortiert (zB @media (max-width: 767px)kommen nach @media (max-width: 1023px) ).

Bei Bedarf kann ich auch eine Option hinzufügen, um das generierte CSS zu minimieren. Da ich dieses Lesezeichen nur für meine eigenen Bedürfnisse verwendet habe, wurde es nicht umfassend getestet. Bitte melden Sie Probleme in den Kommentaren.

HINWEIS: Damit dieses Lesezeichen mit lokalen Dateien in Chrome funktioniert, fügen Sie --allow-file-access-from-fileses dem Chrome-Verknüpfungsziel hinzu. Beispiel:

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

Versuchen Sie es mit diesem Tool, bei dem es sich nur um ein einfaches JS-Skript handelt. Https://github.com/shashwatsahai/CSSExtractor/ Mit diesem Tool können Sie das CSS von einer bestimmten Seite abrufen , auf der alle Quellen für aktive Stile aufgelistet sind, und es in einem JSON mit Quelle als speichern Schlüssel und Regeln als Wert. Es lädt das gesamte CSS aus den href-Links und teilt alle von ihnen angewendeten Stile mit. Sie können die Ausgabe in einer JSON-Datei mit einem beliebigen Namen speichern.

Hmm .. Ich würde dies mit brutaler Gewalt tun, indem ich die verschiedenen CSS-Selektoren mithilfe einer serverseitigen Analyse der CSS-Datei extrahiere und diese dann jeweils als jQuery-Selektor im Browser ausführe. Nicht sehr elegant, sollte aber funktionieren?

Sie können auch http://getcssusedinapage.com verwenden , um das auf einer Seite verwendete CSS abzurufen. Es ist kostenlos, schnell und bietet Ihnen viele Details sowie minimierten und optimierten CSS-Code, den Sie einfach kopieren und in Ihre Website einfügen können

Ab September 2020 ist diese Frage fast 10 Jahre alt. Die meisten der bereitgestellten Lösungen funktionieren nicht mehr oder die verknüpften Projekte sind verschwunden.

Die Frage ist jedoch nach wie vor äußerst relevant, da Google jetzt die Seitengeschwindigkeit als eine seiner Priorisierungsmetriken verwendet.

Nachdem ich einige der aufgelisteten Links recherchiert hatte, fand ich purgecss.com . Dies scheint die beste Option zu sein, um nicht verwendetes CSS in modernen Web-Apps / SPAs mit Angular, React, Vue usw. zu bereinigen. Es gibt auch eine Build-Integration mit PostCSS, Webpack, Grunt und Gulp.

Außerdem scheint UnCSS weiterhin beibehalten zu werden. Es ist so leistungsfähig wie PurgeCSS, aber nicht so integriert in Build-Prozesse oder einseitige Javascript-Apps.