Entrée
Utilitaire de développement
Formateur CSS
Embellissez ou minifiez le CSS sans envoyer le code. Inspectez règles, sélecteurs et déclarations, consultez des alertes syntaxiques légères et testez le résultat dans un aperçu isolé.
Taille
Règles
Sélecteurs
Déclarations
Sortie
CSS formaté ou minifié
Alertes de validation
Problèmes et avertissements CSS
Structure
Résumé des sélecteurs et déclarations
| # | Sélecteur / règle @ | Déclarations | Propriétés |
|---|
Aperçu isolé
Exemple rendu avec votre CSS
L’aperçu s’exécute dans un cadre isolé avec une politique de sécurité stricte : ses styles n’affectent pas cette page et les ressources distantes sont bloquées.
Exemples
Exemples CSS courants
Aide-mémoire CSS
| Concept | Exemple | Notes |
|---|---|---|
| Règle | .card { padding: 16px; } | Un sélecteur suivi d’un bloc de déclarations. |
| Déclaration | color: #333; | Une propriété et une valeur séparées par deux-points. |
| Propriété personnalisée | --accent: #16735f; | Variable CSS réutilisable dont le nom commence par deux tirets. |
| Requête média | @media (max-width: 640px) | Applique des règles imbriquées lorsqu’une condition est satisfaite. |
| Images clés | @keyframes fade | Définit les étapes d’une animation CSS. |
Notes de formatage et de validation
Formatage sensible aux chaînesLes chaînes entre guillemets, commentaires et parenthèses sont reconnus avant de modifier les espaces structurels.
Minification prudenteLes espaces inutiles sont supprimés tout en conservant ceux des fonctions comme calc().
Validation légèreLes alertes couvrent les délimiteurs équilibrés, chaînes ou commentaires non fermés et déclarations sans deux-points. Utilisez un analyseur ou linter pour une conformité complète.
Traitement localLe CSS reste dans le navigateur. Le formatage, les statistiques, la validation et l’aperçu n’envoient pas l’entrée.
FAQ du formateur CSS
Ce formateur CSS envoie-t-il mon code ?
Non. Formatage, minification, statistiques, alertes et aperçu s’exécutent localement dans le navigateur.
Peut-il remplacer un linter CSS complet ?
Non. Il détecte des problèmes structurels courants, mais conformité, compatibilité et règles de projet exigent un analyseur ou linter dédié.
La minification peut-elle changer le comportement du CSS ?
Le minificateur conserve les chaînes, les commentaires demandés et les espaces dans les fonctions. Testez les anciens hacks ou directives d’outils avant publication.
L’aperçu CSS est-il isolé de la page ?
Oui. Un iframe isolé et une politique de sécurité stricte bloquent les ressources distantes.