SpyreStudios

Web Design and Development Magazine

  • Design
  • Resources
  • 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 24 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.

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

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

Please prove you're human *

Recent Posts

  • How to Choose a Stunning Font Package for Your Brand
  • 31 Fresh Design Elements for Spring and Easter
  • 10 Templates for Music Concert Flyers
  • How to Build a Web Scraper Using Node.js
  • Best PHP Books, Courses and Tutorials in 2022

Archives

  • May 2022
  • April 2022
  • March 2022
  • February 2022
  • January 2022
  • December 2021
  • November 2021
  • October 2021
  • September 2021
  • August 2021
  • July 2021
  • June 2021
  • May 2021
  • April 2021
  • March 2021
  • February 2021
  • January 2021
  • December 2020
  • November 2020
  • October 2020
  • September 2020
  • August 2020
  • July 2020
  • June 2020
  • May 2020
  • April 2020
  • March 2020
  • February 2020
  • January 2020
  • December 2019
  • November 2019
  • October 2019
  • September 2019
  • August 2019
  • July 2019
  • June 2019
  • May 2019
  • April 2019
  • March 2019
  • February 2019
  • January 2019
  • December 2018
  • November 2018
  • October 2018
  • September 2018
  • August 2018
  • July 2018
  • June 2018
  • May 2018
  • April 2018
  • March 2018
  • February 2018
  • January 2018
  • December 2017
  • November 2017
  • October 2017
  • September 2017
  • August 2017
  • July 2017
  • June 2017
  • May 2017
  • April 2017
  • March 2017
  • February 2017
  • January 2017
  • December 2016
  • November 2016
  • October 2016
  • September 2016
  • August 2016
  • July 2016
  • June 2016
  • May 2016
  • April 2016
  • March 2016
  • February 2016
  • January 2016
  • December 2015
  • November 2015
  • October 2015
  • September 2015
  • August 2015
  • July 2015
  • June 2015
  • May 2015
  • April 2015
  • March 2015
  • February 2015
  • January 2015
  • December 2014
  • November 2014
  • October 2014
  • September 2014
  • August 2014
  • July 2014
  • June 2014
  • May 2014
  • April 2014
  • March 2014
  • February 2014
  • January 2014
  • December 2013
  • November 2013
  • October 2013
  • September 2013
  • August 2013
  • July 2013
  • June 2013
  • May 2013
  • April 2013
  • March 2013
  • February 2013
  • January 2013
  • December 2012
  • November 2012
  • October 2012
  • September 2012
  • August 2012
  • July 2012
  • June 2012
  • May 2012
  • April 2012
  • March 2012
  • February 2012
  • January 2012
  • December 2011
  • November 2011
  • October 2011
  • September 2011
  • August 2011
  • July 2011
  • June 2011
  • May 2011
  • April 2011
  • March 2011
  • February 2011
  • January 2011
  • December 2010
  • November 2010
  • October 2010
  • September 2010
  • August 2010
  • July 2010
  • June 2010
  • May 2010
  • April 2010
  • March 2010
  • February 2010
  • January 2010
  • December 2009
  • November 2009
  • October 2009
  • September 2009
  • August 2009
  • July 2009
  • June 2009
  • May 2009
  • April 2009
  • March 2009
  • February 2009
  • January 2009
  • December 2008
  • November 2008
  • October 2008
  • May 2008
  • April 2008

Categories

  • Accessibility
  • Android
  • Apps
  • Art
  • Article
  • Blogging
  • Books
  • Bootstrap
  • Business
  • CSS
  • Design
  • Development
  • Ecommerce
  • Fireworks
  • Flash
  • Freebies
  • Freelance
  • General
  • Giveaway
  • Graphic Design
  • HTML5
  • Icons
  • Illustrator
  • InDesign
  • Infographics
  • Inspirational
  • Interview
  • Jobs
  • jQuery
  • Learning
  • Logos
  • Matrix
  • Minimalism
  • Mobile
  • Motion Graphics
  • Music
  • News
  • Photoshop
  • PHP
  • Promoted
  • Rails
  • Resources
  • Showcase
  • Tools
  • Tutorial
  • Twitter
  • Typography
  • Uncategorized
  • Usability
  • UX
  • Wallpapers
  • Wireframing
  • WordPress
  • Work

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org

SpyreStudios © 2022