What are you waiting for? Use HTML5 and CSS3 today

Over the past year I’ve talked to many people about HTML5 and one of the most common objections for not using it is… well HTML5 isn’t really ready yet.

This is categorically not true.

Numerous browsers including IE9 Beta support many HTML5 and CSS3 features today and there is no reason why you can’t start using them in your web projects today.

Of course just throwing HTML5 elements all over your site isn’t wise, if you are going to use HTML5 or CSS3 then you need to be smart about the way you engineer your pages so that you don’t mess up the experience for people using older browsers.

Luckily there is a tool that can help with this and it’s called Modernizr.

Modernizr is a JavaScript Library that allows you to test browser capabilities, allowing you to write code to cater for those capabilities.

For example, if you wanted to replace a flash video on your site with a HTML5 video tag then you could:

  • add the flash video to your site,
  • use Modernizr to test if the browser supports the HTML5 video tag,
  • if it does, replace the flash element with a video element using JavaScript.

Modernizr is easy to set up

Step 1 – Add the script element to the head of your document

Download Modernizr then link to the file in the head portion of your website.

<script src="Scripts/modernizr-1.6.min.js" type="text/javascript"></script>

Step 2 – Add the class “no-js” to the HTML element

<html class="no-js">

Step 3 – You can then use the JavaScript object to test for features

In the example below, we not only test to see if the browser supports HTML5 video, we also test to see which codec it supports.

if (Modernizr.video && Modernizr.video.ogg){ // load ogg video assets } else if (Modernizr.video && Modernizr.video.h264){ // load h264 assets } else{ // do something to handle fallback for older broswers }

Modernizr allows you to do a lot of cool things directly in your CSS too without writing one line of JavaScript. To find out more, take a look at the documentation here.

If your looking of a way to support HTML5 video but you are not comfortable with JavaScript, you might want to take a look at the video for everybody project which uses Modernizr but doesn’t require you to write JavaScript.

Published by thebeebs

Thebeebs is a Canadian pop singer, songwriter, actor and HTML5 junkie. Throughout his rise to fame, Thebeebs has been nominated and awarded numerous accolades, winning Artist of the Year at the 2010 American Music Awards, and being nominated for Best New Artist and Best Pop Vocal Album at the 53rd Grammy Awards. Thebeebs is considered a teen idol, and has been subject to acclaim from fans, as well as criticism and controversy from matters concerning his popularity and image.

2 Comments So Far, what do you think?

  1. Pingback:Tweets that mention Underbelly » What are you waiting for? Use HTML5 and CSS3 today -- Topsy.com

  2. Pingback:Underbelly » Google Drops H.264 codec support

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>