Gratis CSS Extractor Online
Extraheer direct alle CSS uit elk HTML-bestand in je browser.
HTML-invoer
Geëxtraheerde CSS
CSS-extractie voorbeelden
Extraheer CSS uit <style>-tags en inline-stijlen. Voorbeeld:
HTML met ingesloten stijlen
HTML-invoer:
Geëxtraheerde CSS:
Gebruik Voorbeeld hierboven om meer voorbeeldgegevens te laden.
Wat is een CSS Extractor?
Je hebt een pagina gescrapet, geëxporteerd vanuit een CMS of een legacy codebase geërfd waar alle CSS in <style>-tags en inline style-attributen zit. Die regels handmatig kopiëren is vervelend en foutgevoelig. Een CSS extractor parst de HTML en haalt elke stijl naar een schoon, zelfstandig stylesheet waar je echt mee kunt werken. De MDN <style> element docs en de W3C CSS-specificatie definiëren hoe browsers deze ingebedde stijlen interpreteren.
Dit hulpmiddel draait in uw browser. Plak HTML of upload een .html-bestand. Het extraheert <style>-blokinhoud en inline-stijlen. Er wordt niets naar een server gestuurd. Voor formatteren van de uitvoer de CSS Formatter. Voor combineren van meerdere CSS-bestanden de CSS Combiner.
Hoe dit hulpmiddel te gebruiken
Plak of upload HTML
Plak uw HTML in de linker editor of klik op Uploaden om een .html- of .htm-bestand te laden. Gebruik Voorbeeld om voorbeeld-HTML met ingesloten stijlen te laden.
Bekijk de geëxtraheerde CSS
Het rechterpaneel toont geëxtraheerde CSS uit <style>-tags en inline-stijlen. Voor validatie de CSS Validator. Voor minificeren de CSS Minificeerder.
Kopiëren of downloaden
Gebruik Kopiëren of Downloaden om de CSS op te slaan. Voor HTML converteren naar Markdown HTML naar Markdown. Voor CSS naar inline (e-mail) CSS naar Inline.
Waar CSS-extractie helpt
Bij migreren van een legacy-site of converteren van een single-file HTML-document naar een gestructureerd project is CSS-extractie de eerste stap. E-mailtemplates, CMS-exports of gescrapede pagina's hebben vaak ingesloten stijlen. Dit hulpmiddel geeft u een startpunt voor refactoring. MDN HTML en MDN CSS documenteren de standaarden.
Voor geëxtraheerde CSS combineren met andere stylesheets de CSS Combiner. Voor vendor-prefixes de CSS Prefixer. Voor preprocessor-conversie SCSS naar CSS of Stylus naar CSS.
Veelgestelde vragen
Zijn mijn gegevens privé?
Ja. Extractie draait volledig in uw browser. Er worden geen gegevens naar een server gestuurd.
Extraheert het @import of gelinkte CSS?
Nee. Het extraheert alleen <style>-blokinhoud en inline style-attributen. Externe stylesheets (@import of <link>) worden niet opgehaald of opgenomen.
Hoe zit het met inline-stijlen?
Inline-stijlen worden geëxtraheerd en in een commentaar gewikkeld voor referentie. Ze zijn van toepassing op specifieke elementen, dus de uitvoer kan handmatige aanpassing nodig hebben voor hergebruik.
Behandelt het scoped styles?
Scoped styles (bijv. Vue scoped, Angular view encapsulation) worden ongewijzigd geëxtraheerd. De scope-attributen moeten mogelijk in overweging worden genomen bij gebruik van de CSS elders.
Kan ik extraheren van een URL?
Dit hulpmiddel werkt met geplakte of geüploade HTML. Om van een URL te extraheren, haal de HTML elders op en plak het hier.