Нагрята борса, както свидетелства изпълнителният директор на инвестиционната банка, протест

Опитах да насочвам атрибута alt в css. Моето решение работи във Firefox / Mozilla, но не успява в Safari-Chrome / Webkit. Има ли нещо лошо в оформянето на alt тагове? Ако не, как предполагате, че отстранявам неизправности за Webkit.

Ето пример:

CSS

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

HTML

 

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

Въпреки това, към вашия първоначален въпрос, насочването към това, което по същество е поле с "свободен текст" в CSS, е склонно да се повреди. Много е лесно да промените атрибут alt, без да мислите за последиците в CSS (за разлика от промяната на името на класа, където трябва да е очевидно).

Освен това, тъй като вече насочвате идентификатор, трябва да използвате само този селектор - идентификатор може да се използва само веднъж на страница.


<!DOCTYPE html> <html> <head> <style>img#logo[alt='Site Title'] { width:200px }</style> </head> <body>  </body> </html> 
  • Добър момент за използването на свободен текст като част от вашия CSS селектор.
  • 1 Разгледайте новите атрибути на данни в html5, може да е точно това, от което се нуждаете.

Тъй като селекторът на атрибути е дефиниран в спецификациите на W3C CSS, трябва да можете да го използвате. Но изпълнението на браузърите варира и е повече или по-малко надеждно.

Както можете да видите в справочната поддръжка на SitePoint за CSS селектор на атрибути, поддръжката на Webkit е бъги. Можете също така да забележите, че поддръжката на селектора на атрибути на css на IE варира в различните версии.

По този начин този селектор все още не се поддържа от всички браузъри.

Като по-надежден начин трябва да използвате селектора за идентификация, който се поддържа от всички браузъри:

#logo {цвят: # 999; размер на шрифта: 2em; }

След извършване на някои тестове изглежда, че браузърите, поддържани от webkit, не поддържат стил на текста на атрибута alt. Така че вашите наблюдения изглеждат правилни и неизбежни.

  • Имате ли пример, защото ми се получи добре.
  • Работи ли за вас в Chrome?
  • Да, прилагането на стилове с помощта на селектора на атрибути работи добре. Chrome не показва алтернативен текст за изображения при никакви обстоятелства AFAIK, така че няма какво да оформя текстово.
  • @Goat: Ако мога да те нарека коза .., помислих си, когато тествах това снощи, че Chrome Направих показва алтернативен текст, когато към изображението не са приложени стилове. Ще трябва да си играя с него след работа и да видя дали паметта ми е добра.
  • Просто ще пусна това там, но то бих могъл бъдете проблем с пространствения знак, който имате там ...

CSS селекторът избира маркера, като по този начин влияе върху начина на показване на маркера. Почти сигурен, че ако изключите изображенията си и погледнете алтернативния текст, показан на това място, се показва, както е записан във вашия css.

Може да искате да отворите грешка за проекта webkit, за да ги поправят - ако смятат, че поведението на firefox е това, което искат да направят там.

  • Селекторът на атрибути е CSS2, а не CSS3.
  • Прав си, премахнах тъпия отговор, който направих преди ...

е работил за вас: Charles Robertson | Искате ли да се свържете с нас?