Tutorial Details
- Topic: CSS3
- Difficulty: Beginner
- Estimated completion time: 30 mins
You’ve seen it time and time again on Webdesigntuts+; a CSS3 tutorial which you’re tempted to follow, but lack of support in older browsers stops you from looking any further. There are however, a number of tools to help out in situations like these. Today we’re going to figure out how to conquer CSS3 in older browsers, including Internet Explorer..
Let’s take a look at a range of techniques to render the most important CSS3 properties in older browser versions.
Setting it Up
To begin with, download and include all the necessary scripts for this tutorial. For the purpose of this exercise, place all scripts in the same folder as your CSS files. Here are the tools we’ll need:
- CSS3 PIE
- Selectivizr
- Mootools (will be used for Selectivizr)
- jQuery
CSS3 PIE
CSS3PIE is our IE assistant. PIE stands for Progressive Internet Explorer, and it extends the behavior of Internet Explorer to help it recognize and display CSS3 properties.
Check out the CSS3PIE download folder where you’ll find various files. We’re going to use PIE.htc, and we’ll call it from our CSS, so I suggest you put it in the same folder as our style sheet.
Selectivizr
Selectivizr is used to handle CSS3 Selectors. It’s used in conjunction with a JavaScript library, such as jQuery or Mootools. I recommend opting for Mootools as it supports all the Selectivizr functions (CSS selectors).
For this tutorial, I’m going to use the Google-hosted Mootools library, so, we simply include it in our head:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/mootools/1.4.0/mootools-yui-compressed.js"></script> <script type="text/javascript" src="selectivizr-min.js"></script>
jQuery
We can use jQuery to render an alternative to CSS3′s text-shadow property. We simply need to download the jQuery text-shadow plugin, then, include it with jQuery:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script type="text/javascript" src="jquery.textshadow.js"></script>
OK, that’s covered our toolkit, now let’s see how we use those tools to solve our CSS3 headaches..
Border Radius
Border-radius is probably the most familiar of CSS3 properties. Thankfully, rendering it in Internet Explorer is simply a case of using CSS3PIE.
.box {
border-radius: 10px;
behavior: url(PIE.htc);
}
As you can see, we have only to “call” the PIE script, after having defined our border-radius rule.
Box Shadow & RGBA Colors
In a similar fashion to border-radius, for Internet Explorer to recognize box-shadow we just have to include the PIE script. Note that we can also declare the shadow color using RGBA values.
.box {
box-shadow: 5px 5px 5px rgba(0, 0, 0, .75);
behavior: url(PIE.htc);
}
You can also use RGBA colors when declaring a background-color.
Background Gradients
To allow CSS3 PIE to render background gradients, we prepend background: in the following way:
-pie-background: linear-gradient([<bg-position> || <angle>,]? <color-stop>, <color-stop>[, <color-stop>]*);
Actually, it’s very similar to the various other browser vendor rules. Remember to call the CSS3 PIE behavior afterwards!
.box {
background: -webkit-linear-gradient(top, #0072bc, #00bff3); /* Safari, Chrome */
background: -moz-linear-gradient(top, #0072bc, #00bff3); /* Firefox */
background: -o-linear-gradient(top, #0072bc, #00bff3); /* Opera */
background: -ms-linear-gradient(top, #0072bc, #00bff3); /* IE10 */
-pie-background: linear-gradient(#0072bc, #00bff3); /* IE6+ */
behavior: url(PIE.htc);
}
Multiple Backgrounds
Again, in this case, we have to use the -pie- prefix:
.box {
background: url(img/flash.png) 20px 20px no-repeat, url(img/airplane.png) 90px 50px no-repeat, #00BFF3; /* Modern Browsers */
-pie-background: url(img/flash.png) 20px 20px no-repeat, url(img/airplane.png) 90px 50px no-repeat, #00BFF3; /* IE6+ */
behavior: url(PIE.htc);
}
Border Image
The last property CSS3 PIE caters for is the border-image:
.box {
border-image: url(border.png) 27 27 27 27 round round;
behavior: url(PIE.htc);
}
CSS3 Selectors
Now it’s time to get dirty with Selectivizr. Include the JavaScript library as demonstrated at the start of the tut, then all CSS3 Selectors will be recognized by IE6+!
table tr:first-child {
background: #252525;
}
table tr:nth-child(2n+1) {
background: #ebebeb;
}
Text Shadow
This effect can be rendered cross-browser most easily using the jQuery library. Having included it, simply call the textShadow() function, pointing to your selector:
<script type="text/javascript">
$(document).ready(function(){
$(".txt").textShadow();
})
</script>
To complete the effect, just add the text-shadow to your CSS.
.txt {
text-shadow: 2px 2px 2px black;
}
IE Special Filters
To replace some CSS3 properties you can also use IE filters. This first example is for background gradients:
.box {
background: #FFFFFF;
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999'); /* IE6–IE9 */
}
This second one, is the equivalent to the transform property. However, the syntax is such a headache that you’re advised to use a generator to calculate it.
.box {
/* IE8+ - must be on one line, unfortunately */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.9848077530122079, M12=-0.17364817766693127, M21=0.17364817766693127, M22=0.9848077530122079, SizingMethod='auto expand')";
/* IE6 and 7 */
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=0.9848077530122079,
M12=-0.17364817766693127,
M21=0.17364817766693127,
M22=0.9848077530122079,
SizingMethod='auto expand');
margin-left: -14px;
margin-top: -21px;
}
Conclusion
As you’ve seen, with various tools we can ensure reasonable rendering of CSS3 in older browsers. I hope this encourages you to take the bull by the horns and practice many of the effects achievable with CSS3! Thanks for reading.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Alberto Restifo
Sign up now!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Webdesigntuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Thank you so much. Yeah,truly an asprin :)
Thank you very helpful!
This is an excellent article for those wanting to keep supporting the dinosaurs. I personally don’t think it’s worth the effort, but understand that some need to do this.
Is all of this really necessary? I think a lot of this comes under “Progressive enhancement”, browser’s that lack support for text shadows should just not see the shadow – relying on a javascript library/plugin just to handle it seems needless.
If you really must, then at least consider using something like Modernizr to load the extra bloat scripts conditionally, only when a browser needs the helping hand.
Absolutely – you should only bring in extra help when it’s necessary.
Some may choose not to bother, but it’s a shame when people don’t tackle modern techniques for fear of offending some of their users. Hopefully, knowing that there are fall-back options will encourage people to embrace CSS3 =)
I am working for an agency, you cannot tell your clients something like “Oh yes, IE is an old Browser, thats why the Website is looking a bit crappy in it.” Most Clients dont get it, and they used the IE6 like all time and wont or cannot change their Browser.
There are specific Projects, where you have to use thoose librarys or use workarounds and old technics for rounded corners etc… I think, that its more right to use javascript to support old browsers then use the multiple div span span span to get your rounded borders in all browsers.
Thank you so much, this is exactly what I’m looking for at this moment, the css3 when working in IE is really really bad
Might I suggest you start covering CSS3, Canvas, jQuery, and HTML5 as part of “web-design”. It definitely improves the UI and would give you guys a stronger niche.
Have you tried http://www.modernizr.com?
This is what I use for older browsers works really well.
Actually, Modernizr work in a different way: it doesn’t render the CSS3 with older browser, with Modernizr you can define a different style for not compatible browsers.
I think this approach can be good for the most simple stuff, but, how can you render a border radius or a box-shadow with Modernizr? I think with CSS3 PIE it’s easier as long as you need only to include the PIE behavior. :)
This does not work in IE7. Begins to work after the selectors section, but the demo page is all out of wack in IE.
I’ve tried to use the CSS3 text-shadow as listed above, but it doesn’t seem to work at all in IE?
I also can’t find any mention of textShadow() in the jQuery documentation?
Have you donwloaded the jQuery text-shadow plugin? http://www.hintzmann.dk/testcenter/js/jquery/textshadow/
Here the page on jQuey of the plugin: http://plugins.jquery.com/project/textshadow :)
Very useful stuff, thanks.
Thank you for the informative article, though I have seen all these polyfills before.
I do wonder, does this go in the face of creativity? It seems it is ingrained into our thinking to want a website that looks the same across browsers, but should we really resort to polyfills? I realized recently that in my websites, I had been making a site that displays in both IE7+, and the other major browsers, and then adding box shadows and rounded corners; I wasn’t taking advantage of newer technologies when available, and it was restraining my designs. So I wondered how I would go if I only designed a site for the latest version of chrome: How would it look? I didn’t really know.
Long story short, we could spend time implementing polyfills which hamper performance, or we could spend time unleashing creative flair with newer technologies. Granted that some polyfills have their use, but designing a site and then polishing with css3 gives no where near the result of designing with the latest technologies in mind and stripping it down when those techs aren’t available.
Well, I think it depends on what is the purposes of the website you are designing/developing:
Use as example, a big one, like Google.
You can’t have the Google page rendering in different ways on older browsers (Google new pages use a lot of CSS3), so, what can you do? There are many ways to solve this issue, in the article, I showed you the simplest one. :)
Then, I agree with you that we can’t still think to oldest software, we have to go on, but, we can’t ignore the 23% of people that still use Internet Explorer (W3C).
But as I said, I fully agree: we can’t stay forever on older software. :)
This does not work for IE 7 or IE8
is certainly a great help to many developers, like me.
great article
I’m afraid to say but none of the CSS PIE works in IE8? Is it just me?
I tested the demo in IE6 and even IE8 on Windows XP, but no rule except Selectivizr, text-shadow and IE Special FIlters is applied ;(
Just for some clarity, here are some screenshots of the demo in various IE versions: IE9, IE8, IE7, and, bless it, IE6.
Has problems in IE7. Also sometimes IE8 hangs and it behaves non-deterministically.
This is like a post written by Jesus, or something… THANK YOU!
Another useful took is IE9.js http://code.google.com/p/ie7-js/ which helps out with supporting css pseudo selectors such as :before and :after, and other nifty tricks!
Great article and thanks. Some of these techniques will be going in my next project.
For those that make comments around it not being necassary to consider older browsers, i work in the eLearning industry and alot of our clients standard browser is IE6, true. I think techniques like this allow me to develop for IE6 using css and javascript technicques and also cater for those accessing courses outside of the corporate network on modern browsers. The choice for developing for IE6 in my industry is the choice between work and no work. I’m talking about organisations with 5000 to 40000 staff aswell, so not work that can be turned down for a browser crusade.
The box shadow didn’t work on all IEs and the border radius works only on IE 8 and 9
Can I animate rotating with jQuery in IE?
Wow, this is a stunner. Thanx for sharing this with us. I guess, I´ll try this as soon as possible.
Super Awesome tutorial
Good article.
My approach exactly, with the exception that I use modernizr when I want to use PIE.
Since it is suppose to be progressive, don’t go overboard. As this will slow the rendering process particular IE7 and below.
Note, that PIE only supports RGBA values as a single background-color only. You can use rgba value, however due to the limitation of the VML syntax you it will render it fully opaque.
IE9 supports linear gradient so its a plus if you are not supporting IE8 below anyways.
Its a bummer they have been unable to get a workaround for inset shadows. :(
However, is there an alternative to jQuery for text-shadow? Currently I use the ms filters dropShadow and chroma to get a similar look.
Well Danz, thanks for the comment.
Actually, jQuery text-shadow plugin, is the easiest and faster one that I found on the web. I know that it don’t render very well on my example, but, if you will use it to generate a “white border” (text-shadow: 1px 1px 0 white) it will render very well, and I think it is the use people do most. :)
Thanks so much for this article, Now i can use it without my manager shouting on my face most our users are using older browsers:)
Superb tut! Exactly what I’ve been looking for.
Thank you very much.
This Artical seems so great but when i checked ie8 it didn’t support the CSS3. and solution for that?
Hi Manoz,
If you check this screen previusly posted by Ian, you can see that the demo run very well on IE8. http://cl.ly/1Y3d190R2h130a1G0q3D/o
Thank you so much …
Border-radius doesn’t work. Just plain old doesn’t work.
Note from the css3pie documentation: this path [path to pie.htc] is relative to the HTML file being viewed, not the CSS file it is called from.
It didn’t work for me until I saw that.
Hope it can help