Les sprites CSS

Concernant l'article sur les Sprites CSS notons tout de même deux choses :

Des sites tels que "spriteme" http://spriteme.org/ permettent de se simplifier un peu la vie dans le cas de changements sur un site existant (fonctionnement tout de même aléatoire)
Ou comme spritegen http://spritegen.website-performance.org/ dans le cas d'une création.

Et un des inconvénients de cette technique est que quelqu'un naviguant en ayant désactivé les images (et pas les css) ne verra plus rien du tout ...
Ce qui invalide des critères en terme d'accessibilité.

A utiliser donc avec précaution et de préférence sur des éléments de décoration et non sur des titres / menus de navigation ...
Modifié par flunch (02 Aug 2010 - 15:52)

Sur la question de l'accessibilité, d'ailleurs:
http://www.arespritesaccessible.net/

flunch a écrit :

A utiliser donc avec précaution et de préférence sur des éléments de décoration et non sur des titres / menus de navigation ...

+1, les exemples présents dans le tutoriels ne sont pas à appliquer.

Je me suis demandé si on pouvait néanmoins utiliser cette méthode avec la propriété clip applicable sur les images présentes dans le contenu. Il semble que oui : CSS Sprites with Inline Images. Le problèmes de cette autre méthode, c'est l'affichage complet de l'image quand on désactive les css.

Conclusion, je reste sur mouseover pour les images porteuses de sens.
Modifié par bzh (02 Aug 2010 - 17:37)

Merci pour les liens, c'est intéressant.

Ceci dit, les exemples que je donne sont donnés à titre... d'exemples techniques et ne garantissent pas l'accessibilité ! D'où la phrase :

a écrit :

comme ces techniques se basent sur XHTML et CSS, tous les avantages de ces derniers utilisés à bon escient sont présents : séparation présentation/structure, code lisible et léger, accessibilité, etc.

J'aurais dû mettre en gras le utilisés à bon escient.

Ben oui mais ici c'est standards et accessibilité. A priori quelqu'un qui lit ton article va répéter les mêmes erreurs. D'autre part, tu déclares la fin des rollover javascript comme ci c'était une méthode à proscrire.

Dans ton 4éme exemple, tu aurais pu mette l'image dans le contenu ou encore proposer un exemple avec du texte non masqué.

bzh a écrit :
Ben oui mais ici c'est standards et accessibilité. A priori quelqu'un qui lit ton article va répéter les mêmes erreurs. D'autre part, tu déclares la fin des rollover javascript comme ci c'était une méthode à proscrire.

Non non, faut pas me faire dire ce que je n'ai pas dit ni sortir les propos du contexte, relis : "Le temps des onmouseover, des images préchargées via JavaScript et des autres joyeusetés héritées des grandes périodes de tag soup..."
Je parle d'un ensemble : typiquement le tag soup où la séparation code/contenu est inexistante et où Javascript venait se mêler de manière totalement intrusive pour générer des effets de rollover (qui se cassaient la tronche si javascript est désactivé)... d'ailleurs, je parle bien d'effet de rollover sur des images, et pas sur des liens en particulier.

Alors j'entends bien et je suis 100% d'accord : c'est à prendre avec des pincettes et même si mes exemples utilisent des liens et ne sont pas parfaits, ils ne sont jamais qu'une démo technique. Ceci dit, c'est vrai pour n'importe quelle technique : si le site absolument parfait existait, je crois que nous serions déjà au courant.

J'ose espérer que le lecteur n'est quand même pas bête au point d'appliquer des techniques clairement indiquées comme avancées sans en comprendre les enjeux...


Par contre, vu que tu es parles, et ça je serais curieux de le savoir : quelle proportion de surfeur désactive les images et non les CSS ???

Nico3333fr a écrit :
Par contre, vu que tu es parles, et ça je serais curieux de le savoir : quelle proportion de surfeur désactive les images et non les CSS ???

ça peut être un utilisateur de téléphone mobile ou un internaute en bas débit par exemple.

En tout cas, je me suis permis de rajouter un préambule au tuto

Raphael a écrit :

ça peut être un utilisateur de téléphone mobile ou un internaute en bas débit par exemple.

Ah ok, merci pour l'info !

Raphael a écrit :

En tout cas, je me suis permis de rajouter un préambule au tuto

Et tu as très bien fait.

Nico3333fr a écrit :
quelle proportion de surfeur désactive les images et non les CSS ???

Il faut aussi prendre en compte l'utilisateur qui ne désactive rien du tout, mais qui ne voit pas certaines images. Par exemple, le mois dernier j'ai changé de FAI car l'ancien avait de gros problèmes de lenteurs et ne chargeait pas toutes les images, même avec plusieurs refresh.

Nico3333fr a écrit :

J'ose espérer que le lecteur n'est quand même pas bête au point d'appliquer des techniques clairement indiquées comme avancées sans en comprendre les enjeux...

