Améliorer l'écriture de ma feuille de style

Je me suis planté de rubrique dans le forum je crois, un modérateur pourra déplacer ce message dans la rubrique CSS

Bonjour à tous,

J'ai créé une feuille de style et elle est valide, c'est déjà bien. Maintenant je n'ai pas encore assez les réflexe d'optimisation d'écriture de feuille de style. Est-ce que vous pouvez y jeter un coup d'oeil rapide pour voir les plus grosses erreures niveau optimisation d'écriture ? Merci

/* CSS Document */



/* ===DEBUT GENERAL=== */
body {
	margin: 0;
	color: #6c6c6c;
	background: #bfb600 url(img/fond_body.png);
	text-align: center; /* On centre la page */
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
}

img {
	border: 0 none;
}
/* ===FIN GENERAL=== */



/* ===DEBUT PAGE=== */
#page { /* Conteneur centré de tout le site */
	text-align: left; /* On rétablit le texte à gauche */
	width: 760px;
	margin: 0 auto 10px auto; /* Marges gauche et droite auto pour centrer la page */
	position: relative;
	background: #fff;
}
/* ===FIN PAGE=== */



/* ===DEBUT ENTETE=== */
#entete {
	margin: 0;
	height: 114px;
	background: #71abdd url(img/bandeau.jpg);
}

#entete img {
	margin: 20px 0 0 295px;
}
/* ===FIN ENTETE=== */



/* ===DEBUT MENU=== */
#menu {
	position: relative;
	margin: 0;
	float: left;
	width: 154px;
	height: 287px;
	background: #ccc;
}
#bouton {
	margin: 0;
}
/* ===FIN MENU=== */



/* ===DEBUT CONTENU=== */
#contenu h1 {
	margin: 10px 0 0px 0;
	padding: 0;
	color: #fe8713;
	font-size: 14px;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	border-bottom: 1px dashed #fe8713;
}

#contenu h2 {
	margin: 20px 0 8px 7px;
	padding: 0 0 0 15px;
	color: #cec700;
	font-size: 10px;
	font-weight: bold;
	text-transform: uppercase;
	border-bottom: 1px dotted #bdbbb1;
	background: url(img/puce_h2.png) no-repeat;
}

#contenu h3 {
	margin: 20px 0 10px 8px;
	padding: 0;
	text-align: justify;
	color: #fe8713;
	font-size: 10px;
	font-weight: bold;
}

#contenu p {
	margin: 0 0 10px 8px;
	padding: 0;
	text-align: justify;
}

strong {
	font-weight: bold;
}

#contenu ul {
	margin: 0 0 0 22px;
	padding: 0;
	list-style: none;	
}

#contenu li {
	margin: 0 0 5px 0;
	padding: 5px 0 0 13px;
	background: url(img/puce_liste.png) no-repeat;
}

#contenu {
	margin: 0;
	float: left;
	width: 606px;
	background: url(img/fond_contenu.png);	
}

#contenumarge {
	margin: 0 88px 0 55px;
}

#contenu a {
	position: relative;
	color: #fe8713;
	text-decoration: underline;
}

#contenu a span {
	display: none;
}

#contenu a:hover {
	text-decoration: none;
	background: none;
	z-index: 500;
}

#contenu a:hover span {
	text-align: justify;
	color: #6c6c6c;
	display: block;
	bottom: 2em;
	left: -2em;
	width: 30em;
	font-weight: bold;
	position: absolute;
	background: #fff url(img/fond_info.png) repeat-y;
	border-right: #CCCCCC  solid 2px;
	border-bottom: #CCCCCC solid 1px;
	padding: 0.5em 1em 0.5em 2.5em;
	z-index: 500;
}

#contenu #mentions {
	margin: 0 0 10px 7px;
	padding: 30px 0 0 0;
	color: #cec700;
}

#contenu #mentions li {
	margin: 0 0 10px 0;
	padding: 0;
	float: left;
	background: none;
}

#contenu #mentions a {
	color: #cec700;
	font-weight: bold;
}

