Jump to content

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

+ 2
  adfm's Photo
Posted Jan 25 2010 05:23 PM

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:

  • opacity:

  • CSS animations

  • CSS columns

  • CSS gradients

  • CSS reflections

  • CSS 2D transforms

  • CSS 3D transforms

  • CSS transitions

  • Geolocation API

  • @font-face

  • Canvas

  • Canvas text

  • HTML5 audio

  • HTML5 video

  • rgba()

  • hsla()

  • border-image:

  • border-radius:

  • box-shadow:

  • Multiple backgrounds

CSS Cookbook

Learn more about this topic from CSS Cookbook, 3rd Edition.

Learn how to solve the real problems you face with CSS. This cookbook offers hundreds of practical examples for using CSS to format your web pages, and includes code samples you can use right away. You'll find exactly what you need, from determining which aspects of CSS meet the specific needs of your site to methods for resolving differences in the way browsers display it.

See what you'll learn


Tags:
0 Subscribe


0 Replies