Modernizing Scripts Every Web Designer and Developer Should Use




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.





Comments:

Scroll back to the top