Minifier un code CSS
Cet outil permet de minifier très facilement un code CSS dans le but de réduire son poids pour optimiser la vitesse d'affichage des pages de son site Web.
Exemple de code CSS minifié
/* Exemple avant minification */
h2 {
font-family: 'Roboto Condensed', 'Helvetica', 'Arial', sans-serif;
font-size: 1.7em;
margin: 1.2em 0 1.2em 0;
color: #333333;
}
article p {
margin: 1em 0 0.7em 0;
line-height: 1.5em;
}
h2{font-family:'Roboto Condensed',Helvetica,Arial,sans-serif;font-size:1.7em;margin:1.2em 0;color:#333}article p{margin:1em 0 .7em;line-height:1.5em}
Etapes de minification
Les sauts de ligne et les espaces inutiles (ou à double) sont supprimés :
.exemple {
width: 800px;
height: 600px;
}
.exemple{width:800px;height:600px}
Les commentaires sont supprimés :
/* Commentaire */
.exemple {
width: 800px;
/*height: 600px;*/
}
.exemple{width:800px}
Le dernier ;
de la règle est supprimé (ainsi que les éventuels ;
à double) :
.exemple {
width: 800px;;
height: 600px;
}
.exemple{width:800px;height:600px}
Les zéros inutiles des valeurs sont retirés :
.exemple {
margin-top: 1.50em;
margin-top: 0.50em;
margin-top: 2.0em;
margin-top: -0.5em;
line-height: 2.00;
}
.exemple{margin-top:1.5em;margin-top:.5em;margin-top:2em;margin-top:-.5em;line-height:2}
Les éléments valant 0 sont remplacés par 0 :
.exemple {
margin-top: 0px;
margin-top: -0px;
margin-top: -0;
margin-top: 0em;
line-height: 0.00;
}
.exemple{margin-top:0;margin-top:0;margin-top:0;margin-top:0;line-height:0}
Les propriétés où il est possible d'entrer des valeurs pour les 4 côtés (telles que margin
et padding
) sont raccourcies lorsque c'est possible :
.exemple {
margin: 1rem 0rem 2rem 0rem;
margin: 1rem 0rem 1rem 0rem;
margin: 1rem 1rem 1rem 1rem;
}
.exemple{margin:1rem 0 2rem;margin:1rem 0;margin:1rem}
Les couleurs sont raccourcies lorsque c'est possible :
.exemple {
color: rgb(12, 34, 56);
color: #112233;
color: #ff00ff;
}
.exemple{color:#0c2238;color:#123;color:red}
Les règles vides sont supprimées :
.exemple1 {
/*color: rgb(12, 34, 56);*/
}
.exemple2 { /* la seule règle non vide */
color: #123456;
}
@media (min-width: 1200px){
.exemple3 {
}
}
.exemple2{color:#123456}
Les ' '
superflues des valeurs de font-family
sont retirées :
.exemple {
font-family: 'Roboto Condensed', 'Helvetica', 'Arial', sans-serif;
}
.exemple{font-family:'Roboto Condensed',Helvetica,Arial,sans-serif}
Les valeurs bold
et normal
de font-weight
sont remplacées :
.exemple {
font-weight: bold;
font-weight: normal;
}
.exemple{font-weight:700;font-weight:400}
Les éléments contenant url()
sont optimisés lorsque c'est possible :
@import url("exemple");
.exemple {
background: url("bg.gif");
background: url('bg.gif');
}
@import "exemple";.exemple{background:url(bg.gif);background:url(bg.gif)}
Et, tout en appliquant ces différentes optimisations, l'outil veille à ne pas modifier les valeurs entre " "
:
.exemple {
content: " > ";
}
.exemple{content:" > "}
Pour toute question à propos de cet outil (ou pour un problème de CSS), vous pouvez poser vos questions sur le forum (dans la section "Développement").