Utiliser des sprites avec tag IMG?

Question

Je comprends comment utiliser les sprites, cependant, un attribut "src" n'est-il pas nécessaire pour les tags IMG? Je pourrais toujours utiliser une balise SPAN ou autre et définir le fond / largeur / etc mais cela ne sera pas sémantiquement correct.

Fondamentalement, j'aimerais omettre le code SRC pour une balise IMG et utiliser uniquement des sprites, mais je crains que le code HTML ne soit techniquement pas valide à cause de cela. Merci.

Answer 1

À l'aide de sprites ne signifie pas forcément besoin de les définir en css origines. Vous pouvez également utiliser la balise IMG sprites, pour ce faire vous avez besoin fondamentalement de la garniture de votre image. Il y a deux bons articles expliquant que 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/

CSS et IMG méthodes sûr ont leurs propres avantages, de sorte que vous besoin de trouver celle qui vous convient le mieux.

Answer 2

Sur semantical exactitude:

Lorsqu'une image est sémantique, de sorte qu'il est considéré comme le 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 sémantique, de sorte que vous pouvez simplement utiliser comme arrière-plan d'un SPAN, DIV, etc. à partir de CSS. Vous pouvez utiliser des sprites dans ce cas.

Answer 3

J'utilise un gif transparent 1x1 (appelé spacer) pour le src. puis 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 tout en conservant la sémantique de votre code (vous pouvez toujours utiliser l'attribut alt)

Answer 4

Je pourrais toujours utiliser un SPAN ou un autre tag et définir l'arrière-plan/largeur/etc, mais il ne sera pas sémantiquement correct

En fait il n'y a rien de mal à propos de l'utilisation des CSS pour définir l'arrière-plan d'un span ou div. Il serait incorrect du point de vue syntaxique d'omettre le src d'une image, comme c'est le point entier de la balise. Il n'y a rien dans les normes dites que vous avez à mettre texte à l'intérieur d'une plage. Syntaxiquement parlant, la modification de l'arrière-plan sur un élément qui serait le plus "correct" de le faire.

Voici la ref sur les balises img sur au W3C: http://www.w3.org/TR/html401/struct/objects.html#h-13.2

Et un peu de lecture supplémentaire: http://www.w3.org/TR/html4/struct/global.html#h-7.5.3

Ces éléments définissent contenu inline (SPAN) ou au niveau des blocs (DIV), mais n'impose pas d'autres éléments de présentation des idiomes sur le contenu. Ainsi, les auteurs peuvent utiliser ces éléments en conjonction avec des feuilles de style, l'attribut lang, etc., pour adapter HTML pour leurs propres besoins et de vos goûts.

Answer 5

Vous pouvez utiliser des arrière-plans CSS ou des éléments HTML Canvas sur lesquels s’appuyer de manière dynamique. Avec les canevas, vous avez la possibilité de facilement créer des sous-ensembles d’images et d’effectuer des effets en mode Fusion .