Voici une petite astuce toute simple mais qui permet de gagner quelques ko sur une feuille de style. Ce qui peut s’ avérer être très pratique si votre site est très lourd en accélérant un petit peu la vitesse de chargement de la structure.
Les avantages :
- Gain en légèreté
- Meilleure organisation bien structuré
Les inconvénients:
- Peut ne pas faciliter la modification d’un paramètre d’une classe ou d’un id
Ainsi vous passez d’une feuille de style comme ceci:
a {
color: #58BBEB;
}
a:hover {
color: #147;
text-decoration: underline;
}
h3 {
color: #555;
font-family: "Trebuchet MS", Georgia;
letter-spacing: -1px;
line-height: 1em;
margin:0;}
A une feuille de style bien plus structurée comme ceci:
/* Structure basique */
.clear { clear:both; display: block; }
.alignleft { float: left; }
a { color: #79B100; }
a:hover { color: #000000; }
.alignright { float: right; }
.wrap, .content { width: 990px; margin: 0 auto 0 auto; }
Un truc tout bête certes, mais ainsi vous faites gagner ~ 60 lignes sur une feuille de 90 lignes et donc vous allégé de 60% le poids votre feuille CSS ! Un gain plus qu’ intéressant.
Ainsi chaque classe à ses propriétés sur une seule ligne.
Sauf erreur de ma part le nombre de lignes importe peu dans le calcul du poids de ta feuille de style…
@Banke: Cette reduction du nombre de ligne permet de réduire le poids du CSS, ou plus exactement sa taille, gagner quelques ko sur une feuille de style est toujours intéressants car la structure sera chargé plus rapidement.
C’est juste la taille qui est modifié ( et dans des proportions intéressantes )
J’ai quand même refait le test pour démontrer que c’est dénué de sens : style1.css et style2.css en appliquant ta méthode, résultat : 836 octets pour la première et 794 octets pour la deuxième, en gros tu gagnes juste le poids des retour chariot.
Merci pour l’astuce, qui parait évidente en plus!
@Max: Pour les fichiers aussi petit oui, mais essaye sur la structure entière d’un site, tu veras la différence, chez moi, je suis passé d’une feuille de style de 14 ko à 6 ko…
Ca ne s’observe que sur des très gros fichiers.
@Ludo: Oui elle est evidente mais que tout le monde n’utilise pas: regarde Clubic, un des sites Français les plus visités:
http://www.clubic.com/style/global.css
SI je ne me trompe pas, il existe des logiciels pour faire ça automatiquement, et même des sites webs
tu peux m’envoyer les 2 css ? avant / après ? merci d’avance !
parceque là j’ai un peu de mal à comprendre où est le gain à part les retour chariot !
parceque là oui sur un gros fichier tu peux en zapper beaucoup, en enlevant les commentaires aussi mais je ne vois pas comment attendre les 60% de gain.
@Jaax: Possible, je ne sais pas du tout. Si t’as une adresse je suis preneur
@Max: Voila la feuille de style avant: http://webvolant.free.fr/styles.css
Voila l’autre après: http://webvolant.free.fr/css.css
C’est peut être aps exactement 60% de gain mais j’y suis presque.
Le fait est qu’avec ta technique tu ne gagnes que le poids du caractères « retour-chariot ». Si on voulais pousser la technique jusqu’au bout, il faudrait retirer TOUS les espaces, écrire toute la CSS sur une seule ligne, utiliser les écritures condensées
(ex: border:1px solid #000; au lieu de border-width:1px;border-style:solid;border-color:#000000)
Là tu réduirait surement la taille de ta css mais tu la rendrait illisible par la même occasion.
Enfin, sur un site fréquemment visité, lorsqu’une css est chargée elle est gardée en cache par le navigateur.
Conclusion: je déconseille fortement l’utilisation de cette technique qui pour moi est une perte de temps et d’énergie pour l’économie de quelques octets !
C’est sur que de tout écrire sur une ligne n’est pas la bonne solution. Organiser et mettre des écriture condensées est une bonne solution.
Sur le CSS est mis en cache mais si on peut accélérer cette vitesse de mise en cache, pourquoi pas?
Si tu codes directement, organiser ainsi le CSS n’est pas une perte de temps, car c’est plus naturel. Après chacun agit comme il le veut. Quand ta HP pèse 800!ko gagner quelques Ko est certes insignifiant, mais petit peu par petit peu ça peut faire ensuite beaucoup et tu optimises ainsi ton site.
Le fait est que, tu le remarquera, sur ton exemple la différence n’est pas de 8Ko entre tes deux fichier mais d’un seul Ko. En effet au cas ou tu n’aurait pas remarqué il y a un bon paquet de lignes a la fin de ta css qui sont arrivées là, on ne sait comment …
Une fois virées tu vera que ta css témoin pèse 9,24ko alors que ta css « optimisée » en pèse 8,22ko (ca peut changer légèrement d’un ordi à un autre mais bon…) le fait est que dans l’histoire on à gagné un tout petit kilo-octet qui n’aura pas mit un dixième de seconde à se charger …
)
Pour info, cette page pèse au moment où j’écris ces lignes 684,9ko (tout compris, çàd pubs, images externes, et tout le toin-toin …) alors le petit ko qui va te faire passer à 683,9ko il coute pas bien cher
Enfin, c’est dommage que quelqu’un qui prône comme toi l’utilisation de cette technique ne l’utilise même pas pour son propre blog…
(je te taquine mais c’est une discution intéressante
@Banke: Autant pour moi alors
Je viens aussi de voir ces lignes là, qu’est ce qu’elles font ici 
Sur dans ce cas là la différence est comment dire … Insignifiante
Mais je l’utilise ! 
pour cette méthode il faut éviter les espaces, car ça reviens au même, si on enlève les retours chariot pour les remplacer par des espaces ça ne sert a rien! le principe est simple, un retour chariot = un caractère, un espace = un caractère
donc si on enlève les sauts de ligne pour les remplacer par des espaces, si comme si on a rien fait!
et en effet il existe des sites pour optimiser le rendu de la feuille de style une fois le travail terminé. http://www.cleancss.com/ par exemple.
@inalgnu : C’est sur j’avais pas penser à en parler, merci du rappel.
Merci aussi pour le site que je ne connaissais pas
Nice post u have here
Added to my RSS reader