Чи є щось погано в націленні на атрибут 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 виводить текст alt, якщо зображення неможливо знайти.) Використовуючи властивість 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>

— Невдоволений козак
джерело

Хороший момент щодо використання вільного тексту як частини вашого CSS-селектора.

— Lèse majesté

1

Подивіться на нові атрибути даних у html5, можливо, саме те, що вам потрібно.

— Томас

2

Оскільки селектор атрибутів визначений у специфікації CSS W3C, ви зможете ним користуватися. Але реалізація браузерів відрізняється і є більш-менш надійною.

Як ви бачите на підтримці SitePoint Reference для вибору атрибутів CSS , підтримка Webkit є помилковою. Ви також можете бачити, що підтримка селектора атрибутів css IE змінюється в залежності від версії.

Таким чином, цей селектор ще не підтримується всіма браузерами.

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

#logo {колір: # 999; розмір шрифту: 2em; }

— Матьє ФЕУР
джерело

1

Зробивши тестування, схоже, що через веб-браузери браузери не підтримують стиль тексту атрибутів alt. Тож ваші спостереження здаються правильними та неминучими.

— Джон Конде
джерело

Чи є у вас приклад, бо він справно працював для мене.

— НезадоволенняГота

Це працювало для вас у Chrome?

— Джон Конде

Так, застосування стилів за допомогою селектора атрибутів спрацювало чудово. Chrome не відображає альт-тексту для зображень ні за яких обставин AFAIK, тому немає нічого стильного для тексту.

— НезадоволенняГота

@Goat: Якщо я можу називати вас козел .., я думав , коли я перевірив це минулої ночі , що Chrome зробив відображати альтернативний текст , коли стилі не були застосовані до зображення. Мені доведеться ще раз пограти з нею після роботи і побачити, чи добре пам’ять моя.

— Джон Конде

Я просто збираюся викласти це там, але це може бути проблемою з космічним символом, який у вас там ...

— Gup3rSuR4c

0

Селектор CSS вибирає тег, таким чином впливає на спосіб відображення тегу. Досить впевнений, що якщо ви вимкніть свої зображення та подивіться на текст, що відображається в цьому місці, відображається так, як це написано у вашому css.

Ви можете відкрити помилку для проекту webkit, щоб виправити це - якщо вони вважають, що поведінка Firefox - це те, що вони хочуть там зробити.

— Євгеній
джерело

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

— НезадоволенняГота

Ви маєте рацію, зняли тупу відповідь, яку я робив раніше ...

— Євгеній