Les opérations syntaxiques
Voici la liste des opérations purement syntaxiques. C'est à dire qu'elles ne modifient le sens d'aucune propriété Il y a une parfaite équivalence.
Retrait des commentaires
On retire tous les commentaires. Ils sont tout simplement inutiles. Ainsi :
/*
* Commentaire sur plusieurs lignes
*/
p {
margin: 5px 0px 5px; /**/
padding: 2px 2px 2px 2px; /* Petit commentaire */
color: #990000;
}
Devient :
p {
margin: 5px 0px 5px;
padding: 2px 2px 2px 2px;
color: #990000;
}
Pour l'instant, tous les hacks basés sur des commentaires disparaissent.
Retrait des espaces inutiles
On retire tous les espaces, tabulations et sauts de lignes inutiles. Ainsi :
p {
margin: 5px 0px 5px;
padding: 2px 2px 2px 2px;
color: #990000 ;
}
a, a:hover,
a:active
{
color: black ;
}
Devient :
p{margin:5px 0px 5px;padding:2px 2px 2px 2px;color:#990000;}
a,a:hover,a:active{color:black;}
Pour l'instant, on garde une ligne par déclaration. Une option à venir permettra de tout mettre sur une seule ligne, à la fin de la minification.
Reformatage des nombres et des longueurs
On retire les unités pour des longueurs valant zéro. Ainsi :
p {
margin: 0% 0px 0em;
}
Devient :
p{margin:0 0 0;} /* oui, trois fois 0 est redondant, voir plus bas. */
Et on retire le zéro initial pour les nombres décimaux inférieurs à 1. Ainsi :
p {
margin: 0.5cm 2.6em 0.9em;
opacity: 0.6;
}
Devient :
p{margin:.5cm 2.6em .9em;opacity:.6;}
Reformatage des longueurs multiples
Les propriétés "groupées" sur les longueurs attendent théoriquement 4 valeurs (haut ; droite ; bas ; gauche).
Mais s'il y a des valeurs identiques, elles peuvent se contenter de 3 valeurs (haut ; gauche=droite ; bas), 2 valeurs (haut=bas ; gauche=droite) ou 1 seule (haut=bas=gauche=droite).
Donc on examine ça et on enlève ce qui n'est pas utile. Ainsi :
p.exemple1 {
margin: 0 0 0 0; /* 4 valeurs identiques */
}
p.exemple2 {
margin: 1px 2px 3px 2px; /* Valeurs droite et gauche identiques */
}
p.exemple3 {
border-width: 1px 2px 1px; /* Valeurs haut et bas identiques */
}
p.exemple4 {
padding: 1px 1px; /* Valeurs haut-bas et gauche-droite identiques */
}
Devient :
p.exemple1{margin:0;}
p.exemple2{margin: 1px 2px 3px;}
p.exemple3{border-width:1px 2px;}
p.exemple4{padding:1px;}
Reformatage des couleurs
On reformate les définitions de couleur pour utiliser la version la plus courte. Ainsi :
p.exemple1 {
color: #aabbcC;
}
p.exemple2 {
border: 1px solid rgb(50, 100, 150);
}
Devient :
p.exemple1{color:#abc;}
p.exemple2{border:1px solid #326496;}
Il y a aussi des couleurs qui ont des mots clés, par exemple black, maroon ou olive. On gardera la plus courte des notations. Ainsi :
p.exemple1 {
background-color: white; /* white = #ffffff = #fff : le plus court c'est #fff */
border: 1px dashed black; /* black = #000000 = #000 : le plus court c'est #000 */
color: blue; /* blue = #0000ff = #00f : indifférent entre blue et #00f */
}
p.exemple2 {
color: #f00; /* red = #ff0000 = #f00 : le plus court c'est red */
border-color: orange; /* orange = #ffa500 : le plus court c'est orange */
}
Devient :
p.exemple1{background-color:#fff;border:1px dashed #000;color:blue;}
p.exemple2{color:red;border-color:orange;}
Reformatage de la graisse
On reformate les définitions de graisse pour utiliser la version la plus courte. Ainsi :
span.exemple1 {
font-weight: normal;
}
span.exemple2 {
font-weight: bold;
}
Devient :
span.exemple1{font-weight:400;}
span.exemple2{font-weight:700;}
Reformatage des URI
Quand c'est possible, on retire les guillemets simples ou doubles des url(). Ainsi :
p.exemple1 {
background: #fff url('/images/exemple.jpg');
}
Devient :
p.exemple1{background:#fff url(/images/exemple.jpg);}
Reformatage du positionnement d'arrière plan
Le positionnement d'un arrière plan attend 1 ou 2 valeurs. Ces valeurs peuvent être des longueurs, des pourcentages ou des mots clés (top, bottom, left, right et center).
S'il n'y a qu'une seule valeur de spécifiée, alors la seconde est supposée être "center". Si au moins l'une des valeurs n'est pas un mot clé, alors la première valeur est le positionnement horizontal et la seconde le vertical.
Les mots clés correspondent à des pourcentages : left 0% horizontalement, right 100% horizontalement, top 0% verticalement, bottom 100% verticalement et center : 50% horizontalement ou verticalement.
Sachant cela, on va choisir la définition la plus courte possible. Ainsi :
p.exemple1 {
background: #fff url(/images/exemple.jpg) center;
}
p.exemple2 {
background-position: top left;
}
p.exemple3 {
background-position: left center;
}
p.exemple4 {
background-position: center center;
}
p.exemple5 {
background-position: 50% 100%;
}
p.exemple6 {
background-position: 5px 50%;
}
Devient :
p.exemple1{background:#fff url(/images/exemple.jpg) 50%;}
p.exemple2{background-position:0 0;}
p.exemple3{background-position:0;}
p.exemple4{background-position:50%;}
p.exemple5{background-position:bottom;}
p.exemple6{background-position:5px;}
Reformatage de la propriété "groupée" d'arrière plan
La propriété background prend une série de valeurs issues des propriétés "séparées" background-color, background-image, background-repeat, background-position et background-attachment.
Pour traiter la propriété background, le comportement des agents est le suivant : on prend la valeur initiale de chaque propriété "séparée". Puis on prend ce qui est spécifié dans la feuille de style.
Du coup, préciser des valeurs qui sont les valeurs initiales est inutile. Donc on les enlève.
Et si tout ce qui est spécifié est une valeur initiale, on met que la plus courte (ou presque, on a volontairement choisi "none" au lieu de "0 0"). Ainsi :
p.exemple1 {
background: #fff url(/images/exemple.jpg) 0 0;
}
p.exemple2 {
background: transparent url(/images/exemple.jpg) 50%;
}
p.exemple3 {
background: #fff none;
}
p.exemple4 {
background: url(/image/exemple.jpg) repeat;
}
p.exemple5 {
background: url(/image/exemple.jpg) scroll;
}
p.exemple6 {
background: transparent none 0 0 repeat scroll; /* ici tout est "initial" */
}
Devient :
p.exemple1{background:#fff url(/images/exemple.jpg);}
p.exemple2{background:url(/images/exemple.jpg) 50%;}
p.exemple3{background:#fff;}
p.exemple4{background:url(/image/exemple.jpg);}
p.exemple5{background:url(/image/exemple.jpg);}
p.exemple6{background:none;}
Le dernier point-virgule
Le point virgule servant uniquement à séparer les propriétés, on retire le dernier à chaque fois. Ainsi :
p {
margin: 10px 20px;
padding: 5px;
}
Devient :
p{margin:10px 20px;padding:5px}
Tout en une ligne
La version 0.2 contiendra une option pour tout mettre en une seule ligne.
Les opérations non-syntaxiques
C'est simple, il n'y en a aucune.
L'ordre des définitions, l'ordre des propriétés, les sélecteurs choisis, tout influe. Donc comme on ne veut pas modifier le comportement du moteur de rendu, on ne modifie rien de plus.
Peut être une option "J'utilise pas de hacks" apparaitra par la suite et permettra quelques modifications indolores (si on n'utilise pas de hacks). Comme pour le cas de propriétés en double, où on garderait que la dernière (deux fois color par exemple). Ou bien un regroupement de certaines propriétés (par exemple fusion de margin-left et margin en un seul margin, uniquement si margin était après le margin-left).
Il y aurait de quoi faire, mais sous certaines conditions.
