Extracteur CSS
Extraire le CSS des fichiers HTML
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 ?
Les fichiers HTML intègrent souvent du CSS dans des balises <style> ou des attributs style inline. Un extracteur CSS analyse le HTML et extrait tous les styles dans un seul fichier CSS. Utile pour migrer les styles intégrés vers des feuilles de style externes, auditer quel CSS une page utilise, ou convertir du HTML scrapé en CSS éditable. La spécification HTML et la spécification CSS définissent la structure.
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.