Combineur CSS
Combiner deux fichiers CSS en un seul
Fichier CSS 1
Fichier CSS 2
CSS combiné
Exemples de combinaison CSS
Collez deux fichiers CSS — un dans chaque éditeur d'entrée — et l'outil les fusionne en une seule feuille de style :
Reset/base + styles de composants
Cliquez sur Exemple pour charger du CSS d'exemple dans les deux éditeurs et voir le résultat fusionné instantanément.
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 vous offre un éditeur à double entrée directement dans votre navigateur.
Collez votre premier fichier CSS dans l'éditeur en haut à gauche et le second dans l'éditeur en bas à gauche (ou utilisez Télécharger sur chaque panneau). Le panneau de droite combine automatiquement les deux entrées. Tout s'exécute 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 votre premier fichier CSS dans l'éditeur en haut à gauche et le second fichier dans l'éditeur en bas à gauche. Chaque panneau a son propre bouton Télécharger pour charger des fichiers .css individuellement. Utilisez Exemple pour charger des données d'exemple dans les deux éditeurs à la fois.
Vérifier la sortie combinée
Le panneau de droite combine automatiquement les deux entrées. Le fichier 1 apparaît en premier, suivi du fichier 2. 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 avec deux panneaux d'entrée dédiés. 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.
Que se passe-t-il si les deux fichiers ont le même sélecteur ?
L'outil conserve les deux tels quels. C'est sans risque car la cascade CSS fait que la dernière règle l'emporte lorsque la spécificité est identique — exactement comme les navigateurs gèrent plusieurs feuilles de style. Pour une déduplication 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.
Comment télécharger des fichiers ?
Chaque panneau d'entrée a son propre bouton Télécharger. Cliquez dessus pour sélectionner un fichier .css pour ce panneau. Le fichier 1 va dans l'éditeur en haut à gauche, le fichier 2 dans celui en bas à gauche.
L'ordre des fichiers compte-t-il ?
Oui. Le fichier 1 apparaît en premier dans la sortie, puis le fichier 2. Les règles ultérieures écrasent les précédentes quand la spécificité est égale. Arrangez vos fichiers en conséquence.