web移動開發最佳實務之css篇

一、css概述

　　css即層疊樣式表（Cascading Style Sheets），它的作用主要是控制頁面元素的樣式，包括布局、顏色、字型、字型大小、空白、邊框、屬性等等。css的出現使得html的內容和樣式分離，極大的提高了工作效率。

　　目前最新的標準是css3，下面幾節將介紹在使用css過程中應遵循的最佳實務方案。

二、使用高效的css選取器

　　欲建立一個高效的web應用，你要瞭解瀏覽器是如何讀取你的web頁面並呈現出來的。當瀏覽器讀取你的html文檔時，它首先對html文檔進行文法分析，然後把相應元素填充到一個文檔樹中；然後從css樣式表中匹配相應的樣式到各個元素中。瀏覽器讀取樣式表是從右至左的，即從最右邊的選擇符（key selector）開始，然後依次向左移動，直到匹配到元素結束。為了使這個匹配過程高效些，就要減少匹配元素樣式的過程。舉例來說：

#home a {color: blue;}

我們希望id是home下的所有a標籤，使用藍色字型。但是這樣聲明並不高效，瀏覽器首先會尋找每一個a標籤，然後查看它的父元素是否含有home的id，直到文檔的結尾。更高效的方式是避免使用子選取器，使用class屬性：

.home-anchor {color: blue;}

使用特定的樣式規則就可以減少匹配的時間（但是要在可維護性性之間找到一個平衡點），可能的形式為：

#main-navigation {   }      /* ID (Fastest) */body.home #page-wrap {   }  /* ID */.main-navigation {   }      /* Class */ul li a.current {   }       /* Class *ul {   }                    /* Tag */ul li a {  }                /* Tag */* {   }                     /* Universal (Slowest) */#content [title='home']     /* Universal */

有四種類型的選取器，其中id和class比元素選取器和萬用字元更快：

#chapter1 {text-align: center; }.chapter1 { font-weight: bold; }h1 { font-family: sans-serif; }* {font-family: Arial; }

三、聲明圖片的尺寸

　　為了提高頁面渲染的速度，聲明圖片的尺寸是很好的辦法：

<img src="img/logo.png" style="width: 100px; height: 100px;">

因為瀏覽器是分開下載各個圖片的，聲明了尺寸就可以提前確定排版，否則等到圖片下載完成後才知道圖片的尺寸資訊，渲染過程就明顯變慢了。

還有就是，聲明圖片尺寸的時候，應該是實際的尺寸。例如：一個圖片實際尺寸是50*50，但是你希望它小一點，把尺寸聲明為20*20，那麼調整圖片尺寸的過程就會耗費CPU資源、記憶體資源等，使渲染速度變慢。其次，這還會避免下載一個不必要的較大的圖片，手機流量是有限的，這也是為使用者節約資源。

聲明圖片尺寸的方式有3種（html，內聯css，外聯css）：

<img id="logo" src="logo.jpg" alt="Company logo" height="100" width="100" /> <img id="logo" src="logo.jpg" style="width: 100px; height: 100px;">#logo { width: 100px; height: 100px; }

四、使用css精靈（sprites）

　　css精靈即把多個小圖片放到一個大圖片中，這樣就可以減少http請求的數量。使用時，就進行相應的裁剪，這在各大網站中常被用到。放在一個大圖片中，也更容易對圖片進行統一管理，這對於按鈕、互動中心圖示等非常合適。

#navcontainer li {    background-image: url('spritebg.jpg'); /* single image */}#navcontainer ul li:nth-child(1) {    background-position: -130px -700px; /* position = xpos ypos */}#navcontainer ul li:nth-child(2) {    background-position: -130px -718px;}#navcontainer a {    width: 250px; /* size */    height: 18px;}

五、啟用硬體加速

　　如果你的應用中含有動畫，那麼就可以啟用硬體加速功能來提升使用者體驗。預設情況下，大多數瀏覽器是沒有開硬體加速的，使用該功能的典型情況是WebGL組件、3D動畫等。但是，如果你希望某個特定的元素使用硬體加速，可以手動觸發：

... {    -webkit-transform: <transform function>;}

transform屬性會把2D或3D轉換應用到一個元素中，可以使用這個屬性來進行旋轉、縮放等操作。例如：

img.rotate3d {    -webkit-transition: -webkit-transform 1s ease-in-out;    -webkit-transform: rotate3d(0, 0, 1, 0deg);}       img.rotate3d:hover {    -webkit-transform: rotate3d(0, 0, 1, 15deg);}

以上代碼對圖片進行15度的旋轉

但是開啟硬體加速並不會加速其他元素的執行，它只是加速了動畫的轉換（使用GPU）。最後，硬體的資源是很寶貴的，有必要的時候才考慮使用。