01
Repérer l'entrée originale
L'exemple contient une propriété personnalisée et une media query. Les numéros de ligne de la liste restent ceux de l'entrée après la mise en forme.
HTML / CSS Dev Tools
formateur CSSGardez la source comme repère
Lancez la mise en forme, la minification ou le contrôle explicitement. Une modification de la source rend l'ancien résultat non exportable.
formateur CSS
Le CSS reste dans cet onglet. Aucun envoi ni historique sauvegardé.
Navigation des règles
Lancez une action pour afficher sélecteurs et @ règles.
Saisissez du CSS puis choisissez une action.
Une feuille minifiée masque vite une déclaration répétée ou la portée d'une media query. Le formateur CSS remet les blocs en forme tout en gardant l'ordre des sélecteurs et des propriétés, pour comparer la source et le résultat.
Pour distribuer un fichier plus court, vous pouvez minifier CSS; pour trouver une accolade manquante, utiliser le validateur CSS structurel. Le formateur CSS repart toujours du texte d'origine, jamais du résultat précédent.
Pourquoi le formateur CSS garde la source visible
Une sortie lisible et des positions d'origine vérifiables.
Conserver l'ordre de la cascade
Le formateur CSS laisse les déclarations répétées et les commentaires en place. Le texte mis en forme reste à côté de l'entrée afin de vérifier quel style l'emporte.
Aller directement à une règle
La liste des sélecteurs et des @ règles indique les lignes de la source. Un clic y ramène; une erreur de syntaxe fournit aussi la colonne.
Se fier aux lignes de la source
02
Choisir une opération précise
L'indentation démarre à deux espaces; quatre espaces et les tabulations sont possibles. Minifier et Vérifier lisent la source, pas la sortie précédente.
03
N'exporter qu'un résultat actuel
Modifier le texte ou l'indentation désactive copie et téléchargement. Relancez l'opération; Ctrl/Cmd+Entrée lance la mise en forme.
Lire, compacter et localiser les règles
Mise en forme lisible
Un embellisseur CSS qui déroule les blocs imbriqués sans déplacer les commentaires ni trier les déclarations.
Minification prudente
Les espaces facultatifs et commentaires ordinaires disparaissent. Les règles ne sont ni fusionnées ni réécrites avec d'autres unités.
Répertoire des sélecteurs
Sélecteurs et @ règles gardent leurs lignes d'origine. Les listes longues s'ouvrent par groupes de 50, sans réduire la sortie exportée.
Ce que le contrôle ne garantit pas
- Pas de garantie multi-navigateurs
- Une syntaxe structurée correctement ne prouve pas que chaque sélecteur ou propriété fonctionne dans les navigateurs ciblés.
- CSS standard uniquement
- Le formateur CSS ne compile ni variables SCSS ni mixins Less. Compilez ces fichiers avant de les coller ici.
- Aucune optimisation sémantique
- La mise en forme garde commentaires et ordre; la minification retire les commentaires ordinaires mais ne trie pas, ne fusionne pas et ne supprime pas les doublons.
- Aucun contexte de page
- L'outil ne récupère pas d'URL et ne conserve pas d'historique. Sans votre HTML et les autres styles, il ne peut pas prévisualiser le rendu réel.
Questions sur le formateur CSS
Qu'est-ce que la minification CSS ?
Elle réduit les caractères facultatifs, surtout les espaces et commentaires ordinaires. Le résultat est plus court mais moins commode à relire.
Les commentaires sont-ils préservés ?
La mise en forme les garde. La minification retire les commentaires ordinaires; ne placez donc pas une information indispensable uniquement dans ces commentaires.
La mise en forme peut-elle changer l'apparence de ma page ?
L'outil conserve l'ordre des règles et des déclarations, mais vérifiez toujours le résultat dans la page réelle, avec son HTML et ses autres feuilles.
Les variables CSS sont-elles acceptées ?
Oui pour les propriétés personnalisées de CSS standard. Les variables SCSS ou Less nécessitent d'abord leur compilateur.
Comment déboguer un fichier CSS ?
Lancez Vérifier pour les erreurs structurelles et utilisez la liste des règles pour sauter à la ligne d'origine. Pour la cascade calculée, ouvrez les outils de développement du navigateur.
Encore une question ?
Revenez à la feuille de style
Ouvrez le formateur CSS, suivez les lignes de la source et exportez seulement une sortie actuelle.
Formater et minifier ne remplacent pas le CSS d'origine.