Euh si, surtout que les problèmes éventuels de cette technique ne sautent pas au yeux.

Mais j'ai vu que c'était à présent signalé dans le tutoriel.

Nico3333fr a écrit :
Par contre, vu que tu es parles, et ça je serais curieux de le savoir : quelle proportion de surfeur désactive les images et non les CSS ???

100% de tes utilisateurs quand ton serveur qui envoie les images est en rade.
Cas de figure constaté personnellement sur quelques sites, de mémoire twitter.com, ameli.fr, et quelques autres.

Plus les problèmes locaux de connexions foireuses, comme soulignés par Laurie-Anne.

Plus les problèmes de connexions lentes, telles qu'une connexion bas-débit (si si, il en reste), ou des connections mobiles Edge ou 3G avec faible réception. Dans ces cas de figure:
- le CSS s'applique parfois assez rapidement, c'est un des premiers éléments chargés et les navigateurs cherchent à l'appliquer le plus rapidement possible (HTML + CSS chargés, tu peux afficher la page même s'il manque des éléments);
- les images risquent par contre d'arriver plusieurs secondes (voire minutes...) plus tard.
Modifié par Florent V. (03 Aug 2010 - 10:57)

J'ai été très intéressé par les articles en question, notamment pour la limitation des requêtes http, mais je me suis retrouvé face à deux problèmes, les deux liés à des histoires de dimensions. J'espère ne pas être HS.

Dans mon menu j'ai des images de 64x64px. Si je met cette image dans le html je ne peux avoir de rollover en css, mais toute l'image est réactive. Si je la met dans la css j'ai bien un rollover mais seul le lien texte caché (avec un display:none, la technique de décalage ne marche apparemment pas dans un menu positionné en absolute) est réactif, donc une hauteur largement inférieure à 64px, ce qui ne me plaît pas du tout. Ai-je une solution autre que onmouseover ?

D'autre part, si je veux mettre des puces en background sur mes titres et listes à puces, je ne vois pas comment déclarer les dimensions de la puce, et je n'ai pas trouvé qu'on pouvait indiquer plus que 2 valeurs de décalage, soit le début mais pas la fin de la zone à afficher. Là encore y a-t-il une solution avec les sprites ?

Merci d'avance.

dcartron a écrit :
Si je la met dans la css j'ai bien un rollover mais seul le lien texte caché (avec un display:none, la technique de décalage ne marche apparemment pas dans un menu positionné en absolute) est réactif, donc une hauteur largement inférieure à 64px, ce qui ne me plaît pas du tout.

Les deux problèmes que tu soulève sont les suivants:
- impossible de donner une hauteur à l'élément;
- impossible de cacher le texte avec un text-indent négatif ou autre technique autre qu'un display:none.

Ces deux problèmes ne sont pas liés au fait de placer ton image en background CSS. Ça n'a juste rien à voir. Si ce sont des problèmes, il faut les traiter individuellement.

Cela dit, on a déjà écrit et répété que la solution recommandée (car accessible) pour les boutons graphiques contenant du texte ou les icones sans label textuel visible... c'est d'avoir une image dans le code HTML avec un attribut alt qui va bien.

dcartron a écrit :
Ai-je une solution autre que onmouseover ?

Des pistes:
1. Faire la même chose qu'un effet de survol classique avec onmouseover, mais avec un script bien fichu, qui se charge du préchargement des images, qui s'exécute au bon moment pour ne pas gêner l'affichage de la page, et qui gère tout seul le survol (sans ajout de onmouseover/onmouseout dans le code HTML).
2. Faire un design qui limite l'usage des images pour les boutons, et qui privilégie le texte HTML (+ styles CSS3 éventuellement pour un rendu sympa), les combos icone CSS + texte HTML, etc.

dcartron a écrit :
je n'ai pas trouvé qu'on pouvait indiquer plus que 2 valeurs de décalage, soit le début mais pas la fin de la zone à afficher.

La technique des sprites CSS ne permet pas de limiter l'affichage de l'image de fond à une portion de cette image. Contrairement à ce que tu mentionnes, tu ne peux même pas indiquer les deux valeurs «de départ». Ce sont les dimensions de l'élément qui limitent la portion d'image qui est affichée... ce qui limite largement les possibilités, et peut poser des problèmes quand un élément devient plus grand qu'initialement prévu (chose courante).

