Fixed width round/border/shadow corner: CSS3/PIE.htc vs images?

Whats up?!

Fixed width round/border/shadow corner: CSS3/PIE.htc vs images? I am currently recoding my whole site from a badly nested table mess into CSS/divs. I am torn as to which route to take and can’t move forward until I make my decision. I’m hoping you all can help me make up my mind? What would you do? This particular site is my pride and joy and my soul bread winner. So it has to be perfect and completely cross browser. Thank you in advance for your opinions!

The only use of round/border/shadow corners is on a fixed width container sitting on a solid background. My list of pros and cons are as follows… Pros of using images to make the rounded/bordered/shadowed corners are cross browser compatibility. The cons are less than easy to make future updates. Pros of using css3 to do the dirty work are obvious. It’s easy and even easier to make future updates. The cons are a few though which is hampering my decision making ability. -moz-box-shadow slows FX down to the point of killing my nice fade-in/fade-out js based photo gallery (though it still works). Although i assume FX 4.0 will fix this issue much like webkit recently did. IE6 gets a error message (because of PIE). Somehow i still get 13% of my sites visitors using IE6 so I cant just ignore that. I could of course use IE CC’s to shun PEI from IE6 but I don’t really want to pollute my site with IE CC’s when otherwise unnecessary.

Other considerations… IE9 will support CSS3. So in one years time conceivably 80% or so of users will benifit from the css3 and not be dependent on the PIE.htc. And dammit! I wanted to use CSS3. I simply don’t want to open PS. But at what cost? Am I willing to live with that? I don’t know? Any and all insights welcome…

  1. CSS3 is still draft, you have ZERO business using it in production code for that reason – PERIOD. Same goes for that steaming pile of useless manure known as HTML 5.

  2. Throwing javascript at legacy browsers to implement an ENTIRE specification that didn’t even exist when they were made is NOT the answer either. For one or two cutesy things like hovers, fine – use a HTC… for an entire specification? That’s #DDD terrritory. PIE .htc is a cute toy, but if your page is going to rely on it for functionality you’re shooting your horse in the foot before the gate even opens!

  3. -moz and -webkit prefixes ALSO mean “for testing” and “not for production use” – you want to use them to support a couple things PROPERLY supported in the most recent browser but not in the last version (like say, -moz-inline-box) then fine – you want to use it for an implementation not even out of draft, YOU’RE MISSING THE ENTIRE POINT OF DRAFT!!! It ends up being like people who ***** about bugs in beta releases of software… NO, bugs in a beta? REALLY?!? [i]Who’d have thunk it?!?[i]

  4. As to IE9, it’s release would be all well and good if it wasn’t going to be Vista/7 only… or if IE6 wasn’t the most recent browser available for Windows Mobile users, (typically without full jscript or .htc support working).

Man-up and write the thing in the specifications you are actually supposed to be using right now – the RECOMMENDATIONS, and that means HTML 4.01 STRICT and/or XHTML 1.0 STRICT with CSS 2… and maybe some 2.1 since that’s actually at least properly supported in browsers without the “for testing only” prefixes.

The ONLY bits of CSS3 I would think about using being the properties that have been in IE since version 5.0 like word-break.

Thank you for your opinion. While most if not all of what you say is probably true, I will take it with a grain of salt since most everything you have ever said is negative. But it is good food for thought and I may just very well follow your advice. I’m still 50-50. At this point I could have already coded the whole thing already if I wasn’t thinking on it so much.

I won’t talk about things too much that I’m not positive about I will say this. While border radius is still a work in progress I believe it’s a pretty well established one and safe to use. I also think PIE.htc is a little bit more than a toy. Even if it just a toy it’s the best toy for the job at hand there currently is.

I would give round corners to newer browsers via border-radius and let IE8 and under have square corners. Browsers don’t have to look the same.

Beware of experimental vendor extensions but things like border-radius are here to stay and can be used now if used correctly.

The cons are a few though which is hampering my decision making ability. -moz-box-shadow slows FX down

Yes I believe that is fixed in FF4 although I haven’t tested.

Other considerations… IE9 will support CSS3. So in one years time conceivably 80% or so of users will benifit from the css3 and not be dependent on the PIE.htc.

I’m with Jason on this and I wouldn’t use PIE.htc personally and if you really need those effects in older IE then I would put them in place the old way.

And dammit! I wanted to use CSS3. I simply don’t want to open PS. But at what cost? Am I willing to live with that? I don’t know? Any and all insights welcome…

I don’t see a problem in using CSS3 carefully and for enhancement. Make the site work in all browsers first and then add your embellishments on top. It’s the same approach recommended for mobiles here.

I have doubts that CSS3 will ever be completely finished and therefore you will wait forever if you want it all to be signed off before using. What will and has happened is that the properties that are currently commonly being used will become the standard.

That’s not to say that I like it as I hate it as much as Jason in that if you want to use a single property you have to add 4 or 5 lines of vendor extensions as well! That really irks me and probably the reason that I will try everything else first and rarely use anything except border-radius.

The bottom line is browsers will always be different and we should really look at the fact that designs won’t look the same cross browser is a feature and not a bug.

Just thought you might like an alternative view :slight_smile:

Thank you Paul for your thoughts. It’s much appriciated. My heart says css3. But my perfectionism says got to go with the images. I can’t get over the negatives. And then IE9 only on vista (I forgot that one) is the final straw. 69% of my visitors use IE. So that’s my core audience so that’s the most important. As you said I could just feed IE the images but that seems like more trouble than it’s worth. Off to PS…

