How to Deliver HTML5 and CSS3 to Browsers That Can Handle Them

The newest browsers just hitting the market are taking advantage of HTML5 and CSS3. These technologies offer the developer a way to create visually stunning content without using third party plug-ins. If you are ready to serve up some standards compliant goodness to folks savvy enough to run the latest browsers, while still catering to those of us limping along with our old, outdated browsers, then follow this recipe from Christopher Schmitt's CSS Cookbook, Third Edition.

If you want to provide styles that can take advantage of CSS3 properties and provide alternatives to browsers that cannot, download the Modernizr Javascript library at http://www.modernizr.com.

Include a reference to the Modernizr library within the head element:

<script src="modernizr-0.9.min.js"></script>

Then use class selectors to have specific CSS3 properties applied to browsers that can render them:

h1 {

 background-color: #333;

 color: #fff;

}

<span class="strong"><strong>.</strong></span><strong class="userinput"><code>rgba</code></strong> h1 {

 background-color: rgba(0,0,0, .8);

}

For HTML5, use a similar approach. First, mark up HTML5 elements such as an audio element:

<audio>

 <source src="example.ogg" />

 <source src="example.mp3" />

</audio>

Then apply CSS rules to hide the audio element for browsers that do not support it:

.no-audio audio {

 display: none;

}

Although development of new features and abilities within browsers is welcomed, there are some hassles. As browsers start to implement HTML5 and CSS3 standards at a rapid pace, dealing with uneven support of CSS3 and HTML5 across modern browsers becomes an issue.

Web designers Faruk Ateş and Paul Irish created this simple Javascript library that allows for basic cross-browser development.

As of this writing, Modernizr checks for the following HTML5 and CSS3 features: