应该了解的7 项新的 Web 开发技术

最新推荐文章于 2020-07-14 05:40:58 发布

月轩居士

最新推荐文章于 2020-07-14 05:40:58 发布

阅读量898

点赞数

分类专栏： JavaWeb

JavaWeb 专栏收录该内容

9 篇文章

订阅专栏

　　1、CSS3 media queries

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

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

 
         @media 
         screen and (max-width:767px){   
        
         #container{  
        
         width:320px;  
        
         }   
        
         header h1#logo a{   
        
         width:320px;  
        
         height:44px;  
        
         background:url(image-small.jpg) no-repeat  
         0 
         0 
         ;  
        
         }                             
        
         }

　　2、Font resizing with REMs

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

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

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

　　3、Cache pages for offline usage

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

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

 
         AddType text/cache-manifest .manifest 
        

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

 
         CACHE MANIFEST   
        
         CACHE  
        
         index.html  
        
         style.css  
        
         image.jpg

最后，在 html 节点中增加：

 
         <html manifest= 
         "/offline.manifest" 
         >

　　4、Server-side JavaScript

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

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

 
         var sys = require( 
         "sys" 
         );  
        
         sys.puts( 
         "Hello World!" 
         );

　　5、HTML5 drag & drop

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

 
    
         <div id= 
         "columns" 
         >  
        
 
                
         <div 
         class 
         = 
         "column" 
         draggable= 
         "true" 
         ><header>A</header></div>  
        
 
                
         <div 
         class 
         = 
         "column" 
         draggable= 
         "true" 
         ><header>B</header></div>  
        
 
                
         <div 
         class 
         = 
         "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>  
        
 
                  
         <label 
         for 
         = 
         "range-slider" 
         >Slider</label>  
        
 
                  
         <input type= 
         "range" 
         name= 
         "range-slider" 
         id= 
         "range-slider" 
         class 
         = 
         "slider" 
         min= 
         "0" 
         max= 
         "20" 
         step= 
         "1" 
         value= 
         "0" 
         >  
        
 
                 
        
 
                  
         <label 
         for 
         = 
         "numeric-spinner" 
         >Numeric spinner</label>   
        
 
                  
         <input type= 
         "number" 
         name= 
         "numeric-spinner" 
         id= 
         "numeric-spinner" 
         value= 
         "2" 
         >  
        
 
                 
        
 
                  
         <label 
         for 
         = 
         "date-picker" 
         >Date picker</label>   
        
 
                  
         <input type= 
         "date" 
         name= 
         "date-picker" 
         id= 
         "date-picker" 
         value= 
         "2010-10-06" 
         >  
        
 
                 
        
 
                  
         <label 
         for 
         = 
         "color-picker" 
         >Color picker</label>   
        
 
                  
         <input type= 
         "color" 
         name= 
         "color-picker" 
         id= 
         "color-picker" 
         value= 
         "ff0000" 
         >  
        
 
                 
        
 
                  
         <label 
         for 
         = 
         "text-field" 
         >Text field with placeholder</label>   
        
 
                  
         <input type= 
         "text" 
         name= 
         "text-field" 
         id= 
         "text-field" 
         placeholder= 
         "Insert your text here" 
         >  
        
 
                 
        
 
                  
         <label 
         for 
         = 
         "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>   
        
 
                 
        
 
                  
         <label 
         for 
         = 
         "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" 
         >  
        
 
                  
         <span 
         class 
         = 
         "ui-button-text" 
         >Submit form</span>   
        
 
                  
         </button>  
        
 
              
         </form> 
        
 
  

　　7、CSS animations

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

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

 
         #logo {   
        
         margin: 15px 15px  
         0 
         15px;   
        
         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