28172 sujets

CSS et mise en forme, CSS3

Simplification Css

Bonjour,

J'ai un site avec des onglets.
Le background est basé sur 2 sprites ( onglet actif et onglet inactif)

<td class="On">
<div class="LeftTab">
<div>
<div class="MiddleTab">
<div>
<div class="RightTab">
<div>
</td>




.Off .LeftTab
{
	background-image:url(Images/TabOff.png);	
}
.Off .MiddleTab
{
	background-image:url(Images/TabOff.png);	
}
.Off .RightTab
{
	background-image:url(Images/TabOff.png);	
}
.On .LeftTab
{
	background-image:url(Images/TabOn.png);	
}
.On .MiddleTab
{
	background-image:url(Images/TabOn.png);	
}
.On .RightTab
{
	background-image:url(Images/TabOn.png);	
}
.LeftTab
{
	width: 5px;
	float:left;
	height: 35px;
}
.MiddleTab
{
	background-position:0px -33px;
	background-repeat: repeat-x;
	float:left;
	height: 25px;
	padding-top: 10px;
}
.RightTab
{
	background-position:0px -66px;
	width: 15px;
	float:left;
	height: 35px;
}


Y a t'il moyen de simplifier le Css, notament la répétition de l'image background?

Merci
Salut,
CrazyTroopers a écrit :
Y a t'il moyen de simplifier le Css, notament la répétition de l'image background?

Oui. D'abord, sache que l'attribut class peut recevoir plusieurs valeurs (séparées par une espace), ce qui est plus pratique lorsqu'on peut factoriser certains styles, comme c'est le cas ici.

<td class="On">

<div class="LeftTab tab">

<div>

<div class="MiddleTab tab">

<div>

<div class="RightTab tab">

<div>

</td>

Ainsi, ta feuille de style se simplifie comme suit :

.Off .tab
{
	background-image: url(Images/TabOff.png);	
}
.On .tab
{
	background-image: url(Images/TabOn.png);	
}
.LeftTab
{
	width: 5px;
	float:left;
	height: 35px;
}
.MiddleTab
{
	background-position:0px -33px;
	background-repeat: repeat-x;
	float:left;
	height: 25px;
	padding-top: 10px;
}
.RightTab
{
	background-position:0px -66px;
	width: 15px;
	float:left;
	height: 35px;
}

On peut aller encore plus loin, en fusionnant les deux images d'arrière-plan : cela permet d'économiser le nombre de requêtes HTTP à envoyer au serveur pour charger la page (autrement dit, c'est bon pour les performances Web). Après, il te suffira de jouer avec la propriété background-position.

Bien entendu, il faut que les images d'arrière-plan soient purement décoratives, c'est-à-dire qu'elles ne doivent pas contenir de texte (imagine que les images ne se chargent pas parce que le serveur est en rade Smiley cligne ).
Hello !
tu peux simplifier ton css en appliquand la mème classe au tab OFF, et une tab ON du genre :

[EDIT ] ok ok ... triple owned... avec des réponse plus abouties ^^" je gomme.[/EDIT]

en admettant qu'il n'y ai que ta première tab d’éteinte.
En fait, dans la mesure ou tu appels plusieurs fois le mème background, tu peux (dois ? ) utiliser une class
Modifié par saajuck (09 Sep 2011 - 10:24)
Ok, merci pour vos réponses : j'ai opté pour la solution de Victor.

Mais du coup j'ai une question :
Pourquoi, dans le cas suivant, le style n'est pas appliqué?

.Left .Tab
{
	width: 5px;
	float:left;
	height: 35px;
}




<div class="Left Tab">
</div>
Parce que ton style veut dire "un élément qui a la classe tab dans un élément qui a la classe letf", alors que tu veux un élément qui a la classe tab et la classe left.

Dans ce cas c'est :

.Left.Tab

(tout attaché)

Mais ce code ne fonctionne pas sur IE6.
Sujet clos
Aller à