Web開發者需要了解的7項新技術
Web 開發者需要經常更新他們的知識，學習新的技術，如果他們還想繼續在 Web 開發領域混并混得還不錯的話。下面將為你展示 7 項新的Web開發技術，作為一個Web開發人員，你需要了解、熟悉并學會的技術。
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;
- }
- }
更詳細的信息請閱讀: http://www.catswhocode.com/blog/create-an-adaptable-website-layout-with-css3-media-queries
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 */
更多關于 rem 的內容請看: http://snook.ca/archives/html_and_css/font-size-with-rem
Cache pages for offline usage
51CTO推薦專題：HTML 5 下一代Web開發標準詳解
HTML5 引入了一個強大的特性：離線緩存。該特性可讓你告訴瀏覽器緩存某些頁面，使得用戶可以在離線的情況下再次訪問該頁面。
要緩存頁面非常簡單，首先在你網站的 .htaccess 文件中添加如下一行：
- AddType text/cache-manifest .manifest
然后你可創建一個文件如 offline.manifest ，包含如下內容：
- CACHE MANIFEST
- CACHE
- index.html
- style.css
- image.jpg
***，在 html 節點中增加：
- <html manifest="/offline.manifest">
就這么多。
詳情閱讀: http://www.catswhocode.com/blog/how-to-create-offline-html5-web-apps-in-5-easy-steps
Server-side JavaScript
JavaScript 現在已經是非常流行的Web客戶端編程語言了，但JavaScript也越來越多的出現在服務器端了，通過強大的 JavaScript 服務器端環境：Jaxer,Node.js and Narwhal.
51CTO推薦專題：Node.js專區
下面代碼顯示如何用Node.js 創建一個簡單的 Hello World 程序
- var sys = require("sys");
- sys.puts("Hello World!");
更詳細內容請閱讀: http://net.tutsplus.com/tutorials/javascript-ajax/learning-serverside-javascript-with-node-js/
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 代碼來處理拖放，這里不再詳細描述處理過程，如果你感興趣，可以閱讀這里。http://www.html5rocks.com/en/tutorials/dnd/basics/
提示：如果你希望阻止可拖放元素被選中，可使用以下 CSS 規則：
- [draggable] {
- -moz-user-select: none;
- -khtml-user-select: none;
- -webkit-user-select: none;
- user-select: none;
- }
More info: http://www.useragentman.com/blog/2010/01/10/cross-browser-html5-drag-and-drop/
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="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>
More info: http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-cross-browser-html5-forms/
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;
- }
- }
本文譯自：http://www.catswhocode.com/
【編輯推薦】
