一直以來寫CSS的時(shí)候都沒有過多的考慮使用@import的方式，最近又看到有朋友在討論關(guān)于@import的一些好壞，以及要不要使用@import的方式加載樣式。其實(shí)對(duì)于這個(gè)問題在很早以前網(wǎng)絡(luò)上就有相關(guān)的資料做了介紹這篇《don’t use @import》，英文的哦 (^。^)y-~~ ，不過不用擔(dān)心，前端觀察站點(diǎn)上有中文的翻譯 《高性能網(wǎng)站設(shè)計(jì)：不要使用@import》，同時(shí)在藍(lán)色理想論壇上也有相關(guān)的討論《@import 調(diào)用樣式表的優(yōu)勢(shì)是什么呢？》，這個(gè)帖子的討論是在2010年3月份的，大家可以看看。

為什么大家會(huì)關(guān)注這個(gè)@import呢，或許是因?yàn)樗彩强梢宰岉撁婕虞d樣式，而且XHTML標(biāo)簽中<link />標(biāo)簽也是把我們的外部樣式加載到頁面中，于是就有朋友得到“不知道如何選擇”的選擇性綜合癥了。( # ▽ # )
咱也不是啥權(quán)威機(jī)構(gòu)，更不是啥權(quán)威人士，但手中有權(quán)威指南和CSS手冊(cè)，翻開查閱，發(fā)現(xiàn)這兩樣法寶上面提到的內(nèi)容大致是相同的，簡單概括一下：
@import像link一樣，鏈接一個(gè)外部樣式表到文檔；
@import會(huì)影響到一些低端的瀏覽器（這個(gè)低端相信大家都懂，比如IE4，呃，不知道現(xiàn)在還有人在用這個(gè)沒 -_”）；
@import必須是在<style>標(biāo)簽內(nèi)，或者一個(gè)CSS文件中，并且是要在樣式定義之前使用；
導(dǎo)入的外部樣式定義會(huì)被文檔中的定義覆蓋（這個(gè)也就是加載順序的東西了）；
可以在加載樣式的同時(shí)定義為哪些設(shè)備顯示，這個(gè)跟link方式是一樣的；
這么一點(diǎn)概括內(nèi)容如果有遺漏的大家繼續(xù)補(bǔ)充一下哈。 < (￣︶￣)>
我的廢話似乎多了一點(diǎn)，入正題，先看一下平時(shí)大家對(duì)于@import方式聊得最多的一個(gè)話題，加載順序。既然有加載順序，那么就肯定會(huì)有demo啦，主要的文件和代碼如下所示：

link_a.css


import_a.css


link_b.css


import_b.css


有了代碼，然后這個(gè)時(shí)候不知道大家有沒有興趣猜一下頁面最終顯示的是什么顏色的文字呢。我是沒興趣，至于你們信不信我不知道，反正我信了。所以我直接看最終的頁面效果，別驚訝，顏色都是一樣的。
 
效果是一樣了，但問題也跟著來了，就是大家所說的使用@import方式導(dǎo)入樣式之后，會(huì)出現(xiàn)閃屏的情況，如果網(wǎng)速過慢樣式過大導(dǎo)致頁面被渲染延遲。這個(gè)情況到目前為止我似乎還真沒碰到過，誰讓我平時(shí)寫頁面的時(shí)候都是用link方式引入樣式文件呢，罪過啊罪過，各位看官如果有興趣的話，請(qǐng)自行嘗試，這個(gè)不在本次測(cè)試范圍內(nèi)，但我相信這是有證可尋的。回歸話題，目前這四個(gè)樣式文件在各個(gè)瀏覽器中出現(xiàn)的情況是怎么樣的呢，看下面的截圖：
 
嗯，大概瞄了一下，似乎每個(gè)瀏覽器的表現(xiàn)還是存在著不少的差異，import_a.css和import_b.css出現(xiàn)的位置幾乎沒幾個(gè)是相同的，再來一個(gè)圖，這樣或許會(huì)看得清晰一點(diǎn)，看不清楚那只能說明我不做設(shè)計(jì)是對(duì)的，看清楚的話，或許我可以考慮轉(zhuǎn)行去做設(shè)計(jì)了。
 
回顧一下前面代碼中需要注意的幾點(diǎn)：
import_a.css這個(gè)文件是從link_a.css中@import進(jìn)去的；
import_b.css這個(gè)是在link_b.css之前的<style>標(biāo)簽導(dǎo)入的；
頁面中可以看到三個(gè)樣式文件順序是link_a.css、import_b.css、link_b.css；
再回到剛看到的頁面加載瀑布流圖中，我們可以發(fā)現(xiàn)import_a.css這個(gè)鳥貨始終不在一個(gè)位置，不是在最后就是在前面一點(diǎn)，比較會(huì)倒騰??；import_b.css這個(gè)文件也不賴，位置也是常變化。
import_a.css的位置變化

IE 6	IE 7	IE 8	FirFox 8	Safari 4	Chrome 15	Opera 11.11
在link_a.css加載之后立即加載import_a.css	在所有的link加載之后開始加載import_a.css	將頁面中的出現(xiàn)的三個(gè)樣式按出現(xiàn)的次序引入加載完之后，加載link_a.css中的import_a.css	在將頁面中的link加載完之后，再加載頁面中的@import，最后按照link中出現(xiàn)的@import加載樣式	同IE 7	同IE 8	同F(xiàn)ireFox 8

嗯，import_a.css作為存放在CSS樣式文件中導(dǎo)入的代表，表現(xiàn)的讓人有點(diǎn)迷糊，搞不清楚這到底是為什么。而import_b.css這鳥貨就相對(duì)乖多了，如果不是根據(jù)@import出現(xiàn)的位置來加載樣式，那么就是在link的樣式文件加載完之后開始加載@import的樣式（這個(gè)時(shí)候或許就是在頁面dom全部加載完之后再加載樣式的關(guān)鍵了，不過目前我現(xiàn)在測(cè)試的demo中并沒有更多的加載元素，有興趣的同學(xué)要不試試看？）
以上的一些內(nèi)容主要描述的一點(diǎn)就是@import出現(xiàn)的方式不同，也間接著影響著頁面加載次序。但無論是怎么樣的一個(gè)加載情況，最終被瀏覽器解析后的渲染頁面的樣式情況十分一致，也就是為什么我們看到頁面效果是一致的關(guān)鍵因素了。

嗯，終于把這篇內(nèi)容寫完了，不曉得這個(gè)東西大家能否理解，寫在最后就一句話：@import導(dǎo)入的樣式雖然會(huì)影響頁面加載的瀑布流，但是不會(huì)影響CSS對(duì)頁面的渲染結(jié)果；對(duì)頁面渲染結(jié)構(gòu)有影響的僅僅只是CSS出現(xiàn)的位置。

想到一點(diǎn)，其實(shí)對(duì)于@import這個(gè)東西可以在項(xiàng)目前期的時(shí)候?qū)㈨撁娣指畛啥鄠€(gè)模塊，然后通過@import導(dǎo)入樣式，這樣便于管理和維護(hù)，最終在項(xiàng)目發(fā)布的時(shí)候可以通過JS或者JAVA等一系列的程序來完成CSS合并，將@import的樣式直接引入到樣式文件中，目前我知道的工具有鬼哥的mergeCSS和濤~哥的CSSgaga（這個(gè)東西我具體沒用過，但聽說可以，如果不可以的話，別拿雞蛋砸我，直接拿雞蛋給我，我做蛋餅吃。）

最新評(píng)論