不是所有的HTML5元素都已经准备好可以使用了，因为种种原因（这些原因是没有一个缩写为 IE 的），浏览器支持马上就要来了，在不远的未来，你马上就有两个元素可以使用了。

魔幻字体，每个设计师都有一个梦想，希望站点的访问者们都安装了他们在设计时所需要的字体，为此，以前可谓手段百出，用图片，Flash等等不一而足，现在，他们拥有了这个权利，你可以强制你的访问者安装你指定的字体了。这就是CSS3的支持： @font-face属性。Firefox 3.5以前的版本和Safari的移动版本（iOS 4之前）不支持这个属性，如果你的站点有很多这样类似的访问，那么你可能就得等等了。

无论如何，其实没有真正的理由，让所有的浏览器都使用同一种字体的。如果你想提供给那些支持此属性的浏览器以自定义字体，然后让不支持此属性的浏览器有一个可替代的字体也是一个不错的解决方案，这个时候，http://www.fontsquirrel.com/fontface/generator 是个不错的去处。

阴影和圆角，让很多设计师高兴的东西来了，文本阴影、区块阴影，区块圆角特性等现在都CSS3支持的标准了。再说一次，如果你不想用像素级别的完美来衡量在不同浏览器中的渲染的话，那么你现在就可以开始使用这些特性了。CSS3 生成器 会帮助你做好这事。

圆角 (Firefox 3+, Safari 3.1+, Opera 10.5+, Chrome 4+, IE 9+)

1
2
3

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

文本阴影 (Firefox 3.5+, Safari 1.1+, Opera 9.6+, Chrome 4+)

1

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

区块阴影(Firefox 3.5+, Safari 3+, Opera 10.5+, Chrome 4+):

1
2
3

-webkit-box-shadow: 10px 10px 5px #666; 
-moz-box-shadow: 10px 10px 5px #666; 
box-shadow: 10px 10px 5px #666;

哪些特性有一天你会用到？

这个目录里包含了开发人员和设计师已经想了很多年的特性。可惜的是，在它们能够在现实世界真正使用之前，可能还得再等上几年时间。

智能表单，前面已经提到过了，但是其实还有很多更好用的元素没有提及，但在更广泛的支持之前，是没有办法使用的。

滑动选择器：

1
2

<input type="range" min="0" max="100"
 step="2" value="50">

颜色选择器：

1

<input type="color">

日期选择器：

1

<input type="date">

带有正则验证的输入框：

1

<input type="text" pattern="[0-9]{13,16}">

必须输入的输入框：

1

<input type="text" required>

所有这些标签都没有跨浏览器，跨平台实现支持，不过当那天到来的时候，你一定会很向往使用这些标签的。

打印式布局，另一个CSS3的特性，全面实施尚需好几年的时间。给设计师们提供了多列布局的特性。目前只能在Firefox和Safari的测试用例里实现。

1
2
3
4

-moz-column-count: 3; 
-moz-column-gap: 20px; 
-webkit-column-count: 3; 
-webkit-column-gap: 20px;

地理位置检测，随着基于位置的服务增长，例如Gowalla和Foursquare，对于浏览器来说，知道用户在哪里是很有用的。所以，基于手机的移动浏览器率先实现这个特性也就不足为奇了，Firefxo 3.5和Safari 5已经开始提供地理定位的支持了。(Chrome的类似服务是通过Gears实现的，不过正在逐步转向到HTML5上面）。

离线工作和本地存储，在你没发现你没有网络连接的时候，将数据存储在云端是非常伟大的主意；或者你有一个应用程序，需要处理大量的数据，这样就不得不频繁地在服务端和客户端之间往来，比你想像得到的还要多；又或者你的移动数据流量有限，你想在手机上存储更多的数据以避免太多的流量损耗，这个时候的答案就是，使用本地储存来使应用程序离线工作，当连线的时候再同步到云端的功能。

支持此功能的浏览器有：Firefox 3.5+, Safari Mobile 3.1+, Safari 4+, Chrome 4+。

画板、动画和变换效果，HTML5的承诺之一使用Canvas元素和一些CSS3属性可以实现是全说明和全动画的网站。这来自2010年7月12号的标准。

绿色=已实现，红色=没有已经计划

使用最尖端的HTML5的捷径

如果你已经迫不及待地想IE8老死掉，那么，有很多种方法可以跳过它继续往前——再说一次，依然取决于你的访客。查看一下你的站点的访问日志，看看访问量最多的浏览器标头是什么。这其中有一种方法就是，例如，使用Google的Chrome Frame，给IE嵌入了一个Chrome实例，如果你明白你站点的访问者可能已经安装了GCF[Google Chrome Frame]，那么你可以在你的HEAD里加上一行META标签，强制IE浏览器使用GCF来显示你的网站：

1

<meta http-equiv="X-UA-Compatible" content="chrome=1">

编者：不过提醒你的就是，这样做会使得原来的IE=7的IE7兼容模式失效，如果选择请自己权衡。］

再加上一小段的Google提供的脚本，可以让没有安装GCF的用户跳转到GCF的安装页面，那么你也许可以跳过IE的限制。[编者：我疯了，怎么看怎么像是免费为GCF打广告来带来免费流量……]

列举在本篇文章里的元素只是当前HTML5和CSS3草案中的一小部分，如果你不得不使用另外的一些新特性，那么去检查一下现有的开源项目是很有必要的，这样可以将浏览器兼容性的问题降到最低。

许多媒体在报道HTML的时候都把焦点放在立场上面，什么“不到2022年”，什么“Flash杀手”之类的。现实是，HTML5是长期以来的需要和对久未更新的HTML4的一次全新升级——所以，今天你就可以开始使用它了。

原文出处：Infoworld