Web development keeps getting better – there are more increasingly-standardized tools like HTML5 and CSS3, and their features let web designers and developers create advanced and good-looking websites more easily.
But some browsers – mainly Internet Explorer version 6, 7, and 8 – don’t support many of these features, like:
- border-radius
- gradients
- text-shadow
- transparency
- CSS animations and transitions
- and so forth
Now, this wouldn’t be an issue if it weren’t for older versions of IE still being such widely-used browsers. Unfortunately, these good-looking and useful decorative features are rendered useless for many users who are still on those older browsers.
However, the modernizing scripts featured in this article let you get around some of those issues and have your websites display the way they were meant to be displayed.
If you use HTML5 and CSS3 in your websites, these scripts are a must. Sure, an argument could be made for if it matters to support such outdated browsers – that’s up to you if you want your website to look the way it’s meant to be seen for many users who are still on those older versions of IE. If so, these scripts should help.
So without further ado, here are some modernizing scripts every web designer and developer should use:
Modernizr
Modernizr adds classes to your element which then lets you target specific browser functionality in your stylesheet. Plus, you don’t need to write any actual Javascript to use it. Websites like Twitter use Modernizr to ensure backwards-compatibility.
CSS3Pie
DocumentationDocumentation | Demo
CSS3Pie basically makes Internet Explorer versions 6-8 more modern. It does that by letting IE 6-8 capable of rendering some of the most useful CSS3 decorative features like rounded corners, drop shadows, gradients, and so forth.
Selectivizr
Selectivizr, like CSS3Pie, also makes Internet Explorer versions 6-8 more modern. Selectivizr creates CSS3 pseudo-classes and attribute selectors for IE 6-8. Specifically, Selectivizr is a JavaScript utility that emulates said CSS3 aspects. All you need to do is include the Selectivizr script in your pages and it will do the rest. What’s nice is you don’t need to actually know JavaScript to use Selectivizr.
PNGFix
PNGFix is a simple jQuery script that fixes the PNG transparency issue in Internet Explorer 6. Now your IE6 users will properly see your PNG images that have transparency. This script is easy to install and set up.
DD_belatedPNG
DD_belatedPNG is a JavaScript library that enables proper PNG image support in Internet Explorer 6. Similar to PNGFix, DD_belatedPNG lets your IE6 users see your PNG images the way they were meant to be seen.
Borderradius.htc
Borderradius.htc is a simple script that enables curved corners (border-radius in CSS) in any browser, not just modern browsers like Firefox and Safari/Chrome that support it. Borderradius.htc is very easy to install and set up (you just add a few lines of code to your stylesheet).
Head JS
Head JS is a small script that not only modernizes your website but can also simplify and speed it up. Head JS is a JavaScript-based script that you add to your website’s header. Afterwards, you can have your HTML5 and CSS3 code be cross-browser supported, use specific CSS to target certain browsers (like those older versions of Internet Explorer), and load scripts as if they were simple images.
To Conclude
In a perfect web world, there would be no need to modernize – everyone would automatically be able to see and enjoy the latest decorative features.
Unfortunately, technology doesn’t automatically update for everyone, and that leaves many users on older browsers that will try to view your modern website. If you don’t want to leave those users out, you need to make your modern website cross-browser (ie. backwards-compatible). And these modernizing scripts featured in this article will let you easily and quickly do that.
Because let’s face it: those people shouldn’t be using older browsers but through lack of knowledge or technical limitation they’re stuck with them. But they’re still nice people who want to see and read your stuff, and by using these modernizing scripts you won’t leave them out. You win, those users win, and a puppy is smiling somewhere.
Which modernizing scripts do you think every web designer and developer should use? Are there glaring omissions from this list that you think belong? Share your most useful modernizing scripts in the comments section below.
Author: Oleg Mokhov
Oleg Mokhov is an electronic music artist and design enthusiast. He makes electronic music that’s a cross between Four Tet and Boards of Canada.
Thanks for this article! Will make use of it for sure.
nice collection, some new ones i have never heard of
but in my opinion i dont think that we should use anything to improve older browsers, what difference does it actually make if a button has a rounded corner or drop shadow on it? How would a user even realise they are seeing an inferior design of a page, unless there switching between IE6 and Chrome for example every time they browse the internet.
Nice collection. I recommend yepnope, which is an asynchronous conditional resource loader that’s super-fast and allows you to load only the scripts that your users need.
http://yepnopejs.com/
Really useful… Thank you!
Nice article, I’ve been using the PNG fix ones for a while now and more recently Modernizr. Will look at implementing the others within the next project for comparison.
Modernizr is really all you need, maybe with the PNG fix. Pretty sure both come with a custom HTML5 Boilerplate install via Initializr.
modernizr is really the key to do awesome stuff..
nice article and good collection. round corner is really awesome. thanks :)
DD_belatedPNG is the mest pngfix so far. It also handles repeating pngs and does not stretch them when height attribute is mentioned.
Love CSS3Pie easy to use and works well !
IE users don’t care about rounded corners and transparency, do they? If they did, wouldn’t they just use a more modern browser?
I think it’s the developers and designers who are obsessed with “things looking right in IE.” I say square corners for ’em all! If you want a better experience, upgrade like the rest of us. (End of IE rant…)
I have yet to find a PNG fixer that doesn’t render a whole site useless in IE6 — That is to say, if the whole site is made of transparent PNG’s. Sure it works great for one or two images here and there, but when you want a content area with a drop shadow over top of a textured background, just forget it.
Thanks for creating such a creative weblog. Your site is not just knowledgeable but also very artistic too. There normally are very few experts who are capable of write technical stuff that creatively. All of us look for articles regarding this subject. I have gone in detail through many blogs to come across information with respect to this.Keep writing in !!
Awesome ! Thanks…
Great post
You should take a look at my framework, it comes packaged with most of the things you mentioned in this article
http://gregbabula.info/framework.php
Hey Oleg! Interesting to run into you over in this side of things as well. :D
Head.js is one of the most useful scripts I have ever come across…
Really impressed with your useful roundup Oleg and a well written article too. I’ve used DD_belatedPNG and CSS3Pie in the past and found those scripts to be pretty decent.
Arguably though, by using these modernising scripts, we are simply catering for out-of-date browsers that we as web designers would all love to see the back of! I don’t really think that people still using IE6 for example, would even appreciate the use of CSS3 on a webpage and if they did, then they wouldn’t be using a 10 year old browser.
Tbh, I’m not so fond of using those scripts unless the client won’t pay you if you don’t ;-)
Imo, sites don’t have too look 100% the same in every browser, and users of old browsers often don’t have the same expectations of sites then people with high end modern systems.
Imo, you need to make the sites work as best as possible in the older browsers without having to add any extra scripts (= slower site)
Many people don’t have a choice over which browser they use. In many parts of the world, bandwidth is so limited that a software update takes days. Some people surf from work and can’t upgrade.
My stepdad is an artist. He doesn’t know what a browser is, and doesn’t want to learn, but he certainly does appreciate good design.
How about Google Chrome Frame?
I agree. But the clients don’t. Although I’m somewhat triumphant over the fact that I got one client to accept that he would get rounded corners for his site below IE9.
These scripts are great. I shoud use this everytime I make a standard compliant website, and I do a lot of them, but never worked with these and it always has taken me time to remake everything for IE6.
Great post!
Yes this script is great and I use it already.
But it doesn’t help alway. Opera 11.10 is not able to create radial gradients but it can create linear gradients. So I get the class “cssgradient” from Modernizr but it is not true. I also can’t use Image in this case, couse the class is “cssgradient” and not “no-cssgradient”.
You see, in this case is Modernizr unseable.