Definitive Solution to Image Replacement
Has the Definitive Solution to Image Replacement finally been found? That still remains to be seen, but either way Anatoly Papirovsky has come up with an image replacement method that solves the images off, CSS on problem. Oh, it doesn’t use any extra markup either.
- Previous post: Going to @media 2005?
- Next post: Safari 1.3
Information, sponsorship, and externals
About the author
Roger Johansson is a Swedish web professional specialising in web standards, accessibility, and usability. More about me and this site.
Latest articles
- Validation statistics from Nikita the Spider Comments off
- An analysis of the sites crawled by the bulk validation tool Nikita the Spider during March 2008.
- Authentic Jobs API and Affiliates program Comments off
- The Authentic Jobs job listing service now has a public API and an affiliate program.
- What does Acid3 mean to you and me? Comments off
- Opera and Apple have announced that their web browsers pass the Acid3 Browser Test, but how will that help web designers and developers?
- Designing Web Navigation (Book review) Comments off
- Learn the fundamentals of navigation design and design better navigation systems for large and small sites as well as for web based applications.
- DOMAssistant bundle for TextMate Comments off
- To save keystrokes and speed up development I have created a DOMAssistant bundle for TextMate.
- First impressions of Internet Explorer 8 Beta 1 Comments off
- My impressions after trying out Internet Explorer 8 Beta 1 for a couple of days.
Comments
More like definitive advertisment for Holzschlag/Shea!
That's the "current topic" image, and since I'm reading it now there's the book... before there was some other stuff, and when I have something new interesting going on it will go there.. :-/ Man, I don't even have my amazon associate number in there, I just like the book...
Ah, whatever... go read the solution, instead of pointless rant... and be brave enough to post it on there, not here where I can't hear you. Tsk.
You misconstrued my tone Anatoly. Not a rant, just a joke on my part. I am a comedian you know.
Ah, sorry about that... :D
And what of invalid CSS? I think a lot of problems could be solved using expressions in our CSS, not just IR. Interested to hear what other folks thoughts are on using expressions in CSS.
So it's invalid, and...? :) When browsers don't obey rules we have to somehow make-up for it... so we do invalid code which on the other hand works and improves user experience, and accessibility. No user will care about valid CSS, but they will care abou the fact that they can browse with images off, CSS on (and you will care about not using extra span, or at least I do).
Maybe that's just me though... :)
Justin (#5), expressions are useful to work around some of the more glaring errors in that particular browser, just as using CSS3 selectors can be used to work around some problems in other browsers. The advantage of using expressions coupled with conditional comments is that they can be filtered out to one particular browser version. Playing with advanced selectors is definitively forward compatible. I know a few sites that will break once Firefox is released.
I'm just not sure about mixing scripting with CSS. It doesn't exactly follow the standards-based methodology, to say the least. I didn't spend all this time learning proper markup and CSS, only to hack it with evalutation expressions.
Like I said, I'm more interested in hearing what some of the CSS gurus have to say about methods such as this, if anything.
On another note, from following the discussion at your site Anatoly, I found another cool image replacement technique that looks promising (at least at first glance), the BIR.
Justin: Eh, what's with all people wanting the guru's say on this? :D Like the people who come up with this are dumb or something... I guess I wouldn't be saying it's good if it wasn't. It takes some amount of skill to come up with this, you know... It's not like it's some child's play.
I'm not sure what is a standards-based methodology, but I'm sure it is FOR accessible sites with good semantics and clean code. This expression helps to achieve it. Don't see the problem.
In fact, we should rather start using expressions to achieve things we can't achieve using CSS (in IE that is), so we can unveil full potential of CSS for the standards based browsers without limiting users on the crappy browser.
I shall reiterate once more. Validation of CSS is a tool, no real guideline.
Wow, lots of action here.
Just to state my position on the use of expressions: if you can, avoid them. If you can't, put the rules that use them in a separate CSS file and use conditional comments to make sure only IE/Win sees it.
Another similar solution can be found here.
Matthew: Yep. It has already been discussed (via e-mail, and on fecklessmind) both solutions, are almost the same... Except for the hacking in Jason's version which I don't like [and which will eventually cause failure of the technique later on]. Plus you should use the reversed expression from my example since the Jason's manages to create two spans...
(I came up with technique without ever seeing Jason's...)
Ok... cute... So, imagine if I want to use image-replacement for menu itens and for the H2 or H3 (as content categories). It is a lot of code, isn't? How can this version be more flexible, extensible for other elements? []s
That's a great point Roger and exactly the approach that should be taken.
This method doesn't sit well with me mostly because it supports proprietary conventions. It bothers me when a big company decides to invent their own rules to follow when it cannot even adhere to the already published specifications.
If one uses expressions in their CSS, why stop there? Why not also use the filter rule to achieve transparency in IE since Microsoft couldn't figure out the PNG thing?
Rob Mientjes, yes and HTML 4, XHTML, CSS 1 & 2 are all recommendations. Why do we force ourselves to adhere to such recommendations?
Simone: A lot of code? No.. :) Look at "Working with DIR" on fecklessmind.com ;) It's actually pretty simple.. and as I said many times, expression has to be there only once. Plus if you don't want to define different font-size for each heading (you could stick with 0.9em I guess or even less) then you could have very small code.
Definitely not by "DIR". No, of course not.
Jens: Have something better in mind? Please, do show me... Or do you really believe something better can be achieved which would work in that many browsers? Oh, please, show me, show me... or at least tell me... ;)
IMO, a large outdent is currently the most efficient way - it works almost everywhere with the least code you need to add.
Yeah, sIFR. Like what you're using on your site Anatoly. Don't take that as the smart-ass comment it sounds like, I couldn't resist it once I looked at your source and found the sIFR calls. Irony at it's finest ;)
Justin: Heh? You know sometimes you don't just need the typography, sometimes you need much more. I never inteded to replace sIFR, I consider image replacement a technique that should be used on menus or headers or stuff that cannot be done with sIFR. Heh.
Sure, I was just giving you a bad time because it doesn't look you're using your DIR solution. sIFR can be so much more than it is right now, Nidahas is a site that is pushing the limit a little bit (sIFR menus, including hover states).
Justin: Look at the logo... that's DIR. :) (I'm not crazy enough to use it for every article heading, really)
Justin: BTW sure, use sIFR everywhere if you don't care about users with slowlier computers... Too much Flash causes the site to slowdown terribly and no, sIFR is not the choice for static text which never changes... that is simply, umm, crazy. Using sIFR for menus is absurd and a very bad practice...
I don't see how sIFR in a menu is any different than sIFR in an LI, but you're entitled to your opinion.
What happens when you alter the menu (add/remove/edit a menu item)? You have to create a new image and probably alter your CSS (if you added/removed an item). Do you like doing that?
Sorry, comments are closed for this post.