HTML文檔與CSS的關聯常見有4種方式:
使用link標記
<link rel="stylesheet" type="text/css" href="sheet.css" />
使用style元素
<style type="text/css">body{background:#fff;}h1{font-size:2em;}</style>
使用@import指令
<style type="text/css">@import url(sheet1.css);@import "sheet2.css";</style>
使用style屬性的內聯樣式(inline style)
<p style="color:#f00;">這是紅色的字</p>
在實際應用中,使用style屬性的內聯樣式是不推薦使用的,XHTML1.1已經將其標準為不建議使用,原因很簡單這種方式不比font標記強多少,削弱了CSS集中控制整個文檔外觀的優點。前3種方式利用了link標記和style標記,在IE(包括IE6、IE7和IE8 beta1)中有如下限制:
文檔中只有前31個link或style標記關聯的CSS能夠應用。
從第32個開始,其標記關聯的CSS都將失效。IE的官方文檔All style tags after the first 30 style tags on an HTML page are not applied in Internet Explorer也提及這個限制,包括在使用.xsl的.xml檔案也有這個限制。但是似乎寫錯了數量。請在IE看:
例1:34個style標記同時應用
例2:1個style標記和34個link標記同時應用
一個style標記只有前31次@import
指令有效應用。
從第32個@import指令開始忽略。請看:
例3:在一個style標記中使用34次@import
指令。
一個css檔案只有前31次@import指令有效應用。
從第31個@import指令開始忽略。請看:
例4:用link標記引入一個使用34次@import
指令的css檔案
例5:用style標記引入一個使用34次@import
指令的css檔案
例6:用link和style標記分別引入一個使用31次@import
指令以上的css檔案
一個CSS檔案的不能超過288kb?
這個訊息來自Internet Explorer CSS File Size Limit。
@import指令下層疊限制不能超過4層
在IE下通過@import指令引入css檔案時,第5層會失效。這個限制來自Cascade limit via @import rule。實際上,由於瀏覽器對多層嵌套的支援不完善,所以即使不得已使用了@import指令引入CSS檔案,也不要超過2層。
IE對CSS的限制在絕大部分情況下是不會遇到的,即使遇到最佳的解決方案也應該是手動或者通過後端程式對CSS檔案和響應的標記進行合并,最小化的http請求數是最佳化頁面呈現的第一原則。
在IE中,可以通過document.styleSheets
對象(Firefox、Opera9和Safari3.1都支援)修改內聯和內建樣式的值。該對象僅在文檔包含style或link元素時可用,其實用document.styleSheets.length
就可以看出IE下這個值最大是31。下面是利用Javascript來合并link
和style
標記來解決IE下的限制:
var fnMergeStyleSheet = function(){if(!document.styleSheets){ return;}var aSheet = document.styleSheets, aStyle = document.getElementsByTagName('style'), aLink = document.getElementsByTagName('link'); if(aStyle.length + aLink.length < 32 || !aSheet[0].cssText){ //document.styleSheets.cssText 只有IE支援 return; } var aCssText = [],aCloneLink = []; //把style標籤中的樣式存入,然後刪掉該標籤,但保留第一個 //因為由getElementsByTagName方法傳回值是nodeList,所以刪除時迴圈用倒序 for(var i=aStyle.length-1;i>-1;--i){ var o = aStyle[i]; aCssText.push(o.innerHTML); if(i>0){ o.parentNode.removeChild(o); } } //在IE中只有在31之內的link標籤才能通過其styleSheet.cssText擷取樣式 //無法的擷取複製到一個數組aCloneLink中 for(var i=aLink.length-1;i>-1;--i){ var o = aLink[i]; if(o.getAttribute && o.getAttribute('rel')==='stylesheet'){ if(o.styleSheet){ aCssText.push(o.styleSheet.cssText); }else{ aCloneLink.push(o.cloneNode(true)); } if(i>0){ o.parentNode.removeChild(o); } } } var oHead = document.getElementsByTagName('head')[0]; //通過前面的刪除,前31個link或者style標記最多隻剩下2個 //通過重新增加link節點的方法啟用其styleSheet屬性,從而擷取樣式 for(var i = aCloneLink.length-1;i>-1;--i){ var o = aCloneLink[i]; oHead.appendChild(o); aCssText.push(o.styleSheet.cssText); oHead.removeChild(o); } //把所有的樣式都複製給第一個標籤 aSheet[0].cssText += aCssText.join('');}
上面僅僅是一個簡單的粗糙的解決方案,示範請看例1和例2,可以改進的地方還有:
沒有考慮media
這個屬性,如果有多個media
應該分別合并,當然更沒有考慮link
標記的rel="alternate stylesheet"
帶來的影響。但我更建議通過@media
指令把相應的樣式寫在同一個檔案中,至少可以減少HTTP串連數。
沒有解決@import指令31次限制的問題,其實可以提取其href值然後進行啟用處理。但是實際應用在建議用link
標記來替代@import指令,因為在IE中@import
指令相當與把link標記寫在文檔的底部,會導致在IE5/6頁面載入時瞬間無樣式問題,學名叫“Flash of Unstyled Content”(簡稱為FOUC)的bug,當然可以通過在文檔頭中放一個link或script元素可以避免這個bug。
一般來講頁面之所有出現大量的link
或者style
標籤很可能有很多是相同的,可以在aCssText合并前除掉相同的項,減少代碼量。
如果不用DOM中已存在的樣式元素直接通過cssText屬性添加樣式代碼,而是建立一個新的樣式元素來添加,一定要注意先把建立的樣式元素先添加到DOM中,然後再通過cssText屬性添加樣式代碼。反之,其添加的樣式代碼似乎先被IE6的樣式解析器解析後才添加,這樣!imporant和hack都將失效。請看例7。不建議通過添加新的樣式元素的方式來添加新的樣式,這樣很容易達到IE的限制條件。