HTML5/CSS3 Cheatsheet

Here are some simple cut-and-paste examples of HTML5/CSS3 features that are currently (early 2011) usable across a number of web browsers, chief among them Firefox, Safari, Chrome, Opera and the upcoming IE9.

For many of the CSS3 examples, older versions of Internet Explorer are the lone holdout with a limited number of workarounds, however these features degrade gracefully and may still be useful on new projects as long as this limitation is kept in mind.

Please note: With the exception of SVGWeb, no Internet Explorer workarounds have been included on this page - most of the examples will therefore not work in IE6, IE7 or IE8.

And if you want to discuss any of the code below or leave a correction or suggestion, you can leave comments below. Thanks!

Rounded Corners Redux: Circles

So how do you make a round div? If your div has round corners and the corner radius is half the size of your div so that the round corners actually meet,
the effect is that the div now appears round. The example above uses three separate styles for the three different sizes of the circles and inline styles for positioning and color. The CSS below is for
the small circles in the example above, with a div size of 40 pixels and rounded corners of 20 pixels.

Box Shadows

Object shadows work with Firefox, Safari, Chrome, Opera and IE9 Preview. Here is a great tutorial with many more examples for box shadows. There are also severalworkarounds for older versions of Internet Explorer.

Linear Gradient

Gradients are now finally becoming a mainstream feature with the WebKit team's announcement (Jan 2011) of expanded support of the Mozilla flavor of the proposed W3C spec. Be aware that this spec seems
to be currently in need of editors at the WHATWG and while it is now supported identically by Mozilla and WebKit, there is no official specification.

Opera has also announced that they are working on the the gradient spec (developer tweet from October 2010), but we may have to wait for version 12 for the gradient support to surface.

The examples here work in the latest version of Firefox and in the WebKit Nightly Builds (January 2011) - it can be assumed that the next update of Safari will follow along.

Here is a simple linear gradient, browsers default to a top-to-bottom direction:

Transform Rotate

CSS transforms work with Firefox, Safari, Chrome and Opera. This is one of the few new CSS properties where Opera also needs a vendor prefix, and its support is definitely still experimental with markedly limited text quality. For IE, it is possible to add similar effects via matrix filters.

Canvas

Canvas has not been implemented in Internet Explorer up to version 8, however there is excanvas, a JavaScript library that implements most of the canvas functionality in IE. Canvas does work flawlessly in the IE9 Preview as well as in the latest versions of Firefox, Safari, Chrome and Opera.
Here is the inline canvas tag and JavaScript for the example above:

Video

The proposed W3C video tag also includes a <track> element that allows the inclusion of subtitles, however none of the browsers has currently a working implementation of this functionality. If you want to include subtitles, Stories In Flight also hosts the VideoSub library which allows the use of standards-compliant track elements in your videos right now.