Utiliser des sprites avec la balise IMG?
Je comprends comment utiliser les sprites, cependant, un attribut "src" n'est-il pas requis pour les balises IMG? Je pourrais toujours utiliser une SPAN ou une autre balise et définir l'arrière-plan/width / etc mais ce ne sera pas sémantiquement correct.
Fondamentalement, je voudrais omettre le SRC pour une balise IMG et utiliser juste des sprites, mais je suis préoccupé par le fait que le HTML n'est pas techniquement valide à cause de cela. Grâce.
6 réponses
À propos de l'exactitude sémantique:
Lorsqu'une image est sémantique, de sorte qu'il est considéré comme contenu, utiliser une balise IMG, sans sprites, et correctement mis en place ALT.
Lorsqu'une image est juste de la décoration,, comme le fond d'une boîte, d'arrière-plan d'un bouton, fond d'une option de menu, etc., il n'a pas de signification sémantique, donc vous pouvez simplement l'utiliser comme arrière-plan d'un SPAN, DIV, etc. à partir de CSS. Vous pouvez utiliser des sprites dans ce cas.
L'utilisation de sprites ne signifie pas nécessairement que vous devez les définir dans des arrière-plans css. Vous pouvez également utiliser img tag sprites, pour ce faire, vous devez essentiellement couper votre image. Il y a deux bons articles expliquant cette technique:
Http://tjkdesign.com/articles/how-to_use_sprites_with_my_Image_Replacement_technique.asp
Http://www.artzstudio.com/2010/04/img-sprites-high-contrast/
Les deux méthodes CSS et IMG ont certainement leurs propres avantages, vous devez donc déterminer celui qui vous convient le mieux.
J'utilise un gif transparent 1x1 (appelé spacer) pour le src. ensuite, définissez l'image d'arrière-plan pour cette balise img avec la position BG correspondante. de cette façon, vous utilisez la vitesse des sprites et gardez la sémantique de votre code (vous pouvez toujours utiliser l'attribut alt)
Je pourrais toujours utiliser une SPAN ou une autre balise et définir l'arrière-plan / width/etc mais ce ne sera pas sémantiquement correct
En fait, il n'y a rien de mal à utiliser CSS pour définir l'arrière-plan d'un span ou div. Il serait en fait incorrect syntaxiquement d'omettre le src d'une image, car c'est tout le point de la balise. Il n'y a rien dans les normes disant que vous devez mettre du texte dans une portée. Syntaxiquement parlant, modifier l'arrière-plan sur un élément serait le la façon la plus "correcte" de le faire.
Voici la référence sur les balises img au W3C: http://www.w3.org/TR/html401/struct/objects.html#h-13.2
Et une petite lecture supplémentaire: http://www.w3.org/TR/html4/struct/global.html#h-7.5.3
Ces éléments définissent le contenu comme inline (SPAN) ou block-level (DIV) mais n'imposent aucun autre idiome de présentation au contenu. Ainsi, les auteurs peuvent utiliser ces éléments en conjonction avec des feuilles de style, l'attribut lang, etc., pour adapter HTML à leurs propres besoins et goûts.
Vous pouvez utiliser des arrière-plans CSS ou des éléments HTML Canvas pour dessiner dynamiquement. Avec canvas vous avez la possibilité de facilement sous-ensemble des images et effectuer effets en mode de fusion .
Vous résolvez cela en repensant vos options.
Vous créez une zone définie avec un <a> avec display:block; ou <div> et utiliser overflow hidden; cacher de débordement et de position:relative;.
Ensuite, vous placez votre image sprite <img> à l'intérieur absolument positionné, ce qui est possible puisque vous avez positionné le parent.
, Puis utilisez :hover sur l'image pour changer de position.
Maintenant, votre sprite est basé sur une balise img, vous pouvez donc utiliser votre texte alt.
L'exemple suivant est basé sur un Facebook sprite avec deux versions de l'icône l'une sur l'autre, chacune 50px par 50px, la hauteur totale de l'image étant 100px:
<!DOCTYPE html>
<html>
<head>
<style>
.icon {
display:block;
position:relative;
width:50px;
height:50px;
border:1px solid red;
overflow:hidden;
}
#fb {
position:absolute;
top:0;
left:0;
}
#fb:hover {
position:absolute;
top:-50px;
left:0;
}
</style>
</head>
<body>
<a href="https://facebook.com" class="icon" title="Facebook">
<img src="sprite-facebook.png" id="fb" width="50" height="100" alt="Facebook">
</a>
</body>
</html>