建站
咨詢
售后
建站咨詢
新聞中心
這篇文章主要介紹“CSS怎么實現(xiàn)向下兼容”，在日常操作中，相信很多人在CSS怎么實現(xiàn)向下兼容問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”CSS怎么實現(xiàn)向下兼容”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
成都創(chuàng)新互聯(lián)公司專業(yè)提供成都主機托管四川主機托管成都服務器托管四川服務器托管，支持按月付款！我們的承諾：貴族品質、平民價格，機房位于中國電信/網(wǎng)通/移動機房，托管服務器服務有保障！
巧用瀏覽器CSS屬性值實現(xiàn)向下兼容
CSS3中有很多好的特性，例如box-shadow盒陰影，但是，唯一的問題是IE8瀏覽器不支持，如果是對外的PC站點，則IE8瀏覽器不可不顧，尤其一些受眾廣泛的網(wǎng)站。
怎么辦呢？我的做法往往是這樣，IE9+瀏覽器使用box-shadow陰影，而IE7，IE8瀏覽器使用border線框。
例如下面截圖效果：
也就是針對不同瀏覽器采取不同的策略，我們一般最先的反應是采用一些CSS hack技巧，例如，我們這里，就是要區(qū)分IE9+瀏覽器和IE8-瀏覽器，這個其實不難，可以使用:root偽類，在IE9+瀏覽器中，:root實際上等同于html，于是，我們都會這么做：
.box {
border: 1px solid #ddd;
}
:root box {
border: 0 none;
box-shadow: 0 1px 3px rgba(0,0,0,.25);
}從功能上滿足了我們的開發(fā)需求，大多數(shù)小伙伴此時就會到此為止。實際上，我們可以做的更好。
上面這種CSS hack技巧有一個比較大的問題，就是，當我們給IE9+瀏覽器使用不同的CSS聲明的時候，不經(jīng)意間，把這些CSS聲明的權重給提高了。這很容易增加我們CSS代碼的復雜度，例如，經(jīng)常會遇到后面樣式需要覆蓋前面的，由于:root .box提高了權重，我們后面樣式想要覆蓋，則需要更大的權重去處理，顯然，代碼就顯得啰嗦了。
其實我們有很好的兼容區(qū)分策略，那就是充分利用瀏覽器對CSS屬性本身的支持情況來實現(xiàn)瀏覽器的兼容區(qū)分，而不是傳統(tǒng)的通過選擇器或者一些查詢語句。
就拿我們這里的盒陰影和邊框例子舉例，如果我來實現(xiàn)，則會是這樣的：
.box {
box-shadow: 0 1px 3px rgba(0,0,0,.25);
border: 1px solid #d0d0d5;
border: 0 rgba(0,0,0,.2);
}想要讓IE9+瀏覽器沒有邊框其實很簡單，只要使用一個只有IE9+認識的同時沒有邊框的書寫形式就可以了。雖然border所有瀏覽器都識別，但是rgba色值確實IE9+瀏覽器才支持，于是，我們就可以巧妙利用IE8-瀏覽器不識別rgba色值這一特性，實現(xiàn)我們的向下兼容處理。
由于IE8瀏覽器不認識rgba顏色表示，因此，在IE8眼中，下面這種寫法就是不合法的，就會被忽略：
border: 0 rgba(0,0,0,.2);
這種處理技巧就是本文所要說的，利用瀏覽器本身的不兼容實現(xiàn)我們的向下兼容效果。
里面的例子，理論上，直接使用rgba(0,0,0,0)也是可以實現(xiàn)我們的效果的，少了1個字符，本來挺好。但是，如果你在Sass中寫出border: 0 rgba(0,0,0,0);，則會被Sass自以為是地編譯成border: 0 transparent，我靠，這個可就差了十萬八千里了，雖然看表現(xiàn)rgba(0,0,0,0)和transparent是一個東西，都是透明，但是，對于border屬性而言，rgba(0,0,0,0) IE9+瀏覽器才能識別，transparent從IE7瀏覽器就開始識別了。于是乎，IE7，IE8瀏覽器下，本要出現(xiàn)的邊框就這樣直接被干掉了，妥妥的bug啊！為了規(guī)避這個讓人無語的問題，這才使用了rgba(0,0,0,.2)。
上面這個例子有demo，您可以狠狠地點擊這里：CSS 盒陰影與邊框向下兼容demo
利用類似屬性值兼容性實現(xiàn)向下兼容的例子還有很多。
所有數(shù)值相關的兼容試試CSS3 calc()
比方說，上面IE9+去邊框的例子，還可以試試這樣：
.box {
box-shadow: 0 1px 3px rgba(0,0,0,.25);
border: 1px solid #d0d0d5;
border: calc(0px + 0px) #000;
}因為CSS3 calc()計算IE9+瀏覽器才開始支持。
背景圖可是試試background多背景
這種背景圖兼容處理其實非常常見，尤其你是一個喜歡SVG的小伙伴。我們可以使用SVG圖形作為背景，這樣retina顯示屏下效果就蹭蹭蹭的好，但是，SVG有個問題，就是IE8瀏覽器不支持，怎么辦？IE8瀏覽器就使用傳統(tǒng)的圖片，并且只需要1倍圖就可以，對只需要1倍圖，因為，我相信，這個世界是不存在哪個用戶的設備是retina屏幕，但還使用IE8瀏覽器上網(wǎng)的。
下面就有個IE8瀏覽器向下兼容使用圖片的處理問題了，大家都是背景圖片，該怎么處理呢？好苦惱~~
哈哈，不要苦惱，background屬性雖然都支持，但是，background的屬性值和一些語法并不是所有瀏覽器都支持的哦，比方說多背景就是IE9瀏覽器才開始支持的，于是乎，我們可以這么處理：
.box {
background: url(test.png); /* IE8 */background: url(test.svg), none; /* IE9+ */}基本上，以上3個屬性值兼容處理就能滿足大部分現(xiàn)代瀏覽器和普通瀏覽器的區(qū)分了。但是，上面這幾個例子都是區(qū)分IE9和其他低級瀏覽器的，有時候，我們希望區(qū)分IE10+和其他瀏覽器，該怎么辦呢？要知道，IE10+的選擇器hack非常難搞，但是，我們卻有一些屬性值hack，說不定會喜出望外的好用。
區(qū)分IE10+瀏覽器的屬性hack技巧
通過一個經(jīng)典的案例說明下，大家都知道IE10+開始支持了CSS3 animation動畫，于是乎，我們網(wǎng)頁中常見的loading效果，就可以借助CSS3 animation來實現(xiàn)，用一個靜態(tài)的png圖片，使用CSS3不停地旋轉，效果即達成，且效果更細膩，體積超小，而且沒有白色的鋸齒，可謂上上之選。
下圖為傳統(tǒng)git圖和png旋轉圖的尺寸對比：
可以看到大小完全不是一個量級的。
CSS3 animation效果雖好，但是，最大的問題在于IE9及其以下瀏覽器不支持。本著面向未來，盡可能讓用戶感受最佳體驗的原則，我們會想辦法采取向下兼容的實現(xiàn)策略，就是支持CSS3動畫的瀏覽器CSS3實現(xiàn)loading效果，瀏覽器要是不支持，則還使用gif，于是乎，技術實現(xiàn)的難度變成了如何區(qū)分IE9和IE10瀏覽器。
要區(qū)分IE9和IE8那方法很多，因為從CSS2到CSS3是巨變，但是從IE9到IE10那是微變，所以難度不小。CSS這么語言有趣就在于，你只要足夠機靈，你總可以挖掘出一些小而美的處理技巧。
哪些CSS屬性IE10支持，IE9不支持了，除了transition和animation，那就是gradient背景漸變了，于是乎，我們就可以借助多背景，巧妙實現(xiàn)我們的兼容效果，核心CSS代碼如下：
.box {
background: url(loading_blue.gif) no-repeat center;
background: url(loading_blue.png) no-repeat center, linear-gradient(to top, transparent, transparent);
animation: spin 1s linear infinite;
}雖然IE9支持多背景，但是由于不認識漸變linear-gradient語法，所以，下面那行background:... CSS代碼IE9不認識，于是，IE9就是要了上面的loading_blue.gif，從而輕松實現(xiàn)CSS3 animation下的loading效果的向下兼容效果。
您可以狠狠地點擊這里：CSS png animation旋轉向下兼容demo
Chrome瀏覽器下截圖：
需要注意的是，下面的background只能是background，雖然理論上使用background-image也是可以的，但是在IE7, IE8瀏覽器下面，background-image如果是個不認識的東西，他們不會認為這行CSS無效，而是認為你這個背景圖有問題，于是會導致IE7,IE8瀏覽器下連gif loading圖片都實現(xiàn)不出來。
如何巧妙隱藏IE9及其以下瀏覽器版本中的元素
最近遇到一個項目，設計師設計的一些圖形效果非常適合用CSS3繪制，其中有斜紋邊框效果，這就導致只能兼容到IE10，IE9及其以下瀏覽器還是圖片。
這個例子的HTML要比上面的loading案例要復雜，由于圖形負責，因此，會有很多的HTML內(nèi)容出現(xiàn)，而對于IE9，這些都是不需要的，因為背景圖只需要一層標簽即可。所以，這里出現(xiàn)了2處需要兼容處理的地方，其一，IE10+沒有背景圖；其二，IE9-里面的子元素要全部沒效果，比方說隱藏。
第一個兼容處理好辦，跟上面的loading處理類似：
.box {
background: url(shape.png);
background: linear-gradient(to top, transparent, transparent), none;
}關鍵里面的元素隱藏怎么辦？有什么隱藏屬性IE10認識，IE9不認識的？不好意思，沒有，要么都認識，要么都不認識。難道沒有什么處理方法了嗎？有！
我們平時寫CSS3屬性的時候，習慣性會加私有前綴，雖然現(xiàn)在很多屬性都不需要了，比方說：
.box {
-webkit-animation: spin 1s linear infinite;
animation: spin 1s linear infinite;
}這種私有前綴寫法，本質上就是本文的利用瀏覽器的兼容性的向下兼容策略。所以，如果瀏覽器之間的屬性支持有私有前綴之分，也是可以利用屬性兼容性實現(xiàn)向下兼容效果的。
IE9和IE10之間需要私有前綴區(qū)分的CSS屬性其實為數(shù)不多，其中之一就是transform屬性：
也就是IE9瀏覽器下，如果transform不加私有前綴是不認識的。好了，我們有思路了，我們可以利用transform來實現(xiàn)我們的隱藏效果。
核心CSS如下：
.box > div {
position: relative;
left: -999px; /* 所以瀏覽器偏移屏幕之外 */transform: translateX(999px); /* IE10+位置修正 */}理論上，上面代碼就可以滿足我們的需求了。但是，注意的是，transform需要私有前綴的瀏覽器是原生的IE9瀏覽器，用戶使用的時候肯定都是使用原生版本的，如果從用戶角度考慮，我們工作到此為止。但是，我們的測試同事很可能就是使用IE11等瀏覽器的向下兼容模式看的，要知道，IE11、IE9的transform不需要-ms-私有前綴也能識別，很可能你這里的實現(xiàn)就會被報bug.
所以，安全起見，我們需要對上面的CSS做進一步的處理，如下：
.box > div {
position: relative;
left: -999px; /* 所以瀏覽器偏移屏幕之外 */transform: translate3d(999px,0,0); /* IE10+位置修正 */}嘿嘿，雙保險，就算非原生IE9的transform不需要-ms-私有前綴，3d transform那肯定是不認識的，于是乎，一個完美的區(qū)分IE10和IE9隱藏的向下兼容方案就實現(xiàn)了。
到此，關于“CSS怎么實現(xiàn)向下兼容”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續(xù)學習更多相關知識，請繼續(xù)關注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>
本文題目：CSS怎么實現(xiàn)向下兼容
當前路徑：http://ef60e0e.cn/article/isjioj.html
