Vérificateur CSS inline
Réponse courte
Détectez les CSS inline excessifs pouvant affecter les performances et la maintenabilité.
Ce que ça fait
Trouve chaque attribut style="" inline et chaque bloc <style> sur votre page. Indique combien il y en a et leur taille totale, montre jusqu'à 8 éléments d'exemple avec leur CSS, et suggère comment déplacer les styles vers une feuille de style.
Pourquoi c'est important
Les attributs style inline ne peuvent pas être mis en cache séparément, sont difficiles à maintenir et sont bloqués par une Content-Security-Policy stricte à moins de les autoriser explicitement. L'exception est le CSS critique au-dessus de la ligne de flottaison dans un bloc <style>, qui peut aider le premier rendu.
Comment ça fonctionne
-
Saisissez l'URL d'une page ou collez son HTML
-
Nous récupérons le HTML de la page et analysons chaque <élément style="">
-
Comptons les attributs style inline séparément des blocs <style> inline
-
Renvoyons la taille totale du CSS inline, jusqu'à 8 éléments d'exemple et des conseils de refactorisation
Exemple d'entrée et de sortie
url: https://rankproof.eu/tools
inline style="" attributes: 3 OK inline <style> blocks: 1 OK total du CSS en ligne: 4.2 KB <div style="margin-top:12px"> <span style="color:#0EA5A4"> <p class="note" style="font-size:14px">
Qui l'utilise
-
Développeur front-end
Auditez un site hérité pour un nettoyage des styles inline — extrayez les motifs vers des classes utilitaires pour permettre une mise en cache correcte.
-
Ingénieur sécurité
Audit avant déploiement de CSP — chaque `style=""` inline bloque la politique `style-src 'self'`. Extrayez-les pour permettre une CSP stricte.
-
Ingénieur performance
Le CSS inline ajoute des octets à chaque réponse HTML. Déplacez les motifs répétés vers une feuille de style mise en cache — un gain à chaque chargement de page ultérieur.
Questions fréquentes
Le CSS inline est-il mauvais pour le SEO ?
Pas directement. Il alourdit les pages et les rend plus difficiles à maintenir, et il entrave une Content-Security-Policy stricte.
Quand le CSS inline est-il approprié ?
Les styles critiques au-dessus de la ligne de flottaison dans des balises `<style>` (pas des attributs `style=""`), et les valeurs dynamiques par composant qui varient réellement à l'exécution.
Comment refactoriser les styles inline ?
Identifiez les motifs répétés → extrayez-les en classes utilitaires → ajoutez-les à votre feuille de style → remplacez les `style=""` inline par `class=""`.
Cela casse-t-il la CSP ?
Oui — une CSP stricte (`style-src 'self'`) bloque les `style=""` inline. Il faudrait `'unsafe-inline'` ou `'unsafe-hashes'` pour les autoriser.
Qu'en est-il des frameworks CSS-in-JS ?
Beaucoup ajoutent des balises <style> ou des attributs style pendant l'exécution de la page, que cet outil ne voit pas car il lit le HTML tel qu'il est livré. La plupart peuvent extraire le CSS statique au moment du build, ce qui est le meilleur choix en production.