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.
Check out the following article by Paul Irish about using conditional statements to target IE, there has and always be an ongoing debate whether they serve much purpose performance wise but personally i love them because they don’t require JavaScript to work.
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
I use IE conditionals with http://css3pie.com if I really want rounded corners in IE. Otherwise, I don’t bother with graphical rounded corners anymore.
Honestly, by the time you send the code for each version – you’ve wasted so much effort on programming that you’d probably use less bandwidth by just using the image. This is REALLY true if you use the conditional comment nonsense or worse, the javascript shiv bull or even WORSE, browser sniffing…
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.
Hey don’t knock my sniffer. CC’s are just that - sniffers. That PHP sniffer has it’s place for those tha use IE CC’s. Then you only need one style sheet. That’s something.
That is one huge list of user agents! And that doesn’t even include non-browsers (ie, search engine crawlers), all browsers, or all mobile browsers.
And on top of that, end users can change how their browser is identified (sometimes natively, sometimes with an add-on, and sometimes with registry editing).
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.
Fair enough. Back in the day I tested with browser shots and, as I mentioned, the only browser that sent the wrong ie signature was older versions of Opera.
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/.