#contenu #mentions a:hover span {
	background: #fff url(img/fond_enavant.png) repeat-y;
}

.imggauche {
	margin: 0 8px 0 15px;
	float: left;
}

.imgdroite {
	margin: 0 0 0 8px;
	float: right;
}

#contenu .enavant {
	margin: 0 0 0 7px;
	padding: 5px 0 5px 22px;
	background: url(img/fond_enavant.png) repeat-y;
}

#contenu .enavant li {
	background: url(img/puce_liste_enavant.png) no-repeat;
}
/* ===FIN CONTENU=== */



/* ===DEBUT PIED DE PAGE=== */
#pied {
	margin: 0;
	padding: 0;
	background: #bfb600 url(img/fond_pied.png);
	height: 6px;
	clear: both;	
}
/* ===FIN PIED DE PAGE=== */

Modifié par tankia (18 Nov 2006 - 12:47)[/edit]

Salut,

Tu peux utiliser les versions simplifiées pour margin et padding.

Par exemple :

margin: 0 auto 10px auto;

peut être écrit :

margin: 0 auto 10px;

Merci pour ton conseil Eldebaran, je pensais qu'on n'avait le droit que pour ce cas :

margin: 0 auto;

Eldebaran a écrit :
Par exemple :

margin: 0 auto 10px auto;

peut être écrit :

margin: 0 auto 10px;

Ah bon ?

Effectivement, je viens de tester et les navigateurs ont l'air de s'en sortir. Par contre, je trouve ça peu clair comme formulation.

tankia > globalement, il n'y a pas grand chose à « optimiser » dans ta feuille de style. C'est clair, et il y a très peu de redondances. Et comme il n'y a pas de prime lorsqu'on factorise ou évite les redondances le plus possibles, j'en resterais là.

Merci pour vos explications,

Eviter la redondance et optimiser sa feuille de style je pense que ça allège un peu son poids et c'est un point positif

Juste une petite question qui me turlupine sur l'écriture de feuille de style, lorsque j'utilise l'écriture :

Par exemple :

img#bouton {
	display: block;
}

ça ne fonctionne pas et l'inverse :

#bouton img {
	display: block;
}

fonctionne.

Alors pourquoi cette écriture fonctionne aussi alors que la balise est devant l'id :

a#bouton1:hover {
	background: #fff;
}

Existe-t-il une page sur le web qui explique toutes ses subtilités de l'écriture css ? Ca m'aiderait pas mal pour leur rédaction
Modifié par tankia (18 Nov 2006 - 14:53)

Hello,

img#bouton {display: block;}

Là tu t'adresses a la balise <img> qui a pour identité bouton

Il faut que tu ai en html :

<img id="bouton" src="" alt="" />

Pour :

#bouton img {display: block;}

Là tu t'adresses aux balises <img> contenues dans un élément qui a pour identité bouton

Il faut que tu ai en html par exemple :

<p id="bouton"><img  src="" alt="" /> texte, texte <img  src="" alt="" /> </p>

Les deux images contenues dans l'élément <p id="bouton"> passeront en block.

a#bouton1:hover {background: #fff;}

Je pense que c'est normal que ce code marche, dans ce cas tu définis l'état :hover d'un <a id="bouton1">
Il faut que tu ai en html :

<a id="bouton" href="" title="" >Texte du lien </a>

Mais si tu fais :

#bouton1 a:hover {background: #fff;}

Tu devras avoir en html :

<p id="bouton"><a href="" title="">texte</a></p>

Autrement pour les font tu peux ecrire comme ça (milieu de page).



Validateur de css, indispensable...
Modifié par Hum (18 Nov 2006 - 16:47)

Salut,

img#bouton {
	display: block;
}

Ceci s'applique à une image ayant l'identifiant "bouton" (qui dans ces cas la devrait plutôt être une classe, car j'imagine qu'il y a plusieurs boutons)

#bouton img {
	display: block;
}

Ceci s'applique à toutes les images qui se situent dans un conteneur ayant pour identifiant "bouton".

