28173 sujets

CSS et mise en forme, CSS3

Bonjour

Le regroupement est une chose bien pratique pour allèger les feuilles CSS. Avec un site de 120 pages, ma feuille CSS titre 4995 octets et je souhaite lui offrir un petit régime.

Je souhaite donc regrouper le plus possible.

Je me suis demandé s'il était possible de regrouper la balise color et background color en une seule ligne, un peu dans le genre

font-size:1.2em;
line-height:1.5em;
=
font:1.2em/1.5em;


J'ai eut beau chercher sur le livre CSS2, Pratique du design Web, mais je n'ai pas trouvé ... Smiley cligne
Modifié par Gunner4902 (28 Jan 2007 - 00:09)
Salut,

Sauf méconnaissance de ma part, ce que tu demande n'est pas possible, la propriété color étant appliquée pour le texte, et la propriété background color pour les fonds. Il te faut donc conserver les deux lignes distinctes.

En même temps, 5ko pour un site de 120 pages c'est plus qu'honorable ! La feuille de style ne sera de toute manière téléchargé que la première fois, ce n'est donc pas 1 ou 2 ko qui vont changer vraiment la donne.
Non, il n'existe pas de propriété permettant de spécifier à la fois color et background-color. Par contre, pour les instructions de couleur et image de fond, on peut utiliser background.

Au passage, la propriété permettant de spécifier la hauteur de ligne est line-height, pas *height-line.


Quoi qu'il en soit, l'optimisation d'une feuille de style ne devrait être faite qu'avec l'objectif suivant en tête : faciliter l'écriture, la lisibilité et donc la maintenance des feuilles de style.

On se fiche royalement de gagner 1 Ko en factorisant deux bouts de code, surtout si on doit y perdre en lisibilité et en facilité de maintenance (ce qui sera le cas si on veut produire la feuille de style la plus compacte possible). Éditez plutôt vos images de fond et vos images de contenu. En optimisant une image, on peut gagner plusieurs Ko d'un seul coup. Ne pas perdre son temps sur l'optimisation des feuilles de style pour des questions de poids des fichiers.
Florent V. a écrit :
Au passage, la propriété permettant de spécifier la hauteur de ligne est line-height, pas *height-line.


Coquille de recopie Smiley cligne , sorry

Pour ce qui est du poids, en regroupant, je suis arrivé à 4200 octets, tout en restant aéré et structuré pour permettre des modifications ultérieures faciles.

Merci à vous

ps : étant donné que le validateur CSS associe la couleur du texte avec celle du background en cas de défaut de l'un des deux, il serait intéressant pour le CSS4 de peut etre faire un regroupement pour ces 2 balises Smiley murf
Gunner4902 a écrit :

ps : étant donné que le validateur CSS associe la couleur du texte avec celle du background en cas de défaut de l'un des deux, il serait intéressant pour le CSS4 de peut etre faire un regroupement pour ces 2 balises Smiley murf


Hum.. La syntaxe raccourcie de background: [<'background-color'> || <'background-image'> || <'background-repeat'> || <'background-attachment'> || <'background-position'>] a déjà été suffisamment délicate côté implémentations. Je n'ose pas penser à celles des syntaxes de background avancés CSS3... Alors, laissons color tranquille Smiley cligne
Modifié par Laurent Denis (27 Jan 2007 - 16:19)