The newest internet buzz is HTML5 and CSS3. But not all browsers support it, that’s where Modernizr comes in.
HTML5 comes with a whole bunch of changes and updates to HTML4. Most of them are just new elements to better format your webpages, for example article, header, footer, nav etc. But if Internet Explorer doesn’t know about an element, it simple will ignore it. So if you place your menu inside a nav element, by default Internet Explorer will not show your menu. But with a little piece of Javascript you can tell IE about these new element types and they will magically appear
document.createElement("nav");
Doing this for all the HTML5 element types would be tedious and you may miss a few, so by using modernizr this is done for you.
So now you can begin to use HTML5 syntax and elements in your web site designs.
This is the web page skeleton code I’m currently using on my web sites
<!DOCTYPE html> <!--[if lt IE 7 ]> <html class="ie ie6 lte9 lte8 lte7 no-js"> <![endif]--> <!--[if IE 7 ]> <html class="ie ie7 lte9 lte8 lte7 no-js"> <![endif]--> <!--[if IE 8 ]> <html class="ie ie8 lte9 lte8 no-js"> <![endif]--> <!--[if IE 9 ]> <html class="ie ie9 lte9 no-js"> <![endif]--> <!--[if (gt IE 9)|!(IE)]><!--> <html class="notie no-js"> <!--<![endif]--> <head> <title>Page Title</title> <script src="modernizr.js"></script> <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script> </head> <body> <div id="wrapper"> <header> Site Name <nav> <ul id="menu"></ul> </nav> </header> <div id="main"> <aside id="leftcontent"> left content, eg menu </aside> <div id="content"> the main site content </div> </div> <footer> Copyright information </footer> </div> </body> </html>
You’ll notice I’m still using div elements, you will still need them. But I’m using aside, footer, header, nav where I can. This will help Search Engine Optimisation (SEO) as it will structure your content better and search bots will better understand it. You may also notice I’m still using a ul for the menu inside the nav, this is because nav is basically just the container, you still need the ul to list your menu items. Also I’m using Paul Irish’s trick to tell my CSS if the client is IE and if so what version it is, this removes the need for CSS hacks and will always work even if Javascript is disabled. The “no-js” class is the default class you add for modernizr, which will be removed once it’s run. It basically lets your CSS know if Javascript is disabled in the browser, and if it is you may format your document differently.
Modernizr won’t magically make a web browser support the new elements like video or canvas, but it will add classes to your document html tag so you can easily tell what works and what doesn’t work. This is really helpful in your CSS and Javascript. You can create custom rules for supported or non-supported features. Modernizr also will detect if the browser supports most of the CSS3 features. For example here is what your head may look like after modernizr has run.
<html class="notie js canvas canvastext geolocation crosswindowmessaging no-websqldatabase no-indexeddb hashchange no-historymanagement draganddrop no-websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow opacity no-cssanimations csscolumns cssgradients no-cssreflections csstransforms no-csstransforms3d no-csstransitions video audio localstorage sessionstorage webworkers applicationcache svg no-smil svgclippaths fontface"> <head> </head> <body> </body> </html>
As you can see this particular browser supports canvas, geolocation, border radius, box shadow, opacity, video, RGBA and it does not support css transitions, 3d transforms and reflections among others. These are extremely helpful to your CSS and your Javascript since all you need to do is check if the class is added to the html element to see if a feature you want to use is supported.
So in your CSS you may have
.multiplebgs div p {
/* properties for browsers that
support multiple backgrounds */
}
.no-multiplebgs div p {
/* optional fallback properties
for browsers that don't */
}
And in your Javascript you may have
if($("html.canvas")) {
// do something with a canvas
} else {
// fallback to another method of drawing
}
Like I said, modernizr doesn’t magically make a browser support HTML5 or CSS3, but it will make a browser render most of the elements (it won’t do canvas or video etc) and it will help you test in your CSS and Javascript if a feature is available in the browser.
The only problem I have come across with modernizr, is when it’s working out if fonts are supported, it will make my webpage about 100px taller and my bottom background doesn’t stretch for a few seconds, once that is done, the document is shrunk again and my website looks fine. Just a small problem.
For a 5KB download you really should start using this in your web site designs as the benefits clearly out way the small download.
Pingback: Tweets that mention HTML5, CSS3 and Modernizr | reven -- Topsy.com