武林網(www.companysz.com)文章簡介:整理和優化代碼不僅是為了你的CSS文件大小,還包括了維護性和可讀性。以上的原理并不只是針對CSS,它們還能應用到HTML,Javascript以及其他編程語言。CSS文件不只是為了呈現給你網站的最終用戶。上面的原理可以幫助用戶體驗以及開發者經驗。運用這些原則到你未來的項目
作為網頁設計師(前端工程師),你可能還記得曾經的那個網頁大小建議:一個網頁(包括HTML、CSS、Javacript、Flash和圖片)盡量不要超過30KB的大小,隨著互聯網的日益龐大,網絡帶寬也在飛速發展,很多設計師已經不再考慮這條30KB的理想準則。隨著越來越受歡迎的CSS布局和Javascript對網站用戶體驗的強化,使得這種現象越來越普遍,尤其是對于大型網站來說,僅僅一個CSS文件就已經超過了30KB的上限。
但是即便如此,現在也有很多準則來幫助你在完成CSS布局后進行CSS代碼的壓縮和優化。CSS代碼優化的目的并不僅僅是減少CSS文件的大小,它還能讓你的CSS代碼更有條理、更高效。在網頁教學網,你將會學到更多關于CSS代碼優化的知識,這能幫你更熟悉CSS代碼的規范性。熟悉這些概念還能讓你成為更全面的網頁設計師,從而寫出更優化的CSS代碼。
1.使用簡寫如果你現在還對簡寫一點都不了解,那你就又寫落伍了,不過幸好,學起來并不是很難。使用簡寫是一種讓代碼減少的最簡單方法。沒有比現在更適合實踐代碼簡寫的時候了,還等什么,一起來看看吧。
Margin、border、padding、background、font、list-style和outline 都是可以進行簡寫的屬性。CSS簡寫就是不再使用不同的相類似屬性的聲明…
p { margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px; }
你可以把它們簡寫成這樣:
p { margin: 10px 20px 30px 40px; }
瀏覽器可以通過不同數量的屬性值來解釋你定義的CSS代碼,請看圖解:
Font的簡寫對于縮小代碼量很有幫助,而且能讓你少打很多字母; )
如果你對以上簡寫方法已經了如指掌,你還可以看看以下兩個簡寫教程(英文),也許會對你有所幫助:
1.CSS Shorthand Guide(CSS簡寫指導)
2.Efficient CSS with shorthand properties(高效CSS屬性的簡寫)
Hack是一個糟糕的東西,它會為不同瀏覽器定義一樣的代碼,使得CSS繁冗。現在我們知道使用條件性注釋來代替hack,他們在IE6和IE7中是被認可的,甚至IE團隊也推薦這樣使用。使用條件性注釋服務于符合瀏覽器特性專用的CSS代碼,因此,更小的、核心的CSS代碼用來服務于遵從標準的瀏覽器,只有需求條件出現的時候(比如IE),才會去下載額外的CSS文件!如果在其他網站看到本信息,說明本教程來源是網頁教學VeVb網站,主要是為了防采集。
下面來看看IE6使用條件性注釋的代碼范例:
<!–[if IE 6]>
<link rel=”stylesheet” type=”text/css” href=”ie6.css” mce_href=”ie6.css”>
<![endif]–>
這段代碼使得IE6去下載額外的ie6.css解析它專用的css代碼。同樣的,如果針對IE7只用把上面的6與7替換就行了。
新聞熱點
疑難解答