CSS縮寫優(yōu)化CSS文件的體積
2024-07-11 08:25:00
供稿：網(wǎng)友
Web網(wǎng)站可用性的關(guān)鍵指標(biāo)是速度，更確切地說，是頁面能以多快的速度出現(xiàn)在訪問者的瀏覽器窗口里。影響速度的因素有很多種，包括Web服務(wù)器的速度、訪問者的Internet連接情況，以及瀏覽器必須下載的文件大小。盡管你無法控制服務(wù)器和連接的速度，但是你可以控制構(gòu)成網(wǎng)站W(wǎng)eb頁面的文件大小。
為了讓網(wǎng)站能夠更快，Web的建設(shè)者都會(huì)按常規(guī)地壓縮和優(yōu)化網(wǎng)站上的每一個(gè)圖像文件，這常常使得為了將文件的大小減少幾個(gè)百分點(diǎn)而犧牲了圖像的質(zhì)量。由于CSS樣式表是純文本文件，和圖像相比相對(duì)較小，所以Web建設(shè)者很少考慮采取措施減少其CSS樣式表文件的大小。但是，通過使用CSS縮寫以及其他的一些簡單技巧，你可以在很大程度上減少樣式表的大小。在我對(duì)自己樣式表的一次非正式的特別測(cè)試中，我把文件的大小降低了大約25－50％。
使用CSS的縮寫性質(zhì)
CSS的縮寫性質(zhì)（shorthand property）是一些專用的性質(zhì)名，用來代替多個(gè)相關(guān)性質(zhì)的集合。例如，間隙性質(zhì)（padding property）是頂部間隙（padding-top）、右側(cè)間隙（padding-right）、底部間隙（padding-bottom）和左側(cè)間隙（padding-left）的縮寫。
使用速寫性質(zhì)讓你能夠把多個(gè)性質(zhì)／屬性對(duì)（property/attribute pair）壓縮進(jìn)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;
}
將它用一些縮寫性質(zhì)來替代就能夠把代碼減少為下面這樣，兩者的實(shí)際效果是完全一樣的：
.sample1 {
margin: 15px 20px 12px 24px;
padding: 5px 10px 4px 8px;
border-top: thin solid #000000;
}
要注意，縮寫性質(zhì)還有多個(gè)屬性，每一個(gè)（屬性）都對(duì)應(yīng)一個(gè)被組合進(jìn)入縮寫性質(zhì)的常規(guī)性質(zhì)。屬性由空白隔開。
當(dāng)屬性是類似的值的時(shí)候，例如用于邊框空白性質(zhì)（margin property）的線性測(cè)量的時(shí)候，接在縮寫性質(zhì)之后的屬性的順序很重要。屬性的次序是從頂部（頂部的邊框空白）開始，然后圍繞格子（box）按順時(shí)針次序繼續(xù)。
如果縮寫性質(zhì)的所有屬性都是相同的，那么你可以簡單地列出單個(gè)屬性，然后在前面將它復(fù)制四遍。因此，下面的兩個(gè)性質(zhì)是相等的：
margin: 5px 5px 5px 5px;
margin: 5px;
類似的，你可以使用接在邊框空白或者間隔性質(zhì)之后的兩個(gè)屬性來代表頂部／底部和右側(cè)／左側(cè)屬性對(duì)。
margin: 5px 10px 5px 10px;
margin: 5px 10px;
屬性的順序在它們是不相似的值的時(shí)候是不重要的。因此，邊框顏色、邊框風(fēng)格和邊框?qū)挾鹊葘傩钥梢砸匀魏雾樞蚪釉诖缶V性質(zhì)（outline property）之后。忽略某個(gè)屬性等同于從樣式規(guī)則里忽略掉對(duì)應(yīng)的常規(guī)性質(zhì)。
