Что-то не так с ориентацией на атрибут alt в css?

11

Я попытался нацелить атрибут alt в css. Мое решение работало в Firefox / Mozilla, но не работает в Safari-Chrome / Webkit. Что-то не так с стилизацией тега alt? Если нет, как вы думаете, я устраняю неполадки для Webkit.

Вот пример:

CSS

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

HTML

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

5

Я попробовал это, и это прекрасно работает для меня. Обратите внимание , что colorи font-sizeсвойства не будет иметь никакого эффекта в Chrome, так как не получает отображается никакого текста. (Firefox отображает альтернативный текст, если изображение не может быть найдено.) Использование свойства width, например, показывает, что оно работает нормально. Я опубликую свой код ниже для вас, чтобы увидеть.

Однако, к вашему первоначальному вопросу, ориентация на то, что по сути является полем «свободного текста» в CSS, может привести к неудаче. Очень легко изменить атрибут alt, не думая о последствиях в CSS (в отличие от изменения имени класса, где это должно быть очевидно).

Кроме того, поскольку вы уже нацеливаетесь на идентификатор, вам нужно использовать только этот селектор - идентификатор можно использовать только один раз на страницу.

<!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
источник

Хорошее замечание об использовании свободного текста как части вашего селектора CSS.

— Lèse Majesté

1

Взгляните на новые атрибуты данных в html5, возможно, это именно то, что вам нужно.

— Томас

2

Поскольку селектор атрибута определен в спецификации CSS W3C, вы можете использовать его. Но реализации браузеров различаются и являются более или менее надежными.

Как вы можете видеть в справочнике SitePoint по поддержке селектора атрибутов CSS , поддержка Webkit содержит ошибки. Вы также можете заметить, что поддержка селектора атрибутов css в IE варьируется от одной версии к другой.

Таким образом, этот селектор поддерживается не всеми браузерами.

В качестве более надежного способа вы должны использовать селектор идентификаторов, который поддерживается всеми браузерами:

#logo {color: # 999; размер шрифта: 2em; }

— Матье ФОР
источник

1

После некоторого тестирования кажется, что браузеры с поддержкой webkit не поддерживают стилизацию текста атрибута alt. Таким образом, ваши наблюдения кажутся правильными и неизбежными.

— Джон Конде
источник

У вас есть пример, потому что он работал нормально для меня.

— Рассерженная шлюха

Это сработало у вас в Chrome?

— Джон Конде

Да, применение стилей с помощью селектора атрибутов работало нормально. Chrome не отображает альтернативный текст для изображений ни при каких условиях AFAIK, поэтому нет ничего, чтобы стилизовать текст.

— Рассерженная шлюха

@Goat: Если я могу называть вас козел .., я думал , когда я проверил это прошлой ночью , что Chrome сделал отображать альтернативный текст , когда стили не были применены к изображению. Мне придется снова поиграть с ним после работы и посмотреть, хорошо ли у меня работает память.

— Джон Конде

Я просто собираюсь представить это там, но это может быть проблемой с космическим персонажем, который у вас там ...

— Gup3rSuR4c

0

Селектор CSS выбирает тег, таким образом влияет на способ отображения тега. Уверен, если вы выключите свои изображения и посмотрите на альтернативный текст, отображаемый в этом месте, он появится так, как написано в вашем CSS.

Возможно, вы захотите открыть ошибку для проекта webkit, чтобы они могли это исправить - если они чувствуют, что поведение firefox - то, что они хотят делать там.

— Евгений
источник

Селектор атрибута - это CSS2, а не CSS3.

— Рассерженная шлюха

Вы правы, удалили тупой ответ, который я сделал ранее ...

— Евгений