a#bouton1:hover {
	background: #fff;
}

Ceci fonctionne car ton lien a possède un identifiant "bouton1"
Si par contre ton <a> se trouvait dans un <li> que tu aurais identifié par "bouton1", ca ne fonctionnerait pas et il faudrait alors écrire :

#bouton1 a:hover {
	background: #fff;
}

pour mieux comprendre comment fonctionne ces sélecteurs, je t'invite à aller jeter un coup d'oeil sur cette page :
http://www.yoyodesign.org/doc/w3c/css2/selector.html#x1

EDIT : grillé
Modifié par Mikachu (18 Nov 2006 - 16:46)

tankia a écrit :
Eviter la redondance et optimiser sa feuille de style je pense que ça allège un peu son poids et c'est un point positif

En fait non, le poids de la feuille de style CSS on s'en fout royalement.
Bon, c'est un peu brutal alors je développe :
1 - Une feuille de style un peu complexe, bien optimisée, peut faire 5 Ko. Mal rédigée, elle peut faire 10 Ko, voire (soyons fous) 15 Ko. Au pire, on a donc 10 Ko de trop. Cette feuille de style ne sera chargée qu'une fois, et mise en cache par le navigateur. Surcharge totale : 10 Ko.
2 - Une image de fond mal optimisée peut faire 10, 20, 30 ou 50 Ko de trop (ou pire encore, si on n'est pas doué pour choisir le format d'image). Souvent, on a plusieurs images de fond pour un design, ce qui multiplie les risques. Chaque image ne sera chargée qu'une fois, puis mise en cache, mais avec le cumul des différentes images on peut arriver à une surcharge totale entre 50 et 500 Ko.
3 - Les images de contenu, si elles sont nombreuses, peuvent également peser lourd. Là, la non-optimisation peut couter cher, entre quelques centaines de Ko en trop ou quelques Mo en trop !

Bref, le poids en trop de la feuille de style est négligeable. Et, bien sûr, l'optimisation fera rarement gagner 10 Ko, mais plutôt 2 ou 3 Ko... pas grand chose, donc.

Le seul véritable avantage de l'optimisation d'une feuille de style, c'est le gain de temps lié à une bonne organisation méthodologique. Là, c'est à chacun d'utiliser ses recettes, mais en gros : utiliser à bon escient les propriétés générales pour renforcer la lisibilité du code (background plutôt que background-image + background-position + etc., margin plutôt que margin-top + margin-bottom + margin-left + margin-right...), grouper les déclarations liées (par exemple par zone sur la page), créer des « sections » en plaçant des commentaires, etc.

tankia a écrit :
Juste une petite question qui me turlupine sur l'écriture de feuille de style, lorsque j'utilise l'écriture :

Par exemple :

img#bouton {
	display: block;
}

ça ne fonctionne pas et l'inverse :

#bouton img {
	display: block;
}

fonctionne.

Si un sélecteur ne fonctionne pas, c'est qu'il ne sélectionne rien.
img#bouton sélectionne l'élément img qui porte l'identifiant "bouton".
#bouton img sélectionne les éléments img qui sont contenus à l'intérieur d'un élément (n'importe lequel) portant l'identifiant "bouton".

tankia a écrit :
Alors pourquoi cette écriture fonctionne aussi alors que la balise est devant l'id :

a#bouton1:hover {
	background: #fff;
}

Si ce sélecteur fonctionne, c'est que tu as dans ton code un élément a portant l'identifiant "bouton1".

tankia a écrit :
Existe-t-il une page sur le web qui explique toutes ses subtilités de l'écriture css ? Ca m'aiderait pas mal pour leur rédaction

Effectivement, au vu de la question posée une petite révision sur la syntaxe des sélecteurs CSS me semble indispensable.

Comme resources, il y a toujours la spécification CSS 2 :
http://www.yoyodesign.org/doc/w3c/css2/selector.html

Ou cet article en trois parties (avec ça tu seras paré) :
http://www.floatthatbox.com/articles/selecteurs-css-21-partie-1.htm


