Images off/CSS on Image Replacement
I recently read Dan Cederholm’s book, Web Standards Solutions, and was surprised to find that, apart from a couple of obscure inline text tags, I already knew absolutely everything he had to say.
That is not to say that it was a waste of money; I’m sure that I’ll continue to go back to it as a quick reference point, but to be honest I was hoping that it might provide just a little more in the way of ground-breaking techniques and insights, rather than a rehash of his SimpleQuiz series and ALA articles.
One of the areas that the book covers in detail is the subject of CSS image replacement. Dan explains the three key developments in this area – Fahrner Image Replacement, the Leahy/Langridge method, and the Phark method – and summarises the pros and cons of each.
The drawback to all methods is the fact that any user surfing with images turned off but CSS turned on will have the benefit of CSS-image-replacement trickery, but will never see the images! Dan concludes the chapter by saying that he is sure that further developments will continue to be made and this hurdle will eventually be overcome.
An impossible task?
I’ve spent a little time today looking into the possibilities of accomplishing this; I started by asking myself some basic questions:
Can a CSS file perform any detection, maybe to see whether images are turned on or off?
No – unless the CSS file was being parsed as HTML or a server-side technology like PHP or ASP.
Can we use a server-side technology to detect whether images are on or off?
Unfortunately not – while it is possible to kludge a check for Javascript, by setting a cookie using Javascript and then trying to read it using PHP/ASP (if Javascript is off, no cookie), the very nature of server-side scripting means that the server-side code is blissfully unaware of the browser’s settings.
So we can use Javascript to do the detection?
Absolutely, yes. A simple check for the document.images array will tell us whether the browser has switched images off. But what if they’ve turned Javascript off too?
A (sort of) solution
So if we are happy to use Javascript to do our detection, we can happily only serve image replacement CSS to browsers that are showing images. The easiest way to do this would be to separate out all the image replacement code into its own file:
<link rel="stylesheet" media="all"
href="all_styles.css" />
<script type="text/javascript">
if (document.images) {
document.write ("<link rel=\"stylesheet\"
href=\"image_replacement.css\" />");
}
</script>
Browsers with Javascript switched off will get the unstyled headers, as will those with images turned off.
To really assess the worth of this way of dynamically delivering content, we would need to know the proportion of web users that surf with Javascript off and/or images off – obviously the concern is that if there are a large number that switch off Javascript for security reasons but leave images on (which seems like a fairly likely scenario), they will be disadvantaged by not being shown the CSS-styled header images.
UPDATE: Despite reading elsewhere that the document.images array was a reliable way to test whether the browser had images turned off, I now can’t replicate this test. An alternative would be to use Peter Paul Koch’s image test code:
var test = new Image(); var tmp = new Date(); var suffix = tmp.getTime(); test.src = 'test.gif?'+suffix; test.onload = loadStyles();
The loadStyles function would contain the document.write line above.
Filed under: CSS, Accessibility.
Bookmark this article with del.icio.us
Previously: Implementing an RSS hit counter
Next: What I should be doing