… and that really is the deal-breaker in most cases. Do you care about what we MIGHT be able to do SOMEDAY, or what works properly, EVERYWHERE in the here and now?

Usually for simple things like rounded corners or dropshadows I rarely find it to be a whole lot of extra work – but to put that in perspective I say the same thing about IE, which is why most of my pages of the past three years or so work well not just in the latest “flavor of the week” browser, but typically all the way back to IE 5.5

Though that’s where it gets funny – it’s often easier to fix pages to work in 5.5 than it is 6 – a few times I’ve joked it would be simpler to just throw IE into quirks mode as it’s bugs are better documented :smiley:

Here is a good article on global ie6 usage. Not really css3 but it is one of the main arguments for not using css3. My usage says 13%. now if I could somehow confirm that most of that is coming from Asian countries (as the article says) then maybe I could comfortably move forward with css3.

I am with Paul on this. Note that the key here is FUNCTION, not appearance. So if being able to see the content relies on fancy CSS3 … BAD. If it just impoved aesthetics or contrast… GOOD. It even makes sense, in fact… if your site is being viewed in a 2005 browser the design LOOKs… 2005. if it viewed in a totally new browser it LOOKS 2011. in either case the content totally accessible. Makes sense, no?

That does make good sense. I would never rely on css3 (js or similar) for function. This is just astetics. Currently however, my PIE script throws an error in ie6 which is bad. Although the developer is very prompt on targeting bugs so I am hopefull he will fix this one.

Can someone that has a native IE6 please test this for me? I’ve been told the PIE.htc throws an error in IE6 and the developer (and me) would like to fix it. He only needs to know the error line # and the IE6 version #. It would be ever so helpful. Thanks!

Test page http://goo.gl/19Wr1

Let me understand this: you hope to use CSS3 as a standard in a year’s time, but you can’t/won’t use CSS2.1 adjacent sibling selectors “+” right now. Good luck with that.

I’m not even going to waste my breath. But this does give me an opportunity to amend that statement if I hadn’t already. In a years time it will only be maybe 50% seeing css3. As mentioned ie9 is stuck on vista (or 7).

What’s this suppose to mean? You don’t have an opinion or you can’t make an opinion?

It seems to me you’re a pretty bad judge of statements. What if CSS goes as a live standard? Will you support CSS3 still then?

What CSS3 do you hope to use a year from now? Trinky-Drinky rounded corners or serious CSS? 'Cos for Trinky-Drinky you don’t need to wait a whole year :wink:

Aside from JavaScript “CSS” and proprietary implementations, CSS3 is still a promise never fulfilled. Hell, until IE7-8 die, CSS 2.1 is an utopia. So what are you wasting your breath on? Buzz words? Trends?

Because of IE6 alone, there were 10yrs at least for a perfectly valid and quasi non existent CSS 2.1 (let me remind you again about serious CSS stuff, like the “+” selector). What do you hope CSS3 will change? Bring back the JavaScript for everything so that you may fool your self: “Hey I’m a proud CSS3 pretender”?

Good luck with that also :slight_smile:

Can someone that has a native IE6 please test this for me? I’ve been told the PIE.htc throws an error in IE6 and the developer (and me) would like to fix it. He only needs to know the error line # and the IE6 version #. It would be ever so helpful. Thanks!

Test page http://goo.gl/19Wr1

As mentioned ie9 is stuck on vista (or 7).
Not positive, but I think IE9 will operate on both of them. Isn’t 7 just a glorified version of vista, that would make IE9 compatible with vista, just like IE8 works on vista but is compatible with XP.

I’ve also heard that XP will be supported until 2014. All XP users will be limited to IE8 only. Might be worthwhile to check the OS stats on your site too.

BTW, that was an interesting article about IE6 being bundled with all the pirated copies of XP in Asia. That makes sense that IE6 has such a high user rate there.

No native copy of IE6 to test with here, sorry I can’t be of help with that.

@Eric

About the breath wasting. I took a quick look at your portfolio. I understand now why you have such a disregard for serious web dev. Almost all your sites, and ericwatson.com the most, rely heavy on flash and JS to work, and are seriously broken when those aren’t allowed. My bad :wink: I thought we were talking about the same web dev. It seems we don’t.

So, my insight, as you asked for any and all, remember, is: go for CSS3/PIE.htc. Starting today.

Hi Eric, I only have IE6 tester and it gave an error on something to do with sound but on refresh was fine.

I ran it on browsercam for you and there are no error messages visible although that may mean that they just weren’t captured (but is shows as “done” in the bottom left on the browser)

Neh, it’s about embed.js. But hey, I may be wrong :slight_smile: Somebody needs to brush up on its JS.

Hey Ray (or anyone), have you ever seen this? I havnt. I can show an example if you havn’t but I’m assuming you have. My anti-css3 test page with images is nothing special and simple. 4 divs hold the main content. #main holds the repeating bg and wraps everything and has a fixed width. #top holds the top bg (the cap). And #foot holds the bottom bg. And Content is in the middle of it all with some padding and no width. #top and #foot are outside Content but inside #main. #foot has a height so it’s not haslayout. Anyway. In ie6/7 when the page is loading the #foot and it’s bg image collapse and goes all the way over to the right of #main. Once loaded it snaps in place. Its an easy fix I just apply width 100% to it and it stops. But why in the world is it doing that -it’s weird?

Thanks a lot Paul! :slight_smile: