JavaScript polyfill for HTML5 and CSS3 (aka shim or shiv)


Modern Responsive and Responsible Design using HTML5, CSS3 and JavaScript

Web developers are commissioned to build websites for modern browsers today for every type of computer, including phones and tablets.  This is an exciting time to jump on board with a variety of developer tools and learn how to design for the future.  The problems arise when a designer looks at  the website with older Internet Explorer browsers including IE8, IE7 and especially, IE6 because  of the way they respond (or actually do not respond) to HTML5 and CSS3.  It is very important for web designers and developers to understand the problems and to figure out how to work around these issues.  We all want to build for the future, but lets not forget about the viewers who haven’t received the message about the rich internet experiences they can get from Chrome, Safari, Firefox, IE9, etc.

It is easy to forget when you have upgraded equipment and use Windows 7 and several Apple products used for development.

Of course IE9 is the default browser for Windows7 (which you have to purchase), but it also gives developers the ability to view websites in IE8, IE7 and IE6 by using the development tools found in the F12 console.  If you use Dreamweaver CS5.5 or CS6, you can also view your designs in the IE browsers as well as a variety of phones, tablets, Chrome, Safari, etc. by using the Adobe Browserlab developer tools console.

The PhoneGap framework allows developers to build apps and convert the web files into code that runs as a native app on the mobile operating system of your choice.  Dreamweaver comes with the PhoneGap kit and makes packaging apps and testing them simple.  You can compile and test Android, iPhone and iPad apps!

Mobile device development has challenges and opportunities.  Progressive enhancement using CSS3 and HTML5 allow leading designers to build a rich website for tomorrow’s browsers and devices while making sure the older browsers are rendering presentable and enjoyable pages.    It is not enough that a website designer can use Dreamweaver (or any CMS for that matter) to design websites but never look at the code.  The magic is in the code.  The days of copying and pasting are over if you expect to build unique, customized websites.  You have to know what issues surround the different browsers and fix problems as they arise.

 There are two JavaScript codes that have been crafted to help developers work around the Internet Explorer problems.  

1.  A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more).  Here is the link:  https://github.com/scottjehl/Respond.  It works like a charm.

  • Copyright 2011: Scott Jehl, scottjehl.com
  • Dual licensed under the MIT or GPL Version 2 licenses.

The goal of this script is to provide a fast and lightweight (3kb minified / 1kb gzipped) script to enable responsive web designs in browsers that don’t support CSS3 Media Queries – in particular, Internet Explorer 8 and under. It’s written in such a way that it will probably patch support for other non-supporting browsers as well (more information on that soon).

If you’re unfamiliar with the concepts surrounding Responsive Web Design, you can read up here and also here.

Demo page (the colors change to show media queries working)

2.  A frequently used common method is to use the shiv:
<!–[if lt IE 9]> <script src=”html5shiv.js”></script> <![endif]–>
To use this script, download the html5shiv and roll it in to your own code (ideally minified).

Full original, uncompressed source available here: https://github.com/aFarkas/html5shiv

This source code adds new HTML5 elements (which is simple code), but also supports printing HTML5 elements and includes the default styles for HTML5 elements, like block on article and section.

Getting it to work in the browser was easy, @jon_neal and afarkas made IE actually print HTML5 elements – these guys are to take all the credit. Please take a moment to thank them!

Whichever one you use must be included  in the <head> of your file but doesn’t matter if it appears before or after the CSS – but for the sake of performance, it would make better sense to include the CSS first then this script.  Of course, you have to upload the file with your website, or refer the code to an outside source.

shiv or shim?

Common question: what’s the difference between the html5shim and the html5shivAnswer: nothing, one has an m and one has a v – that’s it.  It’s all just polyfill.

Advertisements

One thought on “JavaScript polyfill for HTML5 and CSS3 (aka shim or shiv)

  1. Pingback: CSS3 Selectors | Christina Descalzo

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s