web-dev-qa-db-fra.com

Vous utilisez 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 un SPAN ou une autre balise et définir l'arrière-plan/la largeur/etc, mais ce ne sera pas sémantiquement correct.

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

htmlcsscss-spriteshtml-validation
61
Ryan Peters

À propos de l'exactitude sémantique:

Lorsqu'une image a une signification sémantique, donc elle est considérée comme du contenu, tilisez une balise IMG, sans sprites, et un ALT correctement configuré.

Lorsqu'une image n'est qu'une décoration, comme l'arrière-plan d'une boîte, l'arrière-plan d'un bouton, l'arrière-plan d'une option de menu, etc., elle n'a pas de signification sémantique, vous pouvez donc simplement tiliser comme arrière-plan d'un SPAN, DIV, etc. de CSS. Vous pouvez utiliser des sprites dans ce cas.

57
kapa

L'utilisation de sprites ne signifie pas nécessairement que vous devez les définir dans les arrière-plans CSS. Vous pouvez également utiliser les sprites de balises IMG, pour ce faire, vous devez essentiellement découper votre image. Il existe 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 méthodes CSS et IMG ont chacune leurs propres avantages, vous devez donc déterminer celle qui vous convient le mieux.

59
wdev

J'utilise un gif transparent 1x1 (appelé spacer) pour le src. puis définissez l'image d'arrière-plan de cette balise img avec la position bg correspondante. de cette façon, vous utilisez la vitesse des sprites et conservez la sémantique de votre code (vous pouvez toujours utiliser l'attribut alt)

7
Faisal Debouni

Je pourrais toujours utiliser un SPAN ou une autre balise et définir l'arrière-plan/la largeur/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 qui disent que vous devez mettre du texte dans un intervalle. Syntaxiquement parlant, modifier l'arrière-plan d'un élément serait la façon la plus "correcte" de le faire.

Voici la référence sur les balises img sur 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.

Ces éléments définissent le contenu comme étant en ligne (SPAN) ou au niveau du bloc (DIV) mais n'imposent aucun autre idiome de présentation au contenu. Ainsi, les auteurs peuvent utiliser ces éléments conjointement avec des feuilles de style, l'attribut lang, etc., pour adapter HTML à leurs propres besoins et goûts.

5
Richard Key

Vous pouvez utiliser des arrière-plans CSS ou des éléments HTML Canvas pour dessiner de manière dynamique. Avec les canvas, vous avez la possibilité de sous-définir facilement des images et d'effectuer effets de mode de fusion .

3
Phrogz

Vous résolvez cela en repensant vos options.

Vous créez une zone définie avec un <a> avec display:block; ou <div> et utilise overflow hidden; pour masquer le débordement et position:relative;.

Ensuite, vous placez votre <img> image Sprite à l'intérieur absolument positionné, ce qui est possible puisque vous avez positionné le parent.

Utilisez ensuite :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 Sprite Facebook avec deux versions de l'icône l'une sur l'autre, chacune de 50 px par 50 px, la hauteur totale de l'image étant de 100 px:

<!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>
1
Paul