Combineur CSS
Combiner plusieurs fichiers CSS en un seul
Fichiers CSS d'entrée
CSS combiné
Exemples de combinaison CSS
Combiner plusieurs blocs CSS en un fichier. Utilisez des commentaires pour séparer les sections :
Reset, base et composants
Le combineur concatène tous les blocs. Utilisez Exemple ci-dessus pour charger plus de données.
Qu'est-ce qu'un combineur CSS ?
Les projets CSS répartissent souvent les styles dans plusieurs fichiers—reset, base, composants, utilitaires. Un combineur CSS les fusionne en un seul fichier pour la production. Moins de requêtes HTTP signifie des temps de chargement plus rapides. La spécification W3C CSS définit le langage ; les outils de build comme Vite et Webpack font cela au moment du build. Cet outil le fait à la demande dans votre navigateur.
Collez plusieurs blocs CSS ou téléchargez plusieurs fichiers .css. L'outil les concatène en une sortie. Il s'exécute entièrement dans votre navigateur—rien n'est envoyé à un serveur. Pour formater le résultat, le Formateur CSS. Pour minifier, le Minificateur CSS.
Comment utiliser cet outil
Coller ou télécharger le CSS
Collez plusieurs blocs CSS dans l'éditeur de gauche (séparez avec des commentaires comme /* filename.css */), ou cliquez sur Télécharger pour sélectionner plusieurs fichiers .css. Utilisez Exemple pour charger des données d'exemple.
Vérifier la sortie combinée
Le panneau de droite affiche le CSS fusionné. L'ordre est préservé. Pour valider, le Validateur CSS. Pour les préfixes vendor, le Préfixeur CSS.
Copier ou télécharger
Utilisez Copier ou Télécharger pour enregistrer le CSS combiné. Pour convertir SCSS ou Less d'abord, SCSS vers CSS ou Less vers CSS.
Quand la combinaison CSS aide
Les projets legacy ou les sites faits à la main peuvent avoir beaucoup de fichiers CSS. Les combiner réduit les requêtes et simplifie le déploiement. Bootstrap et Tailwind utilisent des pipelines de build ; cet outil offre une option manuelle rapide. Pour extraire le CSS du HTML, l'Extracteur CSS.
Pour formater la sortie combinée, le Formateur CSS. Pour les styles inline (ex. e-mail), CSS vers Inline. Pour convertir entre préprocesseurs, CSS vers SCSS ou CSS vers Less.
Questions fréquentes
Mes données sont-elles privées ?
Oui. La combinaison s'exécute entièrement dans votre navigateur. Aucune donnée n'est envoyée à un serveur.
Supprime-t-il les doublons ?
Cet outil concatène les fichiers. Il ne déduplique pas les règles ni ne fusionne les sélecteurs. Pour une optimisation avancée, utilisez des outils de build comme cssnano ou PostCSS.
Et @import ?
L'outil combine le texte tel quel. Il ne résout pas les URLs de @import. Incluez ou collez le contenu importé manuellement si nécessaire.
Puis-je télécharger plusieurs fichiers ?
Oui. Utilisez le bouton Télécharger et sélectionnez plusieurs fichiers <code>.css</code>. Ils sont combinés dans l'ordre sélectionné.
L'ordre des fichiers compte-t-il ?
Oui. Les règles ultérieures écrasent les précédentes quand la spécificité est égale. Ordonnez les fichiers dans l'ordre de cascade souhaité.