PIE: Add CSS3 border-radius and multiple backgrounds to IE 6-8

by compay • 16 years ago

27 24 16 years ago

wdewind• 16 years ago

the tabs don't seem to work in any browser. i only tried ie8 for the styles, and while they are impressive they definitely lack polish. for instance, when enabled a border-bottom is added to each tab that shouldn't be there.

this is a tough problem and css pie could potentially be useful but i think it needs

a) polish b) a bit more customizability

before it's production ready. good start though.

lojjic4• 16 years ago

Thanks for the feedback! This demo isn't intended to be functional (clicking the tabs won't do anything, that requires JavaScript code which is out of scope for this demo), it's just there to show an example of how you could style things using CSS3.

I can verify there is a bug in IE8 where there is an extra gray line at the bottom of the active tab. I will attempt to fix that ASAP. It works properly in IE6 and IE7.

Thanks again.

pygy_• 16 years ago

In IE6, here, there's a big gap (~1em) between the tabs and the content.

I'm on a public computer though, with an old IE6 version (6.0.2900.2180, XP SP2) infected by the Babylon toolbar.

smitjel6• 16 years ago

A question though...why? If people don't care to update IE, do you think they care about rounded boxes, shadows and gradients?

IE9 is supposed to support all this, I think. Let the people that don't want to update live in their "square" world...it doesn't seem like they care anyway.

powrtoch2• 16 years ago

Unless I'm mistaken, this is targeted at webmasters who want to use these features in their websites. I haven't downloaded/installed, but my guess is that it provides a workaround component that your page can link to. Similar to the existing javascript workarounds for transparent PNGs. The point is to improve the experience of IE6-8 users on your site, not for you to enhance your own IE installation.

But correct me if I'm wrong, like I said I'm just assuming.

smitjel6• 16 years ago

Yes, it's javascript overhead you have to add to your site so that people using IE will be able to see CSS3-like effects. So why add the overhead just so users of IE can have rounded boxes and gradients. Why bother? It's just eye candy...

compay3• 16 years ago

See this article on Digg's blog for an interesting look at the reasons why people may have IE 6 on their computers.

http://about.digg.com/blog/much-ado-about-ie6

smitjel6• 16 years ago

Yes, I've heard that argument. I even worked at a company that was locked down to IE6...I know all about it.

But again...we're talking about adding overhead to a site JUST for eye candy. Let the boxes be square for IE...is that detrimental to your site's message?

lojjic4• 16 years ago

Believe me, I have a lot of sympathy for this viewpoint. We don't want people continuing to use IE, so it seems logical that we should make their experience "lesser", using CSS3 for browsers that support it and falling back to flat square boxes in IE, and that will force them to change browsers, right?

Unfortunately, my experience over the years has brought me to the conslusion that this assumption is incorrect. If an IE user comes to your site and it doesn't look pretty, they're less likely to switch browsers than they are to just go to your competitor's pretty site instead. It sucks, but that's the reality, and that's why almost nobody gives IE a totally degraded experience.

Instead, web developers use all sorts of tricks of the trade (sliding doors, complex overlapping sprites, empty divs positioned to corners, etc.) to "fake" the features that CSS3 gives us natively, solely because they are forced to support IE. That's what PIE was created to change. It's not about giving IE users a better experience (most sites already do a pretty good job of that already), it's about making the web developer's life easier so they can deliver that same experience with less code and fewer images.

smitjel6• 16 years ago

Awesome points. But keep in mind though that the IE team has really stepped up lately with IE9. IE will no longer be this cancer to web devs anymore. Let's stop wasting the time to make old IE "look pretty" and help people move forward and update (as best they can). Again, good points though.

afhof• 16 years ago

I tried running this on my XP64 machine with IE8, and the CPU went up to 100% for a couple seconds upon loading the page. It lagged more when changing the settings and became unresponsive. Does this happen for anyone else?

gfodor• 16 years ago

This is great! I knew my laziness would pay off and someone would eventually fix the problem without having to image-ify all the CSS rounded corners in my new app :) Thanks.

skyjumper• 16 years ago

This is a (my) similar project: http://fetchak.com/ie-css3/

A 2.0 rewrite is almost ready, will support different border-radius sizes per corner and any color of box-shadow.

The gradient thing is nice. Beat me to it. :)

PIE: Add CSS3 border-radius and multiple backgrounds to IE 6-8

Related Stories