PIE: Add CSS3 border-radius and multiple backgrounds to IE 6-8(css3pie.com)
css3pie.com
PIE: Add CSS3 border-radius and multiple backgrounds to IE 6-8
http://css3pie.com/
5 comments
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.
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.
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.
I'm on a public computer though, with an old IE6 version (6.0.2900.2180, XP SP2) infected by the Babylon toolbar.
Hmm, interesting, I wasn't seeing that a minute ago. My bad. I'll try to fix both bugs tonight. Thanks for the feedback!
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.
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.
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.
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.
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.
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.
IE8 isn't 'old' IE, it's 'current' IE. It will definitely be good if in the future IE supports CSS3 properly, but if you're making or supporting something today, you need to make it work on the browsers people are actually using today.
And for most markets, that's IE, and frequently not even IE8.
And for most markets, that's IE, and frequently not even IE8.
Absolutely, excellent point. IE9 is promising to be an excellent browser. Once it comes out we should absolutely encourage people to upgrade. The day PIE is obsolete will be a very happy day. :)
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
http://about.digg.com/blog/much-ado-about-ie6
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?
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?
Some clients/bosses are hard to convince that you don't need rounded boxes to appear to those users ...
That may just be a language barrier. The smart ones will at least listen if you can show them the added costs they'll be paying for nickel features like this.
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.
But correct me if I'm wrong, like I said I'm just assuming.
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...
I don't believe it's any Javascript overhead for non-IE browsers. It's just a single line of CSS:
behavior: url(path/to/PIE.htc);
that non-IE browsers will simply ignore.
behavior: url(path/to/PIE.htc);
that non-IE browsers will simply ignore.
On many sites, IE 6-8 users account for more than half of visits, and are often the single largest block of visitors by browser. Assuming you have such a site and don't want to just write off 50% of your users design-wise, it's nice to have the ability to use border-radius and other CSS3 advances, because they save you from a lot of time-consuming, repetitive work.
If you are in a situation where you can simply forget about what your site looks like in IE, then I envy you. Most web designers are not.
If you are in a situation where you can simply forget about what your site looks like in IE, then I envy you. Most web designers are not.
No, that strictly depends on how you've designed your site. To have your site look the best in ALL browsers, make subtle use of CSS3 effects. Don't _rely_ on them. If you follow that, you won't be writing off "50%" of your users design-wise.
Sure, but then you're writing off CSS3 and continuing to write code as if it were 2006, which I personally don't like having to do.
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. :)
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. :)
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?
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.