How to use HTML5 on your website today

Don't wait for the Flash-iPhone war to end: InfoWorld's hands-on guide tells you how to get your websites ready for HTML5 now

1 2 3 4 5 Page 3
Page 3 of 5

What HTML5 features you can use soon
Not all of HTML5 is ready for the spotlight, for a variety of reasons (and no, they don't all have the initials "IE"). Browser support is coming, though, and here are two elements that you'll be able to use in the not too distant future.

Fancy fonts. At one point or another, every Web designer has wished that they could force every computer visiting their site to install some favorite font. With the CSS3 @font-face property, you'll have that power. The holdouts here were Firefox (before version 3.5) and Mobile Safari (before iOS 4). If you have enough visitors with those browsers, you may want to hold off for a while.

However, there's no real reason why you should be trying to make every user agent render your site identically when you can just offer different fonts to different browsers. If you want to offer custom fonts to those that can handle them, with fallbacks for those who can't, you'll want to check Font Squirrel's @font-face Generator.

Shadows and curves. Further designer-pleasing features coming down the road are text shadows, box shadows, and radial corners on boxes. Again, if you can handle your sites not rendering in a pixel-perfect identical fashion on every browser, you could start using these today. Here are some examples, with help from the CSS3 Generator.

Rounded borders (Firefox 3+, Safari 3.1+, Opera 10.5+, Chrome 4+, IE 9+):

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

Text shadows (Firefox 3.5+, Safari 1.1+, Opera 9.6+, Chrome 4+):

text-shadow: 5px 5px 3px #CCC;

Box shadows (Firefox 3.5+, Safari 3+, Opera 10.5+, Chrome 4+):

-webkit-box-shadow: 10px 10px 5px #666;
-moz-box-shadow: 10px 10px 5px #666;
box-shadow: 10px 10px 5px #666;
Related:
1 2 3 4 5 Page 3
Page 3 of 5