You’ve noted that using CSS gradients means fewer HTTP requests, but isn’t that only the case if you use them instead of images?

For example, in your block of CSS you have a fallback image, gradient.png – won’t all browsers still load this file regardless of whether they support CSS gradients or not, in which case those that do just won’t use it?

Thanks for all your work, only just discovered the blog but looks like it’ll be a great resource

Ryan

Placing text in the title attribute is no guarantee that it will be read by screen-readers either. However, Filament Group’s research indicates that some screen-readers do actually read CSS generated content: http://filamentgroup.com/lab/dingbat_webfonts_accessibility_issues/.

The article about pseudo-elements on CSS Tricks was influenced by an article I wrote which, if you haven’t read it, I hope might give you some more ideas for experiments using pseudo-elements – http://j.mp/d6UMOd. Please ping me on twitter if you publish any more pseudo-element stuff!

One is the double tooltip on browsers that can show it.
The other is Internet Explorer 7, where your users will see something that looks broken, unfortunately.

@frequency decoder – I was actually reading about the data-attribute this weekend, definately looks like the most viable alternative to overcoming the tooltip and alt text.

There’s no way to stop the browser’s default tooltip from appearing I’m afraid (without resorting to JS but this removes all notion of accessibility).

I toyed with using a custom data- attribute to hold the tooltip text but again, this just makes the tooltips 100% un-accessible (as screen readers are not supposed to read generated content) if the title attribute isn’t added to the markup.

Quick custom data- attribute demo: http://www.frequency-decoder.com/demo/css-tooltips/

…and inevitable blah, blah: http://www.frequency-decoder.com/2010/06/21/css-tooltips-using-generated-content-and-html5-data-attributes/

Another excellent example. I’ve been doing this for a little while on various projects. Removing the ‘double’ tooltip isn’t natively possible as it’s a browser function that can’t be changed, from what I understand. (much smarter men than me with beards have informed me so)

However, you can (if you wanted to) use a non-valid and totally-made-up attribute for this purpose – i.e.

Awful hack

and then alter the CSS to:

content: attr(tip);

This is pretty bloody awful for accessibility, completely invalid and overall makes me feel dirty, so I don’t use it. However, some people may find it useful.

I think JavaScript tooltips are fine for now. Sure it’s style but it’s also interactivity which is fine for now.