從實際使用分析CSS引用方式的異同

作者: 來源: 更新時間:2013-04-07 17:27:52 點擊:

閑來無事,翻看各個門戶網站的代碼。發現在引用CSS的方式上存在很大的區別,主要表現為使用 import、link以及在當前頁面插入。就我個人而言,一般只用到link方式,所以看到超級大站用其他兩種方式不免想要探個究竟,多么可貴的學習精神……

淘寶網用的是import方式,代碼如下:<style type=”text/css” media=”screen”>@import url(“http://www.taobao.com/home/css/global/v2.0.css?t=20070518.css”);</style>

而大多數網站和我一樣,用的是link方式,比如 paperrater:

<link rel="stylesheet" href="http://www.paper-rater.com/wp-content/themes/paperrater/style.css" type="text/css" media="screen">

百度、google等網站則是直接在網頁中書寫了許多CSS代碼。

直接在頁面中寫入CSS代碼的利弊很清楚了,不方便復用,但利用率高、加載速度快(這也是百度GOOGLE這種對加載速度要求很高的網站選擇這種方式的主要原因)。下面主要分析import和link兩種方式的異同。

1. 從本質上說:

link方式是一種html標簽,而import方式是在CSS代碼域中的,因此它是一種CSS的方法,我們也可以說link是為頁面提供內容的,而import是為CSS提供內容的。

2. 從加載順序上說:

link方式引用的CSS會隨著該標簽所在頁面中的位置而被加載,而import所導入的CSS代碼則是在整個頁面加載完畢之后才載入,這點區別比較重要,在加載速度受到限制時,import方式所影響的頁面可能會因為CSS的加載延時而出現頁面樣式短時不受控制的現象。

3. 從功能上說:

link可以實現很多功能,除了加載CSS,它還可以加載許多其它文件,而import只能加載CSS文件。

4. 從技術結合上說:

link引用的CSS可以通過js尋找DOM進行樣式控制,但import由于不在頁面的dom中,因此難以被js控制。

5. 從兼容性上說:

link是隨著HTML的出現而出現,隨著HTML的發展而發展,因此基本上不存在兼容性問題,而import方式是在CSS的2.1版本中才提出來的,因此非常非常非常陳舊的瀏覽器不支持這一CSS方法。

大乐透走势图2