28172 sujets

CSS et mise en forme, CSS3

Créer du css dynamique sans php, possible ?

Bonjour,

afin de réduire le taille de mon fichier css et surtout de le rendre plus dynamique et plus souple pour de futures modifications de design je cherche à rendre une partie du code CSS dynamique exemple :

j'ai une barre de navigation dans le code HTML :

<nav>
                   	<a href="#" title="donjons">Donjons</a><!--
                   	--><a href="#" title="items">Items</a><!--
                 	--><a href="#" title="outils">Outils</a><!--
                  	--><a href="#" title="recherche">Recherche</a>                  
           		</nav>


le code CSS associé :
nav a{
	display:inline-block;
	height:99px;
	font-size:0px;
	line-height:0px;
}

nav a[title="donjons"]{
	width:257px;
	background-image:url(images/temps/donjons_nav.png);
}
nav a[title="items"]{
	width:218px;
	background-image:url(images/temps/items_nav.png);
}
nav a[title="outils"]{
	width:250px;
	background-image:url(images/temps/outils_nav.png);
}
nav a[title="recherche"]{
	width:275px;
	background-image:url(images/temps/recherche_nav.png);
}
nav a[title="donjons"]:hover{
	background-image:url(images/temps/donjons_hover.png);
}
nav a[title="items"]:hover{
	background-image:url(images/temps/items_hover.png);
}
nav a[title="outils"]:hover{
	background-image:url(images/temps/outils_hover.png);
}
nav a[title="recherche"]:hover{
	background-image:url(images/temps/recherche_hover.png);
}


Comme on peut voir le css est long pour juste un bouton dynamique.

Est il possible dans le CSS (sans PHP) de récupérer dynamiquement la valeur le l'attribut title du lien survolé et ainsi l'utiliser comme variable afin d'afficher l'image correspondant au lien avec un code css du genre :

nav a[title="variable"]:hover{
background-image:url(images/temps/variable.png);
}

merci

cordialement

nuphius
malheureusement non Smiley decu

Et ça manque vraiment !

Cordialement

ps; mais en javascript oui , tu peut recuperer le title , en faire une variable et la réinjecter via "style" dans une chaine.
Modifié par gc-nomade (01 Jun 2011 - 12:52)
Directement en CSS ce n'est pas possible. Par contre ton utilisation de title est incorrecte. Tes titres sont complètements redondants avec le texte de tes liens, ils devraient donc être supprimés. Tu devrais utiliser un ID pour chaque lien à la place.
Comme l'a dit gc-nomade tu peux le faire en js.

Tu récupérés la liste de liens. Puis l'id de chaque lien et tu l'utilises pour appliquer l'image.


<nav> 
	<a href="#" id="donjons">Donjons</a><!-- 
	--><a href="#" id="items">Items</a><!-- 
	--><a href="#" id="outils">Outils</a><!-- 
	--><a href="#" id="recherche">Recherche</a>
</nav>




		window.onload = function() {
			var links = document.getElementsByTagName('nav')[0].getElementsByTagName('a');
			for(i=0; i < links.length; i++)
			{
				var img = 'images/temps/' + links[i].getAttribute('id') + '_nav.jpg';
				links[i].style.backgroundImage = 'url("' + img + '")';
			}
		}
[/i][/i]
jb_gfx a écrit :
Directement en CSS ce n'est pas possible.

Du moins tant que attr() n'est pas correctement spécifié en CSS3 (c'est un peu en flux...) et supporté par les navigateurs.

jb_gfx a écrit :
Par contre ton utilisation de title est incorrecte.

Oui. Utiliser id ou class qui sont faits pour ça.
Je note quand même qu'il y a moyen de diviser par deux ou trois la longueur du code CSS en utilisant des images combinées pour les états normaux et de survol (méthode des portes coulissantes), voire en utilisant une image unique (sprite CSS). Ça permettra aussi de réduire le nombre de requêtes HTTP nécessaires par 2 ou par 8...

Donc avant de dynamiser du CSS à coup de JavaScript, on peut tâcher d'écrire un code CSS efficace. Smiley cligne
<mode j'ai envie de dire une connerie>Les sprites c'est mal...</mode j'ai envie de dire une connerie>
Modifié par jb_gfx (01 Jun 2011 - 18:06)
jb_gfx a écrit :
Les sprites c'est mal...

Parfois c'est mal, parfois c'est bien.

Si l'information principale est donnée en texte HTML (et là j'ose espérer que c'est le cas), bah utiliser un bon sprite pour mettre des illustrations/icones en background ça ne fait pas de mal. (Je note en passant que ce ne sont pas les sprites qui posent problème, mais plus globalement le fait de mettre des images porteuses de contenu en background CSS.)
bonsoir (enfin rentré du boulot),

merci pour vos réponses, j'ai effectivement fais des testes avec attr() ... sans succès bien sûr.

les titles sont là pour l'accessibilité (je voulais faire une pierre deux coups).

je voulais me passer de javascript (même s'il est de plus en plus rapide et moins de contrainte)

fvsch

a écrit :
combinées pour les états normaux et de survol (méthode des portes coulissantes)


tu peux développer ? (désolé je suis très loin d'être de métier)

merci
Modifié par nuphius (01 Jun 2011 - 21:22)
nuphius a écrit :
les titles sont là pour l'accessibilité (je voulais faire une pierre deux coups)

<span title="Une info">Une info</span> n'est pas plus accessible que <span>Une info</span>.
Ne pas hésiter à commencer à se former un peu à l'accessibilité en lisant quelques articles de fond sur des sites bien fichus, voire en consultant des référentiels tels que le RGAA.

nuphius a écrit :
tu peux développer ? (désolé je suis très loin d'être de métier)

Je t'invite à chercher "css portes coulissantes" sur ton moteur de recherche favori. Smiley cligne
a écrit :
<span title="Une info">Une info</span> n'est pas plus accessible que <span>Une info</span>.


je me doute Smiley cligne le code plus haut été un teste simplifié tout en cherchant faire une pierre deux coups.

a écrit :
Je t'invite à chercher "css portes coulissantes" sur ton moteur de recherche favori


je connais (pas en détaille) je pensé que tu avais une solution (perso) des portes coulissantes plus optimisé.

merci pour vos réponses.
Sujet clos
Aller à