Use CSS3 in IE with a Slice of PIE

We all gave a little cheer when Microsoft announced CSS3 support for Internet Explorer 9. Perhaps now we’ll be able to use those funky effects which have been supported in other browsers for internet-decades (a couple of years or so). Unfortunately, IE9 is still unavailable, and more likely to appear next year. In addition, it won’t be available on XP so the majority of Windows users will be stuck with IE8 at best.In many ways, it won’t matter. IE will ignore CSS3 selectors and properties it fails to understand but, if you’re careful, your site will still work. That’s great until your client or boss demands to know why their browser lacks rounded corners. You may present a reasonable and logical argument for browser compatibility and progressive enhancement, but they don’t care. They paid good money for rounded corners, and they want them now!Before you start slicing background images, you may be interested to hear about an alternative option: CSS3 PIE (Progressive Internet Explorer). It’s a new project from Jason Johnston, and offers a similar solution to Dean Edwards’ IE7 shim in that it uses JavaScript to add the following CSS3 features to IE6, 7, and 8:

  • border-radius
  • box-shadow
  • border-image
  • multiple background images
  • RGBA color values, and
  • gradients

With a few exceptions, there’s no need to change your existing CSS3 properties; border-radius: 5px will simply be applied in Internet Explorer. It can also monitor JavaScript behaviors, so you can use code such as:

var myelement = document.getElementById("myelement");myelement.style.borderRadius = "20px";

How does CSS3 PIE work?

Download the PIE.htc file and put it in your CSS folder. Note that it needs to be served with a MIME type of text/x-component (their are further instructions at the end of the Known Issues page).You then need to add the behavior property to every element where CSS3 effects are required, for example:

#myelement {    behavior: url(PIE.htc);    border-radius: 10px;}

IE loads the PIE script and applies effects using Microsoft’s proprietary filters or VML to achieve the same result.

Note: What are IE filters?

Filters and transitions were introduced in IE4 in 1997 but most of the better options appeared in IE5.5 in 2000. Filters permit effects that are only just becoming common in CSS3. You see: IE isn’t all bad and Microsoft can be innovative!Unfortunately filters were a hack, behaved nicely only sometimes, and used horrendous code, for example:

