7项Web开发者需要了解的新技术（转自：http://sd.csdn.net/a/20110920/304652.html）

Web开发者需要经常更新他们的知识，学习新的技术，如果他们还想继续在Web开发领域混并混得还不错的话。下面将为你展示7项新的Web开发技术，作为一个Web开发人员，你需要了解、熟悉并学会的技术。

1.CSS3 media queries

目前，大量的智能手机设备的涌现，同时各种不同尺寸屏幕的设备，如平板电脑之类的出现，对Web开发带来了前所未有的挑战，如何让Web页面能适应各种尺寸的屏幕让很多Web开发人员相当的纠结。幸运的是CSS3规范可帮我们轻松的解决此事，你可以根据不同尺寸的屏幕定义不同的CSS样式。

例如，下面的代码只在屏幕显示区域大小为767px的时候才有效：

1. @mediascreenand(max-width:767px){
2. #container{
3. width:320px;
4. }
6. headerh1#logoa{
7. width:320px;
8. height:44px;
9. background:url(image-small.jpg)no-repeat00;
10. }
12. }

更详细的信息请阅读：Create an adaptable website layout with CSS3 media queries

2.Font resizing with REMs

CSS3引入新的字体尺寸单位 rem (root rm)

em单位是相对于父节点的font-size，会有一些组合的问题，而rem是相对于根节点（或者是html节点），意思就是说你可以在html节点定义一个单独的字体大小，然后所有其他元素使用rem相对于这个字体的百分比进行设置。

1. html{font-size:62.5%;}
2. body{font-size:1.4rem;}/*=14px*/
3. h1{font-size:2.4rem;}/*=24px*/

更多关于rem的内容请看：Font resizing with REMs

3.Cache pages for offline usage

HTML5引入了一个强大的特性：离线缓存。该特性可让你告诉浏览器缓存某些页面，使得用户可以在离线的情况下再次访问该页面。

要缓存页面非常简单，首先在你网站的.htaccess文件中添加如下一行：

1. AddTypetext/cache-manifest.manifest

然后你可创建一个文件如offline.manifest，包含如下内容：

1. CACHEMANIFEST
3. CACHE
4. index.html
5. style.css
6. image.jpg

最后，在html节点中增加：

1. <htmlmanifest="/offline.manifest">

就这么多。

更多信息请阅读：How to create offline HTML5 web apps in 5 easy steps

4.Server-side JavaScript

JavaScript现在已经是非常流行的Web客户端编程语言了，但JavaScript也越来越多的出现在服务器端了，通过强大的JavaScript服务器端环境：Jaxer, Node.js and Narwhal.

下面代码显示如何用Node.js创建一个简单的Hello World程序

1. varsys=require("sys");
2. sys.puts("HelloWorld!");

更详细内容请阅读：Learning Server-Side JavaScript with Node.js

5.HTML5 drag & drop

HTML5让网页上的拖放变得非常简单，我们只需要简单的定义 draggable="true" 属性即可，如下所示：

有了这些draggable=true的元素，我们只需要编写一些简单的JavaScript代码来处理拖放，这里不再详细描述处理过程，如果你感兴趣，可以阅读这里。

提示：如果你希望阻止可拖放元素被选中，可使用以下 CSS 规则：

1. [draggable]{
2. -moz-user-select:none;
3. -khtml-user-select:none;
4. -webkit-user-select:none;
5. user-select:none;
6. }

更多信息请阅读：Cross Browser HTML5 Drag and Drop

6.Forms，the HTML5 way

HTML5 规范在表单定义方面引入很多新特性，包含很多新的表单组件，例如日期选择、数字调整、使用正则表达式对输入框进行验证等等（email、tel、link）

下面代码显示了一些新的表单元素：。

1. <form>
2. <labelfor="range-slider">Slider</label>
3. <inputtype="range"name="range-slider"id="range-slider"class="slider"min="0"max="20"step="1"value="0">
5. <labelfor="numeric-spinner">Numericspinner</label>
6. <inputtype="number"name="numeric-spinner"id="numeric-spinner"value="2">
8. <labelfor="date-picker">Datepicker</label>
9. <inputtype="date"name="date-picker"id="date-picker"value="2010-10-06">
11. <labelfor="color-picker">Colorpicker</label>
12. <inputtype="color"name="color-picker"id="color-picker"value="ff0000">
14. <labelfor="text-field">Textfieldwithplaceholder</label>
15. <inputtype="text"name="text-field"id="text-field"placeholder="Insertyourtexthere">
17. <labelfor="url-field">Urlfield</label>
18. <inputtype="url"id="url-field"name="url-field"placeholder="http://net.tutsplus.com/"required>
20. <labelfor="email-field">Emailfield</label>
21. <inputtype="email"id="email-field"name="email-field"placeholder="contact@ghinda.net"required>
23. <buttontype="submit"class="ui-buttonui-widgetui-state-defaultui-corner-allui-button-text-only"role="button"aria-disabled="false">
24. <spanclass="ui-button-text">Submitform</span>
25. </button>
26. </form>

更多信息请阅读：How to Build Cross-Browser HTML5 Forms

7.CSS animations

很多现在的浏览器都支持CSS动画，是的，CSS已经允许你创建一些简单的动画，而无需JavaScript的支持。

下面代码显示如何让背景色改变：

1. #logo{
2. margin:15px15px015px;
3. background:red;
4. float:left;
6. /*Firefox4+*/
7. -moz-animation-name:colour-change;
8. -moz-animation-timing-function:linear;
9. -moz-animation-iteration-count:infinite;
10. -moz-animation-duration:30s;
12. /*Webkit*/
13. -webkit-animation-name:colour-change;
14. -webkit-animation-timing-function:linear;
15. -webkit-animation-iteration-count:infinite;
16. -webkit-animation-duration:30s;
17. }
19. @-moz-keyframescolour-change{
20. 0%{
21. background:red;
22. }
23. 33%{
24. background:green;
25. }
26. 66%{
27. background:blue;
28. }
29. }
31. @-webkit-keyframescolour-change{
32. 0%{
33. background:red;
34. }
35. 33%{
36. background:green;
37. }
38. 66%{
39. background:blue;
40. }
41. }

更多信息请阅读：Enhance Your Sites with CSS3 Animations