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

11

J'ai essayé de cibler l'attribut alt dans css. Ma solution a fonctionné dans Firefox / Mozilla, mais échoue dans Safari-Chrome / Webkit. Y a-t-il un problème avec le style d'une balise alt? Sinon, comment pensez-vous que je dépanne pour 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="" />

5

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

Cependant, pour répondre à votre question initiale, cibler ce qui est essentiellement un champ "texte libre" en CSS est sujet à des incidents. Il est très facile de changer un attribut alt sans penser aux répercussions en CSS (par opposition à changer un nom de classe où cela devrait être évident).

De plus, comme vous ciblez déjà un identifiant, vous devez uniquement utiliser ce sélecteur - un identifiant ne peut être utilisé qu'une seule 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>

— Chèvre mécontente
source

Bon point sur l'utilisation de texte libre dans le cadre de votre sélecteur CSS.

— Lèse majesté

1

Jetez un œil aux nouveaux attributs de données en html5, c'est peut-être ce dont vous avez besoin.

— Thomas

2

Comme le sélecteur d'attribut est 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 la prise en charge de référence de SitePoint pour le sélecteur d'attributs CSS , la prise en charge de Webkit est boguée. Vous pouvez également voir 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 pris en charge par tous les navigateurs.

Comme moyen plus fiable, vous devez utiliser le sélecteur d'ID, qui est pris en charge par tous les navigateurs:

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

— Matthieu FAURE
source

1

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

— John Conde
source

Avez-vous un exemple, car cela a bien fonctionné pour moi.

— DisgruntledGoat

Cela a fonctionné pour vous dans Chrome?

— John Conde

Oui, l'application de styles à l'aide du sélecteur d'attributs a bien fonctionné. Chrome n'affiche en aucun cas le texte de remplacement pour les images AFAIK, il n'y a donc rien à styliser au niveau du texte.

— DisgruntledGoat

@Goat: Si je peux vous appeler chèvre .., je pensais que lorsque j'ai testé cette dernière nuit que Chrome a affiché le texte alternatif quand aucun style n'a été appliqué à l'image. Je devrai jouer avec après le travail et voir si ma mémoire est bonne.

— John Conde

Je vais juste mettre cela là-bas, mais cela pourrait être un problème avec le caractère spatial que vous avez là-dedans ...

— Gup3rSuR4c

0

Le sélecteur CSS sélectionne la balise, affecte ainsi 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 pour qu'ils le corrigent - s'ils pensent que le comportement de firefox est ce qu'ils veulent y faire.

— Evgeny
source

Le sélecteur d'attribut est CSS2, pas CSS3.

— DisgruntledGoat

Vous avez raison, supprimé la réponse stupide que j'ai faite précédemment ...

— Evgeny