Here are some simple cut-and-paste examples of HTML5/CSS3 features that are currently (early 2010) usable across a number of web browsers, chief among them Firefox, Safari, Chrome and Opera.
For many of the CSS3 examples, Internet Explorer is 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.
Both for SVG and Canvas there exist solid workarounds in the form of JavaScript libraries that allow even Internet Explorer to display these new objects, and in the case of SVGweb it may be a good idea to use this workaround for all browsers to limit the variability of the SVG rendering across platforms.
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 IE.
And if you want to discuss any of the code below or leave a correction or suggestion, you can leave comments below and here is also The Web We Should Have on my blog. Thanks!
HTML5 DOCTYPE
Rounded Corners
Rounded corners work with Firefox, Safari and Chrome. Here is a workaround for IE (not implemented here).
CSS:
width: 300px;
background-color: #cccccc;
border: 1px solid #999999;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding: 15px 15px 15px 15px;
Box Shadows
Object shadows work with Firefox, Safari and Chrome. Here is a great tutorial with many more examples for box shadows. There are also several workarounds for Internet Explorer.
CSS:
width: 300px;
background-color: #cccccc;
border: 1px solid #999999;
box-shadow: 3px 3px 3px #aaaaaa;
-moz-box-shadow: 3px 3px 3px #aaaaaa;
-webkit-box-shadow: 3px 3px 3px #aaaaaa;
padding: 15px 15px 15px 15px;
Text Shadows
Shadows work with Firefox, Safari and Chrome. There are workarounds for Internet Explorer.
CSS:
text-shadow: #666666 2px 2px 4px;
Border Images
Border images work currently only with Firefox, Safari and Chrome. Here are some further examples.
Image:
CSS:
width: 300px;
padding: 15px 15px 15px 15px;
color: #ffffff;
border-width: 10px;
border-image: url('../images/roundedcorner.png') 20 20 20 20 stretch stretch;
-moz-border-image: url('../images/roundedcorner.png') 20 20 20 20 stretch stretch;
-webkit-border-image: url('../images/roundedcorner.png') 20 20 20 20 stretch stretch;
Transform Rotate
CSS transforms work with Firefox, Safari and Chrome. For IE, it is possible to add similar effects via matrix filters.
CSS:
margin: 50px 0 50px 0;
width: 200px;
transform: rotate(30deg);
-moz-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
Column Layout
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae velit tortor, ac dictum eros. Phasellus ut ante ante, a lacinia est. Suspendisse quis velit vitae ligula aliquet porta eget in diam.
Proin nunc velit, fringilla eget pretium ut, ultricies at enim. Cras molestie sem ac dui ornare in accumsan nisi dapibus. Aliquam ac molestie neque. Nam auctor leo nec augue sollicitudin eget mattis enim auctor. Curabitur suscipit elementum turpis, quis facilisis lectus ullamcorper placerat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi mi mauris, ornare at tincidunt eu, pretium mollis turpis. Curabitur interdum facilisis dapibus. Curabitur tortor augue, varius vel tempus in, fermentum nec est.
Etiam in nulla sit amet justo luctus faucibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Fusce condimentum eros ultrices turpis dictum ultricies. Donec velit dui, ultrices eu mattis in, pretium blandit nibh. Sed id elit in justo condimentum fermentum. Nam iaculis massa sed nulla tincidunt consectetur. Cras rutrum blandit felis, vel pulvinar massa tristique nec. Mauris vitae justo ut nisl adipiscing molestie eu vitae ligula. Curabitur accumsan vehicula tellus eu dignissim. Proin eleifend vehicula vestibulum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus suscipit condimentum mollis. Mauris urna nisi, viverra quis accumsan at, faucibus ac dolor. Sed pharetra, leo eget imperdiet aliquam, tellus elit ullamcorper quam, vel cursus libero urna at sapien. Quisque vitae mi eu arcu congue lobortis at at lorem. Quisque varius bibendum felis, id consequat lorem blandit at. Nullam feugiat lorem eget urna egestas in vehicula mi elementum. Cras congue pretium nunc non iaculis.
Proin ut ligula metus, eget porttitor erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut at elit id elit congue sodales et tincidunt velit. Nunc in massa egestas tortor blandit tempus. Sed dapibus congue lobortis. Duis nec nisi id nisi molestie placerat ut ut lorem. Nunc eget sem id lorem ultricies accumsan at quis ante.
Fusce hendrerit odio cursus odio vulputate quis aliquam odio tristique. Nam semper lobortis mattis. Aliquam erat volutpat. Sed orci enim, sagittis in porttitor eu, feugiat lacinia nunc. Aliquam vel aliquet urna. Cras sit amet enim eget sapien tincidunt lacinia. Nunc vel dui a purus pretium venenatis. Quisque et turpis elit.
Column Layout is supported in Safari and Firefox. This degrades gracefully on other browsers by reverting to a standard one column layout.
CSS:
width: 600px;
padding: 15px 15px 15px 15px;
-webkit-column-count: 2;
-webkit-column-gap: 30px;
-moz-column-count: 2;
-moz-column-gap: 30px;
SVG
Universal support for inline SVG in HTML 5 with SVGweb on all modern browsers and IE.
Safari, Chrome and Firefox render the SVG code natively, IE uses the SVGweb Flash renderer. There are minor implementation differences, for instance Safari does currently (1/5/10) not yet support Gaussian Blur.
Inline SVG code (script tag enclosure is necessary for the SVGweb library which has to be included in the page):
<script type="image/svg+xml">
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:svg="http://www.w3.org/2000/svg"
version="1.1"
viewBox="0 0 300 150"
style="width:300px;height:150px;background-color: #cccccc; display: block; border: 1px #999999 solid;">
<defs>
<filter id="Gaussian_Blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="4"></feGaussianBlur>
</filter>
</defs>
<g transform="translate(10,0)">
<rect x="180" y="80" width="100" height="30" fill="#666666" filter="url(#Gaussian_Blur)"></rect>
<circle id="myCircle"
cx="230" cy="115" r="25"
fill="#666666" filter="url(#Gaussian_Blur)"></circle>
<rect x="30" y="15" width="200" height="60" rx="15" ry="15" stroke-width="2px" fill="#000088"></rect>
<circle id="myCircle"
cx="130" cy="85" r="50"
fill="#0088ff"
stroke="#880000"
stroke-width="3"></circle>
<text x="98" y="90">Hello World</text>
</g>
</svg>
</script>
Canvas
Canvas has not been implemented in Internet Explorer, however there is excanvas, a JavaScript library that implements most of the canvas functionality in IE.
Here is the inline canvas tag and JavaScript for the example above:
<canvas id="demoCanvas" width="300" height="150"></canvas>
<script type="text/javascript">
var canvas, graphics;
function draw_init() {
canvas = document.getElementById('demoCanvas');
if (canvas.getContext) {
graphics = canvas.getContext('2d');
}
draw();
}
function draw() {
var theme = ["#10222B","#95AB63","#BDD684","#E2F0D6","#F6FFE0"];
var x = Math.random() * 300;
var y = Math.random() * 150;
var size = (Math.random() * 100) + 20;
var num_circles = (Math.random() * 10) + 2;
for (var i = size; i > 0; i-= (size/num_circles)) {
graphics.fillStyle = theme[ (Math.random() * 5 >> 0)];
graphics.beginPath();
graphics.arc(x, y, i * .5, 0, Math.PI*2, true);
graphics.closePath();
graphics.fill();
}
t = setTimeout('draw()',1000);
}
draw_init();
</script>
Canvas Text
The new fillText and strokeText canvas functions work with all fonts installed on the machine (unfortunately there is still no font download):
<canvas id="textCanvas" width="600" height="150"></canvas>
<script type="text/javascript">
var textcanvas, textgraphics;
function textdraw_init() {
textcanvas = document.getElementById('textCanvas');
if (textcanvas.getContext){
textgraphics = textcanvas.getContext('2d');
}
textdraw();
}
function textdraw() {
var texttheme = ["#004488","#0066aa","#0088cc","#00aaee","#00ccff"];
var textfont = ["Arial","Times New Roman","Comic Sans MS","Papyrus","Baskerville"];
var x = Math.random() * 600;
var y = Math.random() * 150;
var size = (Math.random() * 50) + 10;
textgraphics.font = size+"px '"+textfont[ (Math.random() * 5 >> 0)]+"'";
if (Math.random() > .5) {
textgraphics.fillStyle = texttheme[ (Math.random() * 5 >> 0)];
textgraphics.fillText("Sample String", x, y);
} else {
textgraphics.strokeStyle = texttheme[ (Math.random() * 5 >> 0)];
textgraphics.strokeText("Sample String", x, y);
}
t = setTimeout('textdraw()',950);
}
textdraw_init();
</script>
Canvas Text Rotate (via transform)
Here is an example of rotating text in a canvas with the canvas.transform method:
<canvas id="fxtextCanvas" width="600" height="150"></canvas>
<script type="text/javascript">
var fxtextcanvas, fxtextgraphics;
function fxtextdraw_init() {
fxtextcanvas = document.getElementById('fxtextCanvas');
if (fxtextcanvas.getContext){
fxtextgraphics = fxtextcanvas.getContext('2d');
}
fxtextdraw();
}
function fxtextdraw() {
fxtextgraphics.font = "16px 'Arial'";
var sin = Math.sin(Math.PI/6);
var cos = Math.cos(Math.PI/6);
fxtextgraphics.translate(300, 70);
var c = 0;
for (var i=0; i < 12; i++) {
c = Math.floor(255 / 12 * i);
fxtextgraphics.fillStyle = "rgb(" + c + "," + c + "," + c + ")";
fxtextgraphics.fillText("Sample String", 5, 30);
fxtextgraphics.transform(cos, sin, -sin, cos, 0, 0);
}
}
fxtextdraw_init();
</script>
HTML5 documents have a much simpler doctype definition. This doctype kicks all current browser engines into standards mode (vs. quirks mode) and is the recommended W3C doctype for modern HTML.