CSS Extractor

HTML-Eingabe

Extrahiertes CSS

CSS-Extraktionsbeispiele

CSS aus <style>-Tags und Inline-Styles extrahieren. Beispiel:

HTML mit eingebetteten Styles

Eingabe HTML:

Eingabe

Extrahiertes CSS:

Ausgabe

Nutzen Sie oben Beispiel, um weitere Beispieldaten zu laden.

Was ist ein CSS Extractor?

HTML-Dateien betten oft CSS in <style>-Tags oder Inline-style-Attributen ein. Ein CSS Extractor parst das HTML und extrahiert alle Styles in eine einzelne CSS-Datei. Nützlich für die Migration eingebetteter Styles zu externen Stylesheets, die Prüfung welches CSS eine Seite nutzt, oder die Konvertierung von gescrapedem HTML zu bearbeitbarem CSS. Die HTML-Spezifikation und CSS-Spezifikation definieren die Struktur.

Dieses Tool läuft in Ihrem Browser. Fügen Sie HTML ein oder laden Sie eine .html-Datei hoch. Es extrahiert <style>-Block-Inhalt und Inline-Styles. Nichts wird an einen Server gesendet. Zum Formatieren der Ausgabe den CSS Formatierer. Zum Kombinieren mehrerer CSS-Dateien den CSS Combiner.

So verwenden Sie dieses Tool

HTML einfügen oder hochladen

Fügen Sie Ihr HTML in den linken Editor ein oder klicken Sie auf Hochladen, um eine .html- oder .htm-Datei zu laden. Nutzen Sie Beispiel zum Laden von Beispiel-HTML mit eingebetteten Styles.

Extrahiertes CSS prüfen

Das rechte Panel zeigt extrahiertes CSS aus <style>-Tags und Inline-Styles. Zur Validierung den CSS Validator. Zum Minimieren den CSS Minimierer.

Kopieren oder Herunterladen

Nutzen Sie Kopieren oder Herunterladen, um das CSS zu speichern. Zum Konvertieren von HTML zu Markdown HTML zu Markdown. Für CSS zu Inline (E-Mail) CSS zu Inline.

Wann CSS-Extraktion hilft

Bei der Migration einer Legacy-Site oder der Konvertierung eines Einzeldateien-HTML-Dokuments zu einem strukturierten Projekt ist die CSS-Extraktion der erste Schritt. E-Mail-Vorlagen, CMS-Exporte oder gescrapte Seiten haben oft eingebettete Styles. Dieses Tool gibt Ihnen einen Ausgangspunkt für die Refaktorierung. MDN HTML und MDN CSS dokumentieren die Standards.

Zum Kombinieren von extrahiertem CSS mit anderen Stylesheets den CSS Combiner. Für Vendor-Prefixes den CSS Prefixer. Zum Konvertieren von Preprocessors SCSS zu CSS oder Stylus zu CSS.

Häufig gestellte Fragen

Sind meine Daten privat?

Ja. Die Extraktion läuft vollständig in Ihrem Browser. Keine Daten werden an einen Server gesendet.

Extrahiert es @import oder verlinktes CSS?

Nein. Es extrahiert nur <style>-Block-Inhalt und Inline-style-Attribute. Externe Stylesheets (@import oder <link>) werden nicht abgerufen oder einbezogen.

Was ist mit Inline-Styles?

Inline-Styles werden extrahiert und zur Referenz in einen Kommentar eingeschlossen. Sie gelten für spezifische Elemente, daher kann die Ausgabe manuelle Anpassung zur Wiederverwendung benötigen.

Behandelt es scoped Styles?

Scoped Styles (z. B. Vue scoped, Angular View Encapsulation) werden unverändert extrahiert. Die Scope-Attribute müssen möglicherweise berücksichtigt werden, wenn das CSS woanders verwendet wird.

Kann ich von einer URL extrahieren?

Dieses Tool funktioniert mit eingefügtem oder hochgeladenem HTML. Zum Extrahieren von einer URL holen Sie das HTML woanders ab und fügen Sie es hier ein.