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.

La minification consiste à réduire la taille du code en retirant tout ce qui peut l'être (commentaires, sauts de ligne, espaces superfus, caractères superflus, etc.) et en optimisant certains autres éléments.

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").

Minifier un code CSS

Copiez ici votre code CSS :