Ist etwas falsch daran, das alt-Attribut in CSS anzuvisieren?

11

Ich habe versucht, das alt-Attribut in CSS anzuvisieren. Meine Lösung funktionierte in Firefox / Mozilla, schlägt jedoch in Safari-Chrome / Webkit fehl. Ist etwas falsch daran, ein Alt-Tag zu stylen? Wenn nicht, wie kann ich das Webkit beheben?

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="" />

5

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

Bei Ihrer ursprünglichen Frage kann es jedoch zu Missgeschicken kommen, wenn Sie in CSS auf ein Feld mit "freiem Text" abzielen. Es ist sehr einfach, ein alt-Attribut zu ändern, ohne über die Auswirkungen in CSS nachzudenken (im Gegensatz zum Ändern eines Klassennamens, wenn dies offensichtlich sein sollte).

Da Sie bereits auf eine ID abzielen, müssen Sie diesen Selektor nur 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>

— DisgruntledGoat
quelle

Ein guter Punkt für die Verwendung von Freitext als Teil Ihrer CSS-Auswahl.

— Lèse Majesté

1

Werfen Sie einen Blick auf die neuen Datenattribute in HTML5, die möglicherweise genau das sind, was Sie brauchen.

— Thomas

2

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

Wie Sie in der SitePoint-Referenzunterstützung für die CSS-Attributauswahl sehen können , ist die Unterstützung von Webkit fehlerhaft . Sie können auch feststellen, dass die Unterstützung für die CSS-Attributauswahl im IE von Version zu Version unterschiedlich ist.

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

Um zuverlässiger zu sein, sollten Sie den ID-Selektor verwenden, der von allen Browsern unterstützt wird:

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

— Matthieu FAURE
quelle

1

Nach einigen Tests scheint es nicht so zu sein, dass Browser mit Webkit-Unterstützung das Stylen des alt-Attributtextes unterstützen. Ihre Beobachtungen scheinen also richtig und unvermeidlich zu sein.

— John Conde
quelle

Haben Sie ein Beispiel, weil es für mich gut funktioniert hat.

— DisgruntledGoat

Es hat bei Ihnen in Chrome funktioniert?

— John Conde

Ja, das Anwenden von Stilen mithilfe der Attributauswahl hat einwandfrei funktioniert. Chrome zeigt den Alternativtext für Bilder unter keinen Umständen AFAIK an, daher gibt es nichts, was Sie textlich stylen könnten.

— DisgruntledGoat

@Goat: Wenn ich anrufen kann man .. Ziege, dachte ich , als ich das gestern Abend getestet , dass Chrome hat den Alt - Text angezeigt wird, wenn keine Stile auf das Bild angewendet wurden. Ich muss nach der Arbeit wieder damit spielen und sehen, ob mein Gedächtnis gut ist.

— John Conde

Ich werde das hier nur veröffentlichen, aber es könnte ein Problem mit dem Leerzeichen sein, das Sie dort haben ...

— Gup3rSuR4c

0

Der CSS-Selektor wählt das Tag aus und wirkt sich somit auf die Art und Weise aus, 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 er so 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.

— Evgeny
quelle

Der Attributselektor ist CSS2, nicht CSS3.

— DisgruntledGoat

Sie haben Recht, entfernt die dumme Antwort, die ich zuvor getan habe ...

— Evgeny