Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

I tried targeting the the alt attribute in css. My solution worked in Firefox/Mozilla, but fails in Safari-Chrome/Webkit. Is there anything wrong with styling an alt tag? If not, how do you suppose I troubleshoot for Webkit.

Here's an example:

CSS

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

HTML

<img id="logo" src="" alt="Site Title" width="" height="" />
share|improve this question

4 Answers 4

I tried it and it works perfectly for me. Note that the color and font-size properties won't have any effect in Chrome, since no text gets displayed. (Firefox displays the alt text if the image cannot be found.) Using the width property, for example, shows that it works fine. I'll post my code below for you to see.

However, to your original question, targeting what is essentially a "free text" field in CSS is prone to mishap. It's very easy to change an alt attribute without thinking about repercussions in CSS (as opposed to changing a class name where it should be obvious).

Furthermore, since you are already targeting an ID you only need to use that selector - an ID can only be used once per page.


<!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>
share|improve this answer
    
Good point about using free text as part of your CSS selector. –  Lèse majesté Oct 26 '10 at 11:17
1  
Take a look at the new data- attributes in html5, might be just the thing you need. –  Thomas Oct 26 '10 at 11:57

As the attribute selector is defined in the W3C CSS spec, you should be able to use it. But browsers implementations vary, and are more or less reliable.

As you can see on SitePoint Reference support for CSS attribute selector, Webkit's support is buggy. You could also see that IE's css attribute selector support varies from one version to another.

Thus this selector is not supported by all browsers yet.

As a more reliable way, you should use the ID selector, which is supported by all browsers:

#logo { color: #999; font-size: 2em; }

share|improve this answer

After doing some testing it doesn't seem as through webkit powered browsers support styling the alt attribute text. So your observations seem to be correct and unavoidable.

share|improve this answer
    
Do you have an example, because it worked fine for me. –  DisgruntledGoat Oct 26 '10 at 9:28
    
It worked for you in Chrome? –  John Conde Oct 26 '10 at 11:53
    
Yes, applying styles using the attribute selector worked fine. Chrome doesn't display the alt text for images under any circumstances AFAIK, so there is nothing to style text-wise. –  DisgruntledGoat Oct 26 '10 at 16:55
    
@Goat: If I may call you goat.., I thought when I tested this last night that Chrome did display the alt text when no styles were applied to the image. I'll have to play with it again after work and see if my memory is any good. –  John Conde Oct 26 '10 at 17:05
    
I'm just going to put this out there, but it could be an issue with the space character you have in there... –  Alex Oct 26 '10 at 21:43

The CSS selector is selecting the tag, thus affects the way the tag is displayed. Pretty sure if you turn off your images and look at the alternate text displayed in that place is shows up as it is written in your css.

You might want to open a bug for the webkit project for them to fix it - if they feel that the behavior of firefox is what they want to do there.

share|improve this answer
    
The attribute selector is CSS2, not CSS3. –  DisgruntledGoat Oct 26 '10 at 9:27
    
You are right, removed the dumb answer I did previously ... –  Evgeny Oct 26 '10 at 9:47

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.