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="" />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>
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:
la source
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.
la source
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.
la source