web-dev-qa-db-fra.com

Y a-t-il un problème avec le ciblage de l'attribut alt dans css?

J'ai essayé de cibler l'attribut alt en css. Ma solution fonctionnait sous Firefox/Mozilla, mais échouait dans Safari-Chrome/Webkit. Y a-t-il un problème avec le style d'une balise alt? Sinon, comment supposez-vous que je dépanne Webkit?.

Voici un exemple:

CSS

img#logo[alt="Site Title"] { color: #999; font-size: 2em; }

HTML

<img id="logo" src="" alt="Site Title" width="" height="" />
csshtmlfirefoxgoogle-chromesafari
11
Ben Ackles

Je l'ai essayé et cela fonctionne parfaitement pour moi. Notez que les propriétés color et font-size n'auront aucun effet dans Chrome, car aucun texte ne sera affiché. (Firefox affiche le texte alternatif si l'image est introuvable.) L'utilisation de la propriété width, par exemple, indique qu'elle fonctionne correctement. Je posterai mon code ci-dessous pour que vous puissiez le voir.

Cependant, à votre question initiale, cibler ce qui est essentiellement un champ "texte libre" en CSS est sujet à des problèmes. Il est très facile de changer un attribut alt sans penser aux répercussions en CSS (au lieu de changer un nom de classe là où il devrait être évident).

De plus, puisque vous ciblez déjà un identifiant, vous ne devez utiliser que ce sélecteur - un identifiant ne peut être utilisé qu'une fois par page.

<!DOCTYPE html>
<html>
<head>
  <style>img#logo[alt="Site Title"] { width:200px }</style>
</head>
<body>
  <img alt="Site Title" src="bullet.png" id="logo" />
</body>
</html>
5
DisgruntledGoat

Le sélecteur d'attribut étant défini dans la spécification CSS du W3C, vous devriez pouvoir l'utiliser. Mais les implémentations des navigateurs varient et sont plus ou moins fiables.

Comme vous pouvez le voir sur prise en charge de la référence par SitePoint pour le sélecteur d'attribut CSS , la prise en charge de Webkit est erronée. Vous pouvez également constater que la prise en charge du sélecteur d'attribut css d'IE varie d'une version à l'autre.

Ainsi, ce sélecteur n'est pas encore supporté par tous les navigateurs.

Comme moyen plus fiable, vous devriez utiliser le sélecteur d’identité, qui est supporté par tous les navigateurs:

#logo {color: # 999; taille de police: 2em; }

2
Matthieu FAURE

Après quelques tests, il ne semble pas que les navigateurs Webkit prennent en charge le style du texte de l'attribut alt. Vos observations semblent donc correctes et inévitables.

1
John Conde

Le sélecteur CSS sélectionne la balise, ce qui affecte la façon dont la balise est affichée. Je suis sûr que si vous désactivez vos images et regardez le texte alternatif affiché à cet endroit, il apparaît tel qu’il est écrit dans votre css.

Vous voudrez peut-être ouvrir un bogue pour le projet webkit afin qu'ils le corrigent - s'ils estiment que le comportement de firefox est ce qu'ils veulent faire ici.

0
Evgeny