網頁加速系列（四）、 網頁加速之CSS輔助減肥篇

（四）、 網頁加速之CSS輔助減肥篇

WEB網站可用性的關鍵計量是速度，更確切地說，是頁面能以多快的速度出現在訪問者的瀏覽器視窗裡。影響速度的因素有很多種，包括WEB伺服器的速度、訪問者的INTERNET串連情況，以及瀏覽器必須下載的檔案大小。儘管你無法控制伺服器和串連的速度，但是你可以控制構成網站WEB頁面的檔案大小。

 
為了讓網站能夠更快，WEB的建設者都會按常規地壓縮和最佳化網站上的每一個影像檔，這常常使得為了將檔案的大小減少幾個百分點而犧牲了映像的品質。由於CSS樣式表是純文字檔案，和映像相比相對較小，所以WEB建設者很少考慮採取措施減少其CSS樣式表檔案的大小。但是，通過使用CSS縮寫以及其他的一些簡單技巧，你可以在很大程度上減少樣式表的大小。在我對自己樣式表的一次非正式的特別測試中，我把檔案的大小降低了大約25－50％。

使用CSS的縮寫性質
CSS的縮寫性質（SHORTHAND PROPERTY）是一些專用的性質名，用來代替多個相關性質的集合。例如，間隙性質（PADDING PROPERTY）是頂部間隙（PADDING-TOP）、右側間隙（PADDING-RIGHT）、底部間隙（PADDING-BOTTOM）和左側間隙（PADDING-LEFT）的縮寫。

使用速寫性質讓你能夠把多個性質／屬性對（PROPERTY/ATTRIBUTE PAIR）壓縮排CSS樣式表的一行代碼裡。例如，想一想下面的代碼：

.SAMPLE1 {
    MARGIN-TOP: 15PX;
    MARGIN-RIGHT: 20PX;
    MARGIN-BOTTOM: 12PX;
    MARGIN-LEFT: 24PX;
    PADDING-TOP: 5PX;
    PADDING-RIGHT: 10PX;
    PADDING-BOTTOM: 4PX;
    PADDING-LEFT: 8PX;
    BORDER-TOP-WIDTH: THIN;
    BORDER-TOP-STYLE: SOLID;
    BORDER-TOP-COLOR: #000000;
}

將它用一些縮寫性質來替代就能夠把代碼減少為下面這樣，兩者的實際效果是完全一樣的：

.SAMPLE1 {
    MARGIN: 15PX 20PX 12PX 24PX;
    PADDING: 5PX 10PX 4PX 8PX;
    BORDER-TOP: THIN SOLID #000000;
}

要注意，縮寫性質還有多個屬性，每一個（屬性）都對應一個被組合進入縮寫性質的常規性質。屬性由空白隔開。

當屬性是類似的值的時候，例如用於邊框空白性質（MARGIN PROPERTY）的線性測量的時候，接在縮寫性質之後的屬性的順序很重要。屬性的次序是從頂部（頂部的邊框空白）開始，然後圍繞格子（BOX）按順時針次序繼續。

如果縮寫性質的所有屬性都是相同的，那麼你可以簡單地列出單個屬性，然後在前面將它複製四遍。因此，下面的兩個性質是相等的：

    MARGIN: 5PX 5PX 5PX 5PX;

    MARGIN: 5PX;

類似的，你可以使用接在邊框空白或者間隔性質之後的兩個屬性來代表頂部／底部和右側／左側屬性對。

    MARGIN: 5PX 10PX 5PX 10PX;

    MARGIN: 5PX 10PX;

屬性的順序在它們是不相似的值的時候是不重要的。因此，邊框顏色、邊框風格和邊框寬度等屬性可以以任何順序接在大綱性質（OUTLINE PROPERTY）之後。忽略某個屬性等同於從樣式規則裡忽略掉對應的常規性質。

CSS縮寫性質列表

 
下面是CSS縮寫性質的列表以及它們所表示的常規性質。

BACKGROUND（背景）：背景附件、背景顏色、背景映像、背景位置、背景重複
BORDER（邊框）：邊框顏色、邊框風格、邊框寬度
BORDER-BOTTOM（底部邊框）：底部邊框顏色、底部邊框樣式、底部邊框寬度
BORDER-LEFT（左側邊框）：左側邊框顏色、左側邊框樣式、左側邊框寬度
BORDER-RIGHT（右側邊框）：右側邊框顏色、右側邊框樣式、右側邊框寬度
BORDER-TOP（頂部邊框）：頂部邊框顏色、頂部邊框樣式、頂部邊框寬度
CUE（聲音提示）：前提示、後提示
FONT（字型）：字型、字型大小、字型樣式、字型粗細、字型變體、線高度、字型大小調整、字型展開
LIST-STYLE（列表樣式）：列表樣式映像、列表樣式位置、列表樣式類型
MARGIN（空白）：頂部空白、右側空白、底部空白、左側空白
OUTLINE（大綱）：大綱顏色、大綱樣式、大綱寬度
PADDING（間隙）：頂部間隙、右側間隙、底部間隙、左側間隙
PAUSE（暫停）：後暫停、前暫停
減少空白

減少CSS樣式表大小的另一種方法是從文檔裡刪掉大多數無用的空白。換句話說，將每條規則打破放進一行代碼裡，即把原來插入到代碼裡用來把每個性質／屬性分割到不同行的分行符號和縮排符刪掉。

例如，下面的程式碼範例在內容上相同，但是第二個要精鍊得多：

H1 {
    FONT-SIZE: X-LARGE;
    FONT-WEIGHT: BOLD;
    COLOR: #FF0000;
}

 

H1 {FONT-SIZE: X-LARGE; FONT-WEIGHT: BOLD; COLOR: #FF0000}

刪掉注釋

將注釋從你的CSS代碼裡刪掉是減少檔案大小的另一種方式。儘管注釋對於代碼的閱讀很有用，但是它無助於瀏覽器產生你的WEB頁面。很多WEB建設者都習慣給每一行代碼都加上注釋，或者至少給每一條規則聲明都加上。這樣的慷慨注釋在CSS樣式表裡是極少需要的，因為大多數CSS性質和屬性都很容易閱讀和理解。如果你對類、ID，以及其他的選取器都使用有意義的名稱，你就可以省掉大多數的注釋，同時仍然能夠保持代碼的可讀性和可維護性。

H1 {                    /* HEADING 1 STYLE*/
    FONT-SIZE: X-LARGE; /* X-LARGE SIZE */
    FONT-WEIGHT: BOLD;  /* BOLD */
    COLOR: #FF0000;     /* RED */
}

使用速寫性質、刪除無用的空白、省略注釋都能夠在很大程度上減少你CSS樣式表檔案的大小。這反過來會對加速你WEB網站速度的總體目標作出小的、但是可能會是顯而易見的貢獻。