Bonjour,
Toute nouvelle alors j'espère être dans la bonne catégorie ! ma question concerne un problème sur les sprite. J'ai utilisé l'exemple 2 du tuto des sprites.
Tout fonctionne correctement, j'ai remplacé #bandeau par #fd_menu et menugauche par #menu-fr (n'ayant pas besoin de menudroite je l'ai supprimé), mon menu de navigation est enregistré sous nav_fr1.php
Comme dit précédemment tout fonctionne parfaitement.... sauf que lorsque j'intègre mon menu à ma page via <?php include("/nav_fr1.php"); ?> les fonctions hover, active,focus ne fonctionnent plus dès que je remplace le <a href="#" .....> par <a href="nom_de_ma_page.php">
Plus bas le code complet.... j'ai réuni le code sur une page pour plus de compréhension mais tout les styles sont réunis dans ma css.
J'imagine qu'il s'agit d'un problème d'appel de page ou .... d'ailleurs j'en sais rien ! ce que je sais c'est que je n'ai pas le choix, pour gérer plus facilement le site par la suite, je dois avoir un seul fichier menu. En espèrant avoir été claire ! Merci pour vos réponses


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>

<title>test navi sprite</title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<!--[if lte IE 8]><script type="text/javascript" src="roundies.js"></script><![endif]-->

<!-- Javascript -->
<style type="text/css">


/* SPRITE COMPLEXE : EXEMPLE 2 */


#fd_menu {

position:relative;
margin-top: 10px;
margin-bottom:0px;
margin-left:0px;
height: 42px;
background: #fff;
padding:0px;
/*soluc autres navigateurs*/
-moz-border-radius: 10px 10px 0 0;
-webkit-border-radius: 10px 10px 0 0;
border-radius: 10px 10px 0 0;
-webkit-border-top-left-radius: 10px; /* pour Chrome */
-webkit-border-top-right-radius: 10px; /* pour Chrome */
behavior:url(script/border-radius.htc);
}

#menu-fr {
display:block;
position: relative;
min-width:850px;
bottom:0;
padding:0px;
top: 4px;
left: 0px;
}


#menu-fr span
{
display:none;
}

#menu-fr ul
{
list-style-type:none;
border:0;
margin:0;
padding:0;

}



#menu-fr li
{
margin:0;
padding:0;

}

#menu-fr li a
{
position:absolute;
left:0px;
display:block;
height:35px;

background:url("images/navi_fr.png") 0 0 no-repeat;
border:0;
margin:0;
}

#menu-fr #n1
{
width: 60px;
left: 4px;
background-position:0 0;
}

#menu-fr #n1:hover,#menu-fr #n1:active,#menu-fr #n1:focus
{
background-position:0 -35px;
}

#menu-fr #n2
{
width: 126px;
left:64px;
background-position:-60px 0;
}

#menu-fr #n2:hover,#menu-fr #n2:active,#menu-fr #n2:focus
{
background-position:-60px -35px;
}

#menu-fr #n3
{
width:126px;
left:190px;
background-position:-186px 0;
}

#menu-fr #n3:hover,#menu-fr #n3:active,#menu-fr #n3:focus
{
background-position:-186px -35px;
}

#menu-fr #n4
{
left:314px;
width:126px;
background-position:-310px 0;
}

#menu-fr #n4:hover,#menu-fr #n4:active,#menu-fr #n4:focus
{
background-position:-310px -35px;
}

#menu-fr #n5
{
width:126px;
left:439px;
background-position:-435px 0;
}

#menu-fr #n5:hover,#menu-fr #n5:active,#menu-fr #n5:focus
{
background-position:-435px -35px;
}

#menu-fr #n6
{
width:126px;
left:564px;
background-position:-560px 0;
}

#menu-fr #n6:hover,#menu-fr #n6:active,#menu-fr #n6:focus
{
background-position:-560px -35px;
}

#menu-fr #n7
{
left:690px;
width:126px;
background-position:-686px 0;
}

#menu-fr #n7:hover,#menu-fr #n7:active,#menu-fr #n7:focus
{
background-position:-686px -35px;
}




</style>

</head>
<body bgcolor="#CCCCCC">
<div id="fd_menu">
<div id="menu-fr">
<ul>
<li><a href="#" id="n1" title="navi1"><span>navi1</span></a></li>
<li><a href="/fr/page2.php" id="n2" title="navi2"><span>navi2</span></a></li>
<li><a href="#" id="n3" title="navi3"><span>navi 3</span></a></li>
<li><a href="#" id="n4" title="navi4"><span>navi4</span></a></li>
<li><a href="#" id="n5" title="navi5"><span>navi5</span></a></li>
<li><a href="#" id="n6" title="navi6"><span>navi6</span></a></li>
<li><a href="#" id="n7" title="navi7"><span>navi7</span></a></li>
</ul>
</div> <!-- fin de menu-fr -->
</div> <!-- fin de fd_menu -->

</body>
</html>

Salut,

@shobann : Pas de soucis pour la section du forum, par contre tu aurais du ouvrir ton propre sujet, ce qui présente l'avantage pour toi de le suivre plus facilement, et de ne pas interférer dans le sujet d'un autre, même sur le même thème.

Par ailleurs, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle.