SpyreStudios

Web-Design and Development Magazine

  • Design
  • Showcase
  • Inspirational
  • Tutorials
  • CSS
  • Resources
  • Tools
  • UX
  • More
    • Mobile
    • Usability
    • HTML5
    • Business
    • Freebies
    • Giveaway
    • About SpyreStudios
    • Advertise On SpyreStudios
    • Get In Touch With Us

Modernizing Scripts Every Web Designer and Developer Should Use

April 5, 2011 by Oleg Mokhov 25 Comments

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

Documentation | Demo

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

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

Documentation

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

Documentation | Demo

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

Documentation | Demo

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

Documentation

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

Documentation | Demo

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.

Filed Under: Accessibility, Development, HTML5, Resources, Tools, UX

Comments

  1. Matias Klemola says

    April 5, 2011 at 7:12 am

    Thanks for this article! Will make use of it for sure.

  2. Ehhwhat.co.uk says

    April 5, 2011 at 8:02 am

    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.

  3. Anonymous says

    April 5, 2011 at 8:20 am

    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/

  4. An Ling says

    April 5, 2011 at 8:23 am

    Really useful… Thank you!

  5. JB Interactive says

    April 5, 2011 at 8:59 am

    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.

  6. Nathan Nearing says

    April 5, 2011 at 9:10 am

    Modernizr is really all you need, maybe with the PNG fix. Pretty sure both come with a custom HTML5 Boilerplate install via Initializr.

  7. David says

    April 5, 2011 at 10:35 am

    modernizr is really the key to do awesome stuff..

  8. KC Rajput says

    April 5, 2011 at 10:49 am

    nice article and good collection. round corner is really awesome. thanks :)

  9. Pushpinderbagga says

    April 5, 2011 at 10:57 am

    DD_belatedPNG is the mest pngfix so far. It also handles repeating pngs and does not stretch them when height attribute is mentioned.

  10. Elliott Stocks says

    April 5, 2011 at 11:59 am

    Love CSS3Pie easy to use and works well !

  11. Jamie Hamel-Smith says

    April 5, 2011 at 1:07 pm

    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…)

  12. Scott Stubblefield says

    April 5, 2011 at 7:20 pm

    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.

  13. Kevin Truong says

    April 6, 2011 at 1:37 am

    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 !!

  14. Stefan Rynkowski says

    April 6, 2011 at 6:04 am

    Awesome ! Thanks…

  15. Anonymous says

    April 6, 2011 at 3:14 pm

    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

  16. Paul Irish says

    April 6, 2011 at 10:53 pm

    Hey Oleg! Interesting to run into you over in this side of things as well. :D

  17. Aayush says

    April 7, 2011 at 4:05 pm

    Head.js is one of the most useful scripts I have ever come across…

  18. jay design says

    April 8, 2011 at 8:42 am

    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.

  19. Hannes Roets says

    April 11, 2011 at 9:01 am

    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)

  20. Nicholas says

    April 11, 2011 at 4:18 pm

    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.

  21. Anonymous says

    April 11, 2011 at 4:27 pm

    How about Google Chrome Frame?

  22. Felix Kjäll says

    April 20, 2011 at 11:40 am

    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.

  23. Bratu Sebastian says

    April 28, 2011 at 7:54 am

    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!

  24. Thorsten says

    May 2, 2011 at 4:34 pm

    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.

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Please prove you're human *

Search SpyreStudios

Web Design Jobs

Development & Programming Jobs

Graphic Design Jobs

Computer & IT Jobs

UX Design Jobs

LiquidWeb

Level up professionally!

Coursera - Hundreds of Specializations and courses in business, computer science, data science, and more

Envato

SpyreStudios © 2021