Edit : grillé également...
Modifié par mpop (18 Nov 2006 - 16:58)

Merci beaucoup pour toutes vos réponses, je vais me faire une grosse révision des selecteur css, cette notion est toujours un peu flou dans ma tête, merci pour les liens

mpop a écrit :
Ah bon ?

Effectivement, je viens de tester et les navigateurs ont l'air de s'en sortir. Par contre, je trouve ça peu clair comme formulation.

Je ne vois pas ce que cette syntaxe a de "peu clair". C'est une question d'habitude comme pour toutes les autres, voilà tout (la syntaxe avec les quatre valeurs n'est pas spécialement claire quand on ne la connait pas non plus).

Et oui, tous les navigateurs s'en sortent, puisque cette syntaxe fait partie des normes. De plus, elle est de mon point de vue utile car on a souvent besoin de spécifier des valeurs identiques sur les côtés (par exemple auto) et des valeurs différentes en haut et en bas.

Eldebaran a écrit :
Je ne vois pas ce que cette syntaxe a de "peu clair". C'est une question d'habitude comme pour toutes les autres, voilà tout (la syntaxe avec les quatre valeurs n'est pas spécialement claire quand on ne la connait pas non plus).

Et oui, tous les navigateurs s'en sortent, puisque cette syntaxe fait partie des normes. De plus, elle est de mon point de vue utile car on a souvent besoin de spécifier des valeurs identiques sur les côtés (par exemple auto) et des valeurs différentes en haut et en bas.

Oui, effectivement, pourquoi pas. Pour ma part j'ai tendance, dans le cas que tu décris, à donner les quatre valeurs (et tant pis si l'une est en double). Mais effectivement, il n'y a objectivement pas de raisons pour que ça soit moins clair.

a écrit :
Oui, effectivement, pourquoi pas. Pour ma part j'ai tendance, dans le cas que tu décris, à donner les quatre valeurs (et tant pis si l'une est en double). Mais effectivement, il n'y a objectivement pas de raisons pour que ça soit moins clair.

j'ai bien lu ce que tu as répondu dans un autre post concernant l'optimisation des feuilles de styles, avis que je partage, ceci dit je fais toujours passer la feuille à l'optimiseur pour voir les avertissements sur les styles compressibles sans compresser la mise en forme interne du code. Mettre 4 valeurs quand les valeurs droite et gauches sont répétées donne un message d'avertissement. Autant ne pas répéter cette valeur, en cas de modif sur le site il sera toujours temps de l'ajouter.
<mode moqueur>
Sinon dans ta logique faudrait aussi mettre les 4 valeurs quand t'en as besoin que de 2, puis aussi quand t'en as besoin que d'une, au cas où
</mode moqueur>
Modifié par Mikachu (19 Nov 2006 - 01:18)

Mikachu a écrit :
Mettre 4 valeur quand les valeurs droite et gauches sont répétées donne un message d'avertissement.

Heureusement que les outils automatiques sont des indicateurs et pas des règles à suivre, n'est-ce pas ?

Mikachu a écrit :
Autant ne pas répéter cette valeur, en cas de modif sur le site il sera toujours temps de l'ajouter.

Pourquoi pas, effectivement.
Mais bon, les petites optimisations de bout de chandelle, hein... l'important, c'est la cohérence et la lisibilité du code.

Mikachu a écrit :
<mode moqueur>
Sinon dans ta logique faudrait aussi mettre les 4 valeurs quand t'en as besoin que de 2, puis aussi quand t'en as besoin que d'une, au cas où
</mode moqueur>

En fait, je pensais plutôt mettre une quinzaine de valeurs quand on en aurait besoin d'aucune, histoire de faire les choses proprement et clairement.

mpop a écrit :
Mais bon, les petites optimisations de bout de chandelle, hein... l'important, c'est la cohérence et la lisibilité du code.

C'est sûr...

De toute façon, chacun choisit sa méthode. Les goûts et les couleurs...