Monday, July 19th, 2010

A Little PIE with that CSS3?

Category: CSS

>Everyone’s chomping at the bit to leverage new HTML5 and CSS3 features but with some older browsers not supporting them, hacks are still needed to make things work in a cross-browser fashion. We’ve seen libs that make things easier such as Remy Sharp’s html5shiv and Modernizr and now we can add another one.

Jason Johnston’s new PIE library makes it easy to rendering several of the most useful CSS3 decoration features within Internet Explorer versions 6 through 8. He took an interesting approach by using IE DHTML Behaviors to style the elements and provide the necessary functionality to emulate the CSS3 functionality. So to add rounded corners to an element, your CSS code might look like this in plain ‘ole CSS:

  1. #myElement {
  2.     background: #EEE;
  3.     padding: 2em;
  4.     -moz-border-radius: 1em;
  5.     -webkit-border-radius: 1em;
  6.     border-radius: 1em;
  7. }

To add support in IE 6-8 using PIE, you’d add this:

  1. #myElement {
  2.     ...
  3.     behavior: url(PIE.htc);
  4. }

PIE currently has full or partial support for:

  • border-radius
  • box-shadow
  • border-image
  • multiple background images
  • linear-gradient background images

Unfortunately, there seems to only be one demo at the moment, which is border-radius rendering via the home page, but it’s still seems like a good start with a lot of future potential.

I’ve never personally used IE DHTML Behaviors or HTML Components so I looked them up and found these intro links for those who might be interested in better understanding them:

Using HTML Components to Implement DHTML Behaviors in Script
Introduction to DHTML Behaviors

Posted by Rey Bango at 10:51 am
12 Comments

+++--
3 rating from 1 votes

12 Comments »

Comments feed TrackBack URI

I tried it on my site and there were a few bugs, such as form backgrounds completely disappearing and some things not seeming to work at all despite being in the ‘supported’ category.

Still, an interesting project, and could be very useful once bugs are ironed out!

Comment by ahallicks — July 19, 2010

That’s a *very* good job.

Comment by drasill — July 19, 2010

Very good job !

Comment by fabienmenager — July 19, 2010

Tempting to throw into a site’s CSS, looks to be a nifty implementation; but, I would look very carefully at performance in IE before and after including this. CSS behaviours (.htc files, etc.) are known to be horrible for performance, given that the attached JS code can be run hundreds or thousands of times as mousemove() events fire, for example.
 
This said, I applaud the author’s work at making IE “just work” with modern CSS. Libraries like these are often useful and appreciated, particularly if they are fast. :P

Comment by Schill — July 19, 2010

@ahallicks – Disappearing backgrounds usually mean a z-index issue; see the top of the Known Issues documentation page for how to get around that. Also, I’d greatly appreciate it if you could file bug reports for “things not seeming to work at all” so I can get them fixed. Thanks!

@Schill – FYI those performance issues you mention are a problem with IE CSS *expressions*, not behaviors. Very different beasts!

Comment by lojjic — July 19, 2010

Very interesting work, I’ve been trying it out all weekend and I’ve been quite impressed. My biggest problem is performance as Schill mentioned, the CPU is chugging for a good second or two on page startup and probably slowing down everything else. I think the key if you are going to use it is to use it sparingly and on elements that aren’t going to be changing often.

Comment by MattCoz — July 19, 2010

Oh, and one other thing, this kind of breaks Modernizr as it will still report IE as not supporting these features. So keep that in mind if you want to use both.

Comment by MattCoz — July 19, 2010

IE cannot do round corners natively, when will folks realize this? Also, this script inserts nodes into your DOM, and I will never use a library which does this. Yuck.

Comment by Baryn — July 19, 2010

@Baryn Rounded corners can be emulated with VML in IE, and having nodes inserted into the DOM may or may not be a problem. It depends on what you’re using it for. The bigger problem is that these abstractions are probably pretty leaky, but again it depends on your use.

Overall it sounds like a pretty sweet hack. Nice work.

Comment by adunn — July 20, 2010

This looks very cool, however in my tests so far it’s rarely been seamless. It seems to have a habit of wiping out background colors of elements its applied to. It also changed the proportions of a fieldset.

I’ll be eager to see sturdier versions in the future.

Comment by pendensproditor — July 21, 2010

Can I just create my CSS document and using the IE conditional statement IE9 > using something like
* { behavior: url(PIE.htc); }
or whatever element I wanna apply the style to
What do you think?

Comment by Ahmadalfy — July 21, 2010

This is very much like IE7 by Dean Edwards, not sure if it’s a good idea for performance, I would be very careful with it’s use.

Comment by SilentLennie — July 23, 2010

Leave a comment

You must be logged in to post a comment.