1、CSS3 media queries
目前，大量智能手机设备的涌现，同时各种不同尺寸屏幕的设备，如平板电脑之类的出现，对 Web 开发带来了前所未有的挑战，如何让 Web 页面能适应各种尺寸的屏幕让很多 Web 开发人员相当的纠结。幸运的是 CSS3 规范可帮我们轻松的解决此事，你可以根据不同尺寸的屏幕定义不同的 CSS 样式。
例如，下面的代码只在屏幕显示区域大小为 767px 的时候才有效：
@mediascreen and (max-width:767px){ #container{ width:320px; } header h1#logo a{ width:320px; height:44px; background:url(image-small.jpg) no-repeat 00; } } |
2、Font resizing with REMs
CSS3 引入新的字体尺寸单位 rem (root rm)
em 单位是相对于父节点的 font-size ，会有一些组合的问题，而 rem 是相对于根节点（或者是 html 节点），意思就是说你可以在 html 节点定义一个单独的字体大小，然后所有其他元素使用 rem 相对于这个字体的百分比进行设置。
html62.5%;} body { font-size: 1.4rem;}/* =14px */ h1 { font-size: 2.4rem;}/* =24px */ |
3、Cache pages for offline usage
HTML5 引入了一个强大的特性：离线缓存。该特性可让你告诉浏览器缓存某些页面，使得用户可以在离线的情况下再次访问该页面。
要缓存页面非常简单，首先在你网站的 .htaccess 文件中添加如下一行：
AddType |
然后你可创建一个文件如 offline.manifest ，包含如下内容：
CACHE CACHE index.html style.css image.jpg |
最后，在 html 节点中增加：
<html"/offline.manifest"> |
4、Server-side JavaScript
JavaScript 现在已经是非常流行的 Web 客户端编程语言了，但 JavaScript 也越来越多的出现在服务器端了，通过强大的 JavaScript 服务器端环境：Jaxer、Node.js 和 Narwhal。
下面代码显示如何用 Node.js 创建一个简单的 Hello World 程序：
var"sys"); sys.puts("Hello World!"); |
5、HTML5 drag & drop
HTML5 让网页上的拖放变得非常简单，我们只需要简单的定义 draggable="true" 属性即可，如下所示：
<div"columns"> <divclass="column"draggable="true"><header>A</header></div> <divclass="column"draggable="true"><header>B</header></div> <divclass="column"draggable="true"><header>C</header></div> </div> |
有了这些 draggable=true 的元素，我们只需要编写一些简单的 JavaScript 代码来处理拖放，这里不再详细描述处理过程。
提示：如果你希望阻止可拖放元素被选中，可使用以下 CSS 规则：
[draggable] -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; user-select: none; } |
6、Forms, the HTML5 way
HTML5 规范在表单定义方面引入很多新特性，包含很多新的表单组件，例如日期选择、数字调整、使用正则表达式对输入框进行验证等等（email、tel、link）。
下面代码显示了一些新的表单元素：
<form> <labelfor="range-slider">Slider</label> <input type="range"name="range-slider"id="range-slider"class="slider"min="0"max="20"step="1"value="0"> <labelfor="numeric-spinner">Numeric spinner</label> <input type="number"name="numeric-spinner"id="numeric-spinner"value="2"> <labelfor="date-picker">Date picker</label> <input type="date"name="date-picker"id="date-picker"value="2010-10-06"> <labelfor="color-picker">Color picker</label> <input type="color"name="color-picker"id="color-picker"value="ff0000"> <labelfor="text-field">Text field with placeholder</label> <input type="text"name="text-field"id="text-field"placeholder="Insert your text here"> <labelfor="url-field">Url field</label> <input type="url"id="url-field"name="url-field"placeholder="<a href="http://net.tutsplus.com/" "="" style="outline: none; text-decoration: none; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.2em !important; margin: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; font-size: 1em !important; min-height: inherit !important; color: rgb(0, 51, 102) !important; background: none !important;">http://net.tutsplus.com/"required> <labelfor="email-field">Email field</label> <input type="email"id="email-field"name="email-field"placeholder="contact@ghinda.net"required> <button type="submit"class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button"aria-disabled="false"> <spanclass="ui-button-text">Submit form</span> </button> </form> |
7、CSS animations
很多现在的浏览器都支持 CSS 动画，是的，CSS 已经允许你创建一些简单的动画，而无需 JavaScript 的支持。
下面代码显示如何让背景色改变：
#logo margin: 15px 15px 015px; background: red; float: left; /* Firefox 4+ */ -moz-animation-name: colour-change; -moz-animation-timing-function: linear; -moz-animation-iteration-count: infinite; -moz-animation-duration: 30s; /* Webkit */ -webkit-animation-name: colour-change; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -webkit-animation-duration: 30s; } @-moz-keyframes colour-change { 0% { background: red; } 33% { background: green; } 66% { background: blue; } } @-webkit-keyframes colour-change { 0% { background: red; } 33% { background: green; } 66% { background: blue; } } |
附：各浏览器的Hack写法http://www.w3cplus.com/css/create-css-browers-hacks
1、CSS3 media queries
目前，大量智能手机设备的涌现，同时各种不同尺寸屏幕的设备，如平板电脑之类的出现，对 Web 开发带来了前所未有的挑战，如何让 Web 页面能适应各种尺寸的屏幕让很多 Web 开发人员相当的纠结。幸运的是 CSS3 规范可帮我们轻松的解决此事，你可以根据不同尺寸的屏幕定义不同的 CSS 样式。
例如，下面的代码只在屏幕显示区域大小为 767px 的时候才有效：
@mediascreen and (max-width:767px){ #container{ width:320px; } header h1#logo a{ width:320px; height:44px; background:url(image-small.jpg) no-repeat 00; } } |
2、Font resizing with REMs
CSS3 引入新的字体尺寸单位 rem (root rm)
em 单位是相对于父节点的 font-size ，会有一些组合的问题，而 rem 是相对于根节点（或者是 html 节点），意思就是说你可以在 html 节点定义一个单独的字体大小，然后所有其他元素使用 rem 相对于这个字体的百分比进行设置。
html62.5%;} body { font-size: 1.4rem;}/* =14px */ h1 { font-size: 2.4rem;}/* =24px */ |
3、Cache pages for offline usage
HTML5 引入了一个强大的特性：离线缓存。该特性可让你告诉浏览器缓存某些页面，使得用户可以在离线的情况下再次访问该页面。
要缓存页面非常简单，首先在你网站的 .htaccess 文件中添加如下一行：
AddType |
然后你可创建一个文件如 offline.manifest ，包含如下内容：
CACHE CACHE index.html style.css image.jpg |
最后，在 html 节点中增加：
<html"/offline.manifest"> |
4、Server-side JavaScript
JavaScript 现在已经是非常流行的 Web 客户端编程语言了，但 JavaScript 也越来越多的出现在服务器端了，通过强大的 JavaScript 服务器端环境：Jaxer、Node.js 和 Narwhal。
下面代码显示如何用 Node.js 创建一个简单的 Hello World 程序：
var"sys"); sys.puts("Hello World!"); |
5、HTML5 drag & drop
HTML5 让网页上的拖放变得非常简单，我们只需要简单的定义 draggable="true" 属性即可，如下所示：
<div"columns"> <divclass="column"draggable="true"><header>A</header></div> <divclass="column"draggable="true"><header>B</header></div> <divclass="column"draggable="true"><header>C</header></div> </div> |
有了这些 draggable=true 的元素，我们只需要编写一些简单的 JavaScript 代码来处理拖放，这里不再详细描述处理过程。
提示：如果你希望阻止可拖放元素被选中，可使用以下 CSS 规则：
[draggable] -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; user-select: none; } |
6、Forms, the HTML5 way
HTML5 规范在表单定义方面引入很多新特性，包含很多新的表单组件，例如日期选择、数字调整、使用正则表达式对输入框进行验证等等（email、tel、link）。
下面代码显示了一些新的表单元素：
<form> <labelfor="range-slider">Slider</label> <input type="range"name="range-slider"id="range-slider"class="slider"min="0"max="20"step="1"value="0"> <labelfor="numeric-spinner">Numeric spinner</label> <input type="number"name="numeric-spinner"id="numeric-spinner"value="2"> <labelfor="date-picker">Date picker</label> <input type="date"name="date-picker"id="date-picker"value="2010-10-06"> <labelfor="color-picker">Color picker</label> <input type="color"name="color-picker"id="color-picker"value="ff0000"> <labelfor="text-field">Text field with placeholder</label> <input type="text"name="text-field"id="text-field"placeholder="Insert your text here"> <labelfor="url-field">Url field</label> <input type="url"id="url-field"name="url-field"placeholder="<a href="http://net.tutsplus.com/" "="" style="outline: none; text-decoration: none; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.2em !important; margin: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; font-size: 1em !important; min-height: inherit !important; color: rgb(0, 51, 102) !important; background: none !important;">http://net.tutsplus.com/"required> <labelfor="email-field">Email field</label> <input type="email"id="email-field"name="email-field"placeholder="contact@ghinda.net"required> <button type="submit"class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button"aria-disabled="false"> <spanclass="ui-button-text">Submit form</span> </button> </form> |
7、CSS animations
很多现在的浏览器都支持 CSS 动画，是的，CSS 已经允许你创建一些简单的动画，而无需 JavaScript 的支持。
下面代码显示如何让背景色改变：
#logo margin: 15px 15px 015px; background: red; float: left; /* Firefox 4+ */ -moz-animation-name: colour-change; -moz-animation-timing-function: linear; -moz-animation-iteration-count: infinite; -moz-animation-duration: 30s; /* Webkit */ -webkit-animation-name: colour-change; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -webkit-animation-duration: 30s; } @-moz-keyframes colour-change { 0% { background: red; } 33% { background: green; } 66% { background: blue; } } @-webkit-keyframes colour-change { 0% { background: red; } 33% { background: green; } 66% { background: blue; } } |
附：各浏览器的Hack写法http://www.w3cplus.com/css/create-css-browers-hacks