Minificateur CSS - Minifiez votre code CSS

Cet outil en ligne de minification CSS vous aide à compresser et optimiser votre code CSS sans effort. Il est idéal pour améliorer les performances du site en réduisant la taille des fichiers et les temps de chargement.

Comment utiliser cet outil

Collez votre code CSS directement dans l'éditeur ou tapez-le.
Cliquez sur le bouton Minifier pour compresser votre code CSS.
Après la minification, vous pouvez :
- Télécharger le résultat optimisé.
- Le sauvegarder ou le partager via un lien unique.
- Vous connecter avec Google ou GitHub pour sauvegarder votre code minifié pour une utilisation future.

Qu'est-ce que le CSS ?

CSS (Cascading Style Sheets) est un langage utilisé pour styliser les pages web et les interfaces utilisateur. Il fonctionne avec HTML pour contrôler la mise en page, les couleurs, les polices et la présentation visuelle globale d'un site web ou d'une application.

Le CSS n'est pas limité aux pages web - il peut également styliser des documents basés sur XML comme SVG et XUL. Combiné avec HTML et JavaScript, le CSS joue un rôle clé dans la création de sites web et d'applications mobiles visuellement attrayants et interactifs.

En savoir plus sur le CSS grâce à ce guide CSS .

Syntaxe CSS

      
body {
    padding-left: 11em;
    font-family: Georgia, "Times New Roman", Times, serif;
    color: purple;
    background-color: #d8da3d
}

ul.navbar {
    position: absolute;
    top: 2em;
    left: 1em;
    width: 9em
}

h1 {
    font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif
}

Qu'est-ce que la minification ?

La minification est le processus de réduction du code et du balisage dans vos pages web et fichiers de script. C'est l'une des principales méthodes utilisées pour réduire les temps de chargement et l'utilisation de la bande passante sur les sites web. La minification améliore considérablement la vitesse et l'accessibilité du site, se traduisant directement par une meilleure expérience utilisateur. C'est également bénéfique pour les utilisateurs accédant à votre site via un forfait de données limité et qui souhaitent économiser sur leur utilisation de la bande passante en surfant sur le web.

Pourquoi minifier le CSS ?

Lors de la création de CSS, les développeurs ont tendance à utiliser des espacements, des commentaires et des variables bien nommées pour rendre le code et le balisage lisibles pour eux-mêmes. Cela aide également d'autres personnes qui pourraient travailler plus tard sur les ressources. Bien que cela soit un avantage lors de la phase de développement, cela devient un inconvénient lorsqu'il s'agit de servir vos pages. Les serveurs web et les navigateurs peuvent analyser le contenu des fichiers sans commentaires et code bien structuré, qui créent tous deux un trafic réseau supplémentaire sans fournir de bénéfice fonctionnel.

Pour minifier les fichiers CSS, il faut supprimer les commentaires et les espaces supplémentaires, ainsi que compresser les noms de variables afin de minimiser le code et réduire la taille des fichiers. La version du fichier minifié offre la même fonctionnalité tout en réduisant la bande passante des requêtes réseau.

Exemples

Avant minification

      
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

Après minification

      
nav ul{margin:0;padding:0;list-style:none;}nav li{display:inline-block;}nav a{display:block;padding:6px 12px;text-decoration:none;}