If you’re like me, you’ve tried every IR trick out there and have found that each “solution” has it’s own set of problems that make it far from a perfect solution.
However, thanks to a smart dude called Paul Young, there may just be a real answer to this problem of image replacement. Paul has developed a JavaScript solution code-named “State Scope” that basically checks your browser’s capability to serve up an image that gets created by the script at run-time. If your browser can handle images and they are enabled, the script appends a class (images-on) to the <html> element of the document. If images are disabled, or, the viewing device does not support JavaScript, the <html> element is left as-is.
Why is this such a good thing? Because now, you can serve up two sets of CSS rules – one set for users who have images enabled (images-on) and another set for users who do not have images, or have no JavaScript support.
I recently used this solution for a simple Web site project and was pleased with the results. When I disabled images within my browser, I was able to see the site with the alternate styling that I had created. No longer did I see big empty gaps where images were supposed to be (using Rundle’s Text-Indent Method).
