Extracteur CSS Gratuit en Ligne
Extrayez tout le CSS de n'importe quel fichier HTML dans votre navigateur.
HTML en entrée
CSS extrait
Exemples d'extraction CSS
Extraire le CSS des balises <style> et des styles inline. Exemple :
HTML avec styles intégrés
HTML en entrée :
CSS extrait :
Utilisez Exemple ci-dessus pour charger plus de données d'exemple.
Qu'est-ce qu'un extracteur CSS ?
Vous avez scrapé une page, exporté depuis un CMS ou hérité d'une codebase legacy où tout le CSS est dans des balises <style> et des attributs style inline. Copier ces règles manuellement est fastidieux et source d'erreurs. Un extracteur CSS parse le HTML et récupère chaque style dans une feuille de styles propre et autonome. La documentation MDN de l'element <style> et la spécification CSS du W3C définissent comment les navigateurs interprètent ces styles embarqués.
Cet outil s'exécute dans votre navigateur. Collez du HTML ou téléchargez un fichier .html. Il extrait le contenu des blocs <style> et les styles inline. Rien n'est envoyé à un serveur. Pour formater la sortie, utilisez le Formateur CSS. Pour combiner plusieurs fichiers CSS, utilisez le Combineur CSS.
Comment utiliser cet outil
Coller ou télécharger du HTML
Collez votre HTML dans l'éditeur de gauche ou cliquez sur Télécharger pour charger un fichier .html ou .htm. Utilisez Exemple pour charger du HTML d'exemple avec des styles intégrés.
Vérifier le CSS extrait
Le panneau de droite affiche le CSS extrait des balises <style> et des styles inline. Pour la validation, utilisez le Validateur CSS. Pour minifier, utilisez le Minificateur CSS.
Copier ou télécharger
Utilisez Copier ou Télécharger pour enregistrer le CSS. Pour convertir le HTML en Markdown, utilisez HTML vers Markdown. Pour CSS vers inline (email), utilisez CSS vers Inline.
Où l'extraction CSS aide
Lors de la migration d'un site legacy ou de la conversion d'un document HTML en fichier unique vers un projet structuré, extraire le CSS est la première étape. Les modèles d'email, exportations CMS ou pages scrapées ont souvent des styles intégrés. Cet outil vous donne un point de départ pour la refactorisation. MDN HTML et MDN CSS documentent les standards.
Pour combiner le CSS extrait avec d'autres feuilles de style, utilisez le Combineur CSS. Pour ajouter des préfixes vendeur, utilisez le Préfixeur CSS. Pour convertir les préprocesseurs, utilisez SCSS vers CSS ou Stylus vers CSS.
Questions fréquentes
Mes données sont-elles privées ?
Oui. L'extraction s'exécute entièrement dans votre navigateur. Aucune donnée n'est envoyée à un serveur.
Extrait-il @import ou le CSS lié ?
Non. Il extrait uniquement le contenu des blocs <style> et les attributs style inline. Les feuilles de style externes (@import ou <link>) ne sont pas récupérées ni incluses.
Qu'en est-il des styles inline ?
Les styles inline sont extraits et enveloppés dans un commentaire pour référence. Ils s'appliquent à des éléments spécifiques, donc la sortie peut nécessiter un ajustement manuel pour la réutilisation.
Gère-t-il les styles scopés ?
Les styles scopés (ex. Vue scoped, encapsulation de vue Angular) sont extraits tels quels. Les attributs de portée peuvent devoir être pris en compte lors de l'utilisation du CSS ailleurs.
Puis-je extraire depuis une URL ?
Cet outil fonctionne avec du HTML collé ou téléchargé. Pour extraire depuis une URL, récupérez le HTML ailleurs et collez-le ici.