it-swarm.com.de

Ist irgendetwas falsch daran, das ALT-Attribut in CSS anzuvisieren?

Ich habe versucht, das alt-Attribut in CSS als Ziel festzulegen. Meine Lösung hat in Firefox/Mozilla funktioniert, schlägt jedoch in Safari-Chrome/Webkit fehl. Stimmt etwas nicht mit dem Stylen eines Alt-Tags? Wenn nicht, wie gehe ich dann bei Webkit vor?.

Hier ist ein Beispiel:

CSS

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

HTML

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

Ich habe es versucht und es funktioniert perfekt für mich. Beachten Sie, dass die Eigenschaften color und font-size in Chrome keine Auswirkungen haben, da kein Text angezeigt wird. (Firefox zeigt den Alternativtext an, wenn das Bild nicht gefunden werden kann.) Wenn Sie beispielsweise die width -Eigenschaft verwenden, zeigt dies, dass es einwandfrei funktioniert. Ich werde meinen Code unten posten, damit Sie ihn sehen können.

Bei Ihrer ursprünglichen Frage kann es jedoch zu einem Missgeschick kommen, wenn Sie auf ein Feld abzielen, bei dem es sich im Wesentlichen um ein "Freitext" -Feld in CSS handelt. Es ist sehr einfach, ein alt-Attribut zu ändern, ohne Rückwirkungen auf CSS zu berücksichtigen (im Gegensatz zum Ändern eines Klassennamens, bei dem dies offensichtlich sein sollte).

Da Sie bereits eine ID als Ziel festlegen, müssen Sie nur diesen Selektor verwenden. Eine ID kann nur einmal pro Seite verwendet werden.


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

Da der Attributselektor in der W3C-CSS-Spezifikation definiert ist, sollten Sie ihn verwenden können. Die Browser-Implementierungen variieren jedoch und sind mehr oder weniger zuverlässig.

Wie Sie auf SitePoint Reference-Unterstützung für CSS-Attributauswahl sehen können, ist die Unterstützung von Webkit fehlerhaft. Sie können auch sehen, dass nterstützung für die CSS-Attributauswahl im IE von einer Version zur anderen variiert.

Daher wird dieser Selektor noch nicht von allen Browsern unterstützt.

Aus Gründen der Zuverlässigkeit sollten Sie den ID-Selektor verwenden, der von allen Browsern unterstützt wird:

#logo {color: # 999; Schriftgröße: 2em; }

2
Matthieu FAURE

Nach einigen Tests scheint es nicht so zu sein, als ob Webkit-basierte Browser das Stylen des alt-Attributtexts unterstützen. Ihre Beobachtungen scheinen also richtig und unvermeidlich zu sein.

1
John Conde

Der CSS-Selektor wählt das Tag aus und beeinflusst somit die Art und Weise, wie das Tag angezeigt wird. Ziemlich sicher, wenn Sie Ihre Bilder ausschalten und sich den alternativen Text ansehen, der an dieser Stelle angezeigt wird, wird angezeigt, wie er in Ihrem CSS geschrieben ist.

Möglicherweise möchten Sie einen Fehler für das Webkit-Projekt öffnen, damit sie ihn beheben können - wenn sie der Meinung sind, dass das Verhalten von Firefox das ist, was sie dort tun möchten.

0
Evgeny