Hey, I’ve got a website that uses a graphical button at present. It makes a lot more sense to make it a CSS3 border radius, but then obviously the fallback that people always suggest would leave a square button. Is there a way to have the old graphical button as a fallback, but have it ignored if it’s using border radius?
Again I come to a question of should I be using separate stylesheets for each browser? It seems to me that I could copy and paste to another stylesheet and put simple conditional comments in the HTML to decide which to use. That seems better than using a general stylesheet and a couple of others for IE fixes, or than adding loads of extra coding to try and hack a CSS fix for IE. I’m trying to reduce my load times, and I think that I’m going to reduce server calls, but if it’s only loading one CSS file either way it shouldn’t be a huge problem.
Am I way off with this idea? It seems to be more common to use a hack, or an extra CSS file just for IE fixes?
You can serve up the graphic via CSS alone, and you could offer that to older versions of IE via CCs (and thus another style sheet) or via CSS hacks that just old versions of IE read (though I’m not sure if these exist for IE8). CCs are known to slow down the loading of IE (all other downloading stops while the CC file is being loaded) but it’s not a biggie, really.
Coolio, thanks for the input guys. I think I’ll leave it as a graphical button for now - it’s tiny and hardly worth the effort, but I will be making a concerted effort to ensure that my site loads quicker, so I will consider these ideas in the grand scheme. Cheers
Though if all you’re doing is rounded corners, I’m at the point of “Oh noes, IE doesn’t get rounded corners – WHATEVER” in that regard. If it’s more complex an appearance than that - CSS3 usually can’t do it anyways.
Basically, we’re talking the worst of the “lets throw extra code at something to do it both ways when one way works everywhere” lunacy. Especially if this is just a simple button, in which case by the time you get it into a optimized file it should likely be smaller than the code you’d use to do both CSS3 and Images.
I wouldn’t consider rounded corners on a button a vital feature in regards to the original design integrity. Therefore, I would merely scrap the image and use CSS for the rounded corners. If the client looks at it in IE and complains use css3 pie. Otherwise, leave it be to not apply the corners in IE, big deal.
Which I don’t recommend using on websites either… particularly for CSS. You can’t make a single stylesheet (per media type) that results in a page that’s functional all the way back to IE 5.5 and near identical in all modern browsers, there’s something fundamentally wrong with either the design or the methodology used to build the design.
But then I’d rather send the five or six lines of CSS needed for legacy IE support on a layout once in the CSS where it can be cached, than to send three lines on every page-load in the markup.
99% of the time people use IE CC’s it’s more of a crutch for failing to understand how to build a layout and a total waste of bandwidth. Networking 101 – a larger file that’s cached is faster than a small file that isn’t… and when they both end up about the same size? /FAIL/.