2013-06-04 56 views
1

我一直在閱讀關於響應式設計的知識,並將開始在我的網站上實施新的CSS設置。這讓我想到了調用所有這些不同CSS文件的最佳方式。我將爲不同的屏幕寬度提供不同的CSS。@import瀏覽器兼容性2013

我辯論兩個選項:

  1. 連接到從LINK標籤每個網頁的所有文件。我唯一的問題是持續的維護(並且必須添加所有這些鏈接以開始);我知道這不是世界末日,但在維護方面似乎有點密集。

  2. 另一種方式是在每個網頁上只有一個LINK標籤,指向一個'饋線'CSS。這個'feeder'CSS文件將包含使用@imports的所有其他CSS文件的鏈接。這意味着維護將變得輕而易舉。我可以在整個站點的一個地方添加/重新排序/刪除CSS文件。大!

但是這會導致@import函數的兼容性[或者在舊版瀏覽器中缺少它]。

我環顧四周,我見過的文章已經至少有幾年的歷史了。

所以,爲了得到結論:現在[2013年7月]現在使用的瀏覽器的百分比是否支持這個功能,我可以安全地忘記那些無法解釋@import的瀏覽器嗎?

如果不是,我該怎麼做才能將CSS文件的維護降到最低。 (比「在當前網站上查找和替換」更優雅)。

回答

7

而是擔心@import S的,你應該結合起來,並縮小所有無法通過CDN送達您的CSS文件:

<link rel="stylesheet" href="styles-84e599dcbd6c60fa0af76aaa18a5d75f.css" /> 

它會加載速度更快,佔用更少的帶寬,而且會在任何支持樣式表的瀏覽器上工作。

有很多方法可以做到這一點。如果您沒有使用任何Web框架(或正在使用Node.js),請查看Grunt

至於你的實際問題,除非你打算支持比IE5.5更早的瀏覽器,否則@import將工作得很好。但我強烈建議縮小樣式表方法。

+0

嗯...我不明白,downvote。 +1 – Doorknob

+0

答案只是gos以及我在第1點中所說的,[我很同意],但沒有給出任何理由或爲維護大量css文件的替代方法。我認爲這有點懶惰/觸發快樂。 –

+0

@as_bold_as_love:*這讓我想到了調用所有這些不同的CSS文件*的最佳方式。你問最好的方法,所以我把它給你。看看StackOverflow如何做到這一點。一個沒有任何'@ import'的CSS,版本化和縮小的CSS。 – Blender

0

以下是關於瀏覽器http://www.w3schools.com/browsers/browsers_stats.asp

爲了響應CSS我會用媒體查詢一些統計數據,它不會影響舊的瀏覽器,併爲將需要的響應CSS(移動設備)

設備工作的偉大

http://css-tricks.com/css-media-queries/

+1

*以下統計數據(從十三年的W3Schools日誌文件中收集)*。我不認爲這是一般人羣的代表。 – Blender

+0

是的,媒體靜止對於響應式設計是必不可少的,但它們也可以在@imports上使用。我在這裏問的真正的問題是如果它忘記了LINK標籤嗎?希望在維護方面,它會在某個階段。或者速度差異是一個真正的問題? –

2

我要去居然說在2016年接受的答案,現在,不一定是有幾個原因的正確one--:

1)HTTP 2.0成爲中國以外工業化國家使用頻率最高的協議版本(感謝老IE),並很快將被視爲行業標準(如果尚未)。這意味着支持連接複用和頭緩存消除了將文件合併爲一個文件的需要;實際上,去年在SFO的Fluent大會上,HTTP2主持人實際上認爲,由於HTTP由於連接時間較長而利用更多帶寬的優越能力,因此將CSS和圖像分解爲多個文件實際上會更好。 2)由於像SASS和LESS這樣的CSS所有這種前端自動化,最終可能會破壞IE 5-9 4095選擇器的限制。這是一個鮮爲人知的錯誤,因爲直到現在,人們很少超過單個表中選擇器的數量;然而,在企業網站上,這已經成爲一件常見的事情。基本上,任何有4095個以上選擇器的表格仍然會被讀入,但是瀏覽器在這之後會默默無法渲染任何規則。

這並不是說涅槃成一個文件是,然而,分割的另一種方法實際上是不再壞的,而事實上,在某些情況下,要麼必要甚至更好取決於項目需求。