filter:progid:DXImageTransform.Microsoft.Shadow(Color=#000000,Direction=45);

Filters were never likely to become a W3C standard and few developers used them.

You should note that CSS3 PIE is unlikely to be a viable solution in every situation and, as a beta product, problems may occur. However, it’s a great option for web developers who want to adopt CSS3 without neglecting their IE users.Have you tried CSS3 PIE? Is it useful, or would you prefer effects to be hidden in IE8 and earlier versions?

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.tyssendesign.com.au Tyssen

    I’ve used it a couple of times in the past week and it’s been working out great so far. Had to fiddle a bit to fix hasLayout issues in IE6/7 that weren’t there before, but other than that, no problems.

  • Giles

    When I first saw this I almost crapped myself at how simple it was to implement. I used this on a site of my own which I had developed to leave Internet Explorer users wishing they had a better browser but with this I was able to let them join the party in under 30 minutes. My only trip up was the gradient background which is a little different.

    Go figure I went to show the site to a friend at the library and there was only FF 3.0 installed. With css3pie this site actually looked better on Internet Explorer since FF3.0 has no css3 properties. #facepalm

    • http://www.idude.net iDude

      Giles,

      I’ve not experimented with CSS3 PIE. I was very ecstatic over seeing a Javascript CSS library tackle these issues. It resolves many of the headaches and frustrations in achieving a consistent design across different versions of MSIE. It’s a little disappointing to read your comments regarding FireFox 3.0. It appears that an additional layer of CSS or Javascript is probally required to bring the design to life in other browers.

      When it comes down to it, it all depends upon the type of effects you are going for, if Javascript/CSS is the best solution to make things look consistent. There are times when I resort to using images for rounded corners and set those images to be cached. Why? Because it’s pretty reliable, looks the same in all browers. There’s no headaches, No pain, no frustration, no lost time on a project. While CSS3 would be ideal to use, the reality of the technology we are working with is no so ideal.

      If the effects you are trying to achieve in the design are more advanced and a must have. Yes, it’s well worth the time and energy. Life would be so much better if there were not so many forks in JS code to deal with browser support issues. It will be nice to see a day come when Javascript can become streamlined down to handle the tasks or objectives without cross brower support being part of it. It just add overhead and bloat to the file size and increases the amount of processing required.

      The evils of the kind of work we do, does not lend itself to promoting the development of tight compact code. Many people are under the gone, working on projects with deadlines to meet. It’s Amazing and great to see CSS3 PIE hit the scene. However, when reading feedback or stories from people such as you. It’s painfully clear, that it does not address display in other browers such as Firefox 3.x and it’s focus is upon MSIE.

      Is it really worth it to develop sites that only look killer in one vendors browser? While a lot has changed since 1995, I’m reminded of that fact it’s still very much the same game to get things to look and function in different browsers.

    • Justen

      For the most part you probably just need to add duplicate entries with the -moz prefix, e.g. -moz-border-radius. Same applies to webkit browsers, -webkit-border-radius. I find the practice incredibly obnoxious personally, but I do understand the argument in favor of it.

  • tcertain

    This is great! I have not tried to use CSS3 because of IE and its issues. I hope CSS3 Pie guys go beyond gradients and borders to all the CSS3 options that are not available in IE. With 40-50% of the market still using IE it was just not an option.

  • Revital

    I couldn’t get it to work on a site I have running in MODx. Haven’t tried plain HTML yet.

    • chen3

      Hi Revital,
      It didn’t work for me too.
      I looked in the PIE forum and found a solution that worked for me.
      Although the file is in the css folder, the path that worked is ‘css/PIE.htc’,
      As it should be relative to the html file and not to the css file..
      BEHATSLAHA, c

  • Keith Clark

    “…In many ways, it won’t matter. IE will ignore CSS3 selectors and properties it fails to understand but, if you’re careful, your site will still work…”

    If you want to use CSS3 selectors, IE can emulate those too:

    http://www.keithclark.co.uk/labs/ie-css3/

    • http://www.optimalworks.net/ Craig Buckler

      That’s a nice solution. Thanks for sharing, Keith.

  • Justen

    Another thing you haven’t mentioned about filters, beyond their flakiness, poor documentation, and lack of support, is that they’re slow. Having spent the past day optimizing a script enough to get it to run acceptably on IE 8 (it zips along just fine in other browsers), the problem of IE’s medieval script performance is fresh in my mind.

    As tempting as this solution is I doubt it’s widely applicable, as IE just can’t handle the overhead where this kind of support would be most appreciated. That’s not to say that I won’t give it a shot sometime, and thanks in any case for the link. :)

  • ckw

    Firstly, I think if we continue with the approach that all must appear the same in all browsers, we will never create the incentive for users to upgrade or change.

    And secondly, I agree with Justen in saying IE can’t handle the overhead, so effectively this solution implements visual effects to the cost of performance. I think that should be the other way around.

  • http://www.717studios.com dekdaddy

    I’m glad I read this post. At least a percentage of IE users can see some of these progressive styles. I’m trying it straight away.

  • powerpotatoe

    I love the idea of PIE. This may come in handy for a company intranet site I am flipping, which of course will run on IE. Thanks for sharing this solution.

  • http://thatNorwegianGuy.com/ thatNorwegianGuy

    http://www.modernizr.com/, ie-css3 and PIE.

    They all help, but how many do I keep adding?

    • XLCowBoy

      My thoughts exactly.

      I was already thinking that somebody ought to compile everything in a very tight single js file already.

  • http://galengidman.com/ fendeanson

    I tried this out and it worked great. It’s a great idea and I’m looking forward to using it in the future.

  • Mantish

    I also found http://ecsstender.org
    Apparently there are a lot of these libraries going on. Which one is better?

    • http://www.optimalworks.net/ Craig Buckler

      I don’t think it’s quite the same thing, but can do some of the tricks implemented in PIE.

      The answer is: there’s no best solution. Use whatever works for you. Sorry that’s not more helpful, but it really depends on what you’re attempting to do and how you want to achieve it.

  • Anonymous

    pie