Validateur CSS
Vérifiez le CSS : erreurs de syntaxe, blocs non fermés, propriétés inconnues et valeurs invalides via les données de grammaire css-tree. Ligne et colonne.
Vérifie la syntaxe, les propriétés inconnues et les valeurs invalides d’après la grammaire de css-tree. Les propriétés personnalisées et les valeurs avec var() ne sont pas vérifiées.
S'exécute entièrement dans votre navigateur. Vos données ne sont jamais envoyées.
Outils Connexes
Voir ToutQu'est-ce que Validateur CSS ?
Le validateur CSS signale les erreurs de structure (accolades, chaînes, commentaires ou parenthèses non fermés), les erreurs d'analyse, les propriétés inconnues, les valeurs de propriétés invalides et les règles @ inconnues, chacune avec sa ligne et sa colonne. Les contrôles de propriétés et de valeurs reposent sur les données de grammaire CSS fournies avec css-tree ; ce n'est pas le service de validation CSS du W3C.
Comment utiliser Validateur CSS
- Collez votre CSS dans la zone de saisie.
- Cliquez sur Valider (les résultats se mettent à jour pendant la saisie).
- Lisez le résumé et la liste des erreurs et avertissements.
- Corrigez chaque problème grâce à la ligne et à la colonne indiquées.
Exemple
a { colr: red; color: bluee; } Errors: 2 · Warnings: 0 Line 1, column 5 Unknown property "colr" Line 1, column 16 Invalid value for "color": bluee
Quand utiliser Validateur CSS
Utilisez-le pour détecter des fautes de frappe comme colr ou bluee, trouver l'accolade non fermée dans un long fichier ou contrôler du CSS écrit à la main avant déploiement. Les propriétés très récentes peuvent manquer dans les données de grammaire ; la prise en charge par les navigateurs n'est pas vérifiée.
Comment fonctionne Validateur CSS
Un scanner vérifie que {} et () sont équilibrés et que chaînes et commentaires sont fermés. La feuille de style est ensuite analysée par css-tree (fourni avec CSSO), qui signale les erreurs d'analyse. Chaque déclaration est confrontée à la grammaire des propriétés de css-tree via lexer.matchDeclaration : les propriétés inconnues sont des erreurs, les propriétés inconnues avec préfixe constructeur (-moz-foo) des avertissements, et les valeurs non conformes à la grammaire (par exemple margin avec cinq valeurs) des erreurs. Les propriétés personnalisées (--x) et les valeurs utilisant var(), env() ou attr() ne peuvent pas être vérifiées statiquement et sont ignorées.
Cas d'utilisation courants
- Trouver une faute de frappe dans un nom de propriété
- Localiser une accolade non fermée qui casse la suite du fichier
- Vérifier des valeurs comme les modèles de grille ou les couleurs
- Relire du CSS soumis par des utilisateurs ou généré par des outils
Note de Sécurité
Tout s'exécute localement dans votre navigateur : le code que vous collez n'est pas envoyé.
Questions Fréquentes
Est-ce le validateur CSS du W3C ?
Non. Il utilise localement les données de grammaire de css-tree, qui couvrent les propriétés standard mais peuvent être en retard sur les fonctionnalités toutes récentes.
Pourquoi les valeurs avec var() ne sont-elles pas vérifiées ?
Leur valeur finale n'est connue qu'à l'exécution ; elles ne peuvent donc pas être validées statiquement.
Vérifie-t-il la prise en charge par les navigateurs ?
Non, uniquement la syntaxe et la grammaire.