GratuitExtension pour Chrome et Firefox
Copiez le HTML et le CSS d’un élément
HTML/CSS Extractor ajoute un volet au panneau Éléments des DevTools. Sélectionnez un élément : il affiche son HTML et les règles CSS qui le mettent en forme, prêts à modifier, prévisualiser et copier.
Captures d’écran
Comment ça marche
Ouvrez les DevTools sur n’importe quel site : appuyez sur F12, ou sur Cmd+Option+I sur Mac.
Sélectionnez un élément dans le panneau Éléments (l’Inspecteur dans Firefox), ou faites un clic droit dessus sur la page et choisissez Inspecter.
Ouvrez l’onglet HTML/CSS Extractor dans la barre latérale du panneau, à côté de Calculé.
Vérifiez l’aperçu en direct, modifiez le code si vous le souhaitez, et cliquez sur « Copy CSS » ou « Copy HTML ».
Ce qu’elle fait
Les règles qui s’appliquent
Les règles CSS des feuilles de style de la page qui ciblent l’élément et tout ce qu’il contient, y compris les règles :hover, ::before et ::after, et les media queries dans leur ordre d’origine.
Des sélecteurs plus courts
Les sélecteurs longs sont réduits à la forme la plus courte qui cible encore l’élément, avec un commentaire indiquant le sélecteur d’origine et sa spécificité.
Aperçu en direct
Voyez le rendu du code extrait en largeur mobile (375 px), tablette (768 px) ou desktop (1240 px). Les liens de l’aperçu ne mènent nulle part.
Modifier, puis copier
Le CSS et le HTML s’ouvrent dans des éditeurs séparés, avec coloration syntaxique, numéros de ligne et repli du code. Copiez l’un ou l’autre d’un clic.
Des URL complètes
Les adresses relatives des images, des polices et des liens sont converties en URL complètes : le code fonctionne encore quand vous le collez ailleurs.
Polices et variables
Incluez si vous le souhaitez les règles @font-face de la page, et signalez les variables CSS que le code extrait n’utilise jamais.
Styles hérités
Ajoutez si vous le souhaitez les styles de texte que l’élément hérite de ses parents, comme la police et la couleur, sur un conteneur autour du HTML.
Suit votre sélection
Le volet se met à jour chaque fois que vous sélectionnez un autre élément. Six interrupteurs règlent ce qui est inclus, et vos choix sont mémorisés.
Confidentialité dès la conception
- Aucun compte, aucune inscription.
- Fonctionne uniquement dans les DevTools, sur l’élément que vous sélectionnez.
- Vos réglages sont stockés uniquement dans votre navigateur. Le code que vous extrayez n’est pas enregistré.
- Aucune mesure d’audience, aucun pistage, aucune publicité. Rien de ce que vous extrayez n’est envoyé nulle part.
Gratuite, sans compte
Tout est inclus
- Le HTML et le CSS de n’importe quel élément
- Simplification des sélecteurs
- Aperçu en direct sur trois largeurs d’écran
- Éditeurs de code avec copie en un clic
- Six réglages d’extraction, mémorisés d’une session à l’autre