你想使用的特性的支持如何橡疼？
在 MDN 上乔妈，我們?cè)诒M力讓這個(gè)流程變得容易——在每個(gè)詳述 CSS 屬性的頁(yè)面上提供瀏覽器的兼容性信息妻顶。
另一個(gè)流行的查明一個(gè)特性有多受到支持的方式是Can I Use網(wǎng)站魔策。
支持不意味著“看起來(lái)一樣”
一個(gè)網(wǎng)站可能不會(huì)在所有瀏覽器上看起來(lái)都一樣匈子，因?yàn)槟愕囊恍┯脩魧?huì)是在一部手機(jī)上，而另一些用戶是在桌面大屏幕上瀏覽你的網(wǎng)站闯袒；類似地虎敦，你的一些用戶會(huì)是使用舊版瀏覽器的，而另外一些是最新版政敢；你的一些用戶可能是在聆聽(tīng)由屏幕閱讀器朗讀的你的內(nèi)容其徙，或者已經(jīng)放大了頁(yè)面來(lái)讀到內(nèi)容。支持所有人意味著提供保守設(shè)計(jì)版本的你的內(nèi)容喷户，這樣在現(xiàn)代瀏覽器上唾那，它會(huì)看起來(lái)很棒，而對(duì)于舊瀏覽器用戶而言仍然以最低限度可用褪尝。
在 CSS 中構(gòu)建回滾
示例：
* {box-sizing: border-box;}
.wrapper {
background-color: rgb(79,185,227);
padding: 10px;
max-width: 400px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.item {
float: left;
border-radius: 5px;
background-color: rgb(207,232,220);
padding: 1em;
}
代碼解析：
我們已經(jīng)浮動(dòng)了三個(gè)<div>闹获，所以它們顯示在了一行中。任何使用不支持 CSS 網(wǎng)格布局的瀏覽器的人將會(huì)看到以浮動(dòng)布局實(shí)現(xiàn)的一列盒子恼五。一個(gè)成為了網(wǎng)格物件的浮動(dòng)物件失去了浮動(dòng)的動(dòng)作昌罩，就是說(shuō)通過(guò)把 wrapper 變成網(wǎng)格容器，浮動(dòng)物件變成了網(wǎng)格物件灾馒。如果瀏覽器器支持網(wǎng)格布局茎用，它會(huì)顯示網(wǎng)格視圖，否則它會(huì)忽略display: grid相關(guān)的屬性睬罗，使用浮動(dòng)布局轨功。
clear屬性也在被清除的物件變?yōu)榫W(wǎng)格物件的時(shí)候失效，所以你應(yīng)該在一個(gè)會(huì)變成網(wǎng)格布局的布局上容达，加上被清除的尾部古涧。
回滾方式
float、clear
如上所示花盐，如果浮動(dòng)和清除的物件變成了彈性或網(wǎng)格物件羡滑，浮動(dòng)和清除屬性不再影響布局菇爪。display: inline-block
這種方式能被用來(lái)建立列布局，如果一個(gè)物件被設(shè)為display: inline-block柒昏，但是之后變成了彈性或者網(wǎng)格物件凳宙，inline-block行為將會(huì)被忽略。display: table
建立 CSS 表格時(shí)可以被用作回滾职祷。被設(shè)為 CSS 表格布局的物件將會(huì)在它們變?yōu)閺椥曰蛘呔W(wǎng)格物件的時(shí)候不再表現(xiàn)出這種行為氏涩。重要的是，被建立起來(lái)用于修復(fù)表格結(jié)構(gòu)的匿名盒子沒(méi)有被建立起來(lái)有梆。多列布局
Multiple-column Layout
對(duì)于某些布局是尖，你能用multi-col作為回滾。如果你的容器有任何一個(gè)column-*屬性被定義泥耀，之后變成了網(wǎng)格容器饺汹，那么多列行為不會(huì)實(shí)現(xiàn)。作為網(wǎng)格的回滾的彈性盒
彈性盒由于受到了 IE10 和 IE11 的支持爆袍，比網(wǎng)格有著更好的瀏覽器支持首繁。不過(guò)，在這節(jié)課的稍后部分陨囊，你一定要看下舊瀏覽器對(duì)彈性盒相當(dāng)參差不齊而且令人困惑的支持的相關(guān)信息。如果你把彈性容器做成了網(wǎng)格容器夹攒，任何應(yīng)用到子元素的flex屬性都會(huì)被忽略蜘醋。
對(duì)于許多在舊瀏覽器中微調(diào)的布局來(lái)說(shuō)，你可能會(huì)發(fā)現(xiàn)你能用這種方式使用 CSS咏尝，給訪客親切的體驗(yàn)压语。我們加入了一個(gè)更簡(jiǎn)單的基于舊的和受到良好支持技術(shù)的布局，然后用新一些的 CSS 建立一個(gè)可以由 90% 的用戶看到的布局编检。但是存在這樣的情況：回滾代碼會(huì)需要包含新瀏覽器也能理解的東西胎食；舉例來(lái)說(shuō)就是，我們要往我們的浮動(dòng)物件中加入百分?jǐn)?shù)寬度允懂，從而讓列看起來(lái)更像網(wǎng)格厕怜，拉伸以充滿容器。
特性查詢 @supports
特性查詢?cè)试S你測(cè)試一個(gè)瀏覽器是否支持任何特定的一個(gè) CSS 特性蕾总。這就是說(shuō)粥航，你可以寫(xiě)一些面向不支持某項(xiàng)特性的瀏覽器的 CSS，然后檢查以了解瀏覽器是否支持生百，如果支持的話就可以加進(jìn)你的復(fù)雜布局了递雀。
彈性盒的舊版本
在舊版瀏覽器中，你可以找到彈性盒規(guī)范的舊有修訂版本蚀浆。在編寫(xiě)這篇文章的時(shí)候缀程，這大多數(shù)是 IE10 的問(wèn)題搜吧，它在彈性盒上使用了-ms-前綴。這也意味著現(xiàn)在還存在著一些過(guò)時(shí)的文章和教程杨凑，這篇有用的指導(dǎo)幫助你分辨你看到的信息赎败；如果你需要在很舊的瀏覽器中需要 flex 支持的話，它也會(huì)幫到你蠢甲。
IE10 和 IE11 的帶前綴版的網(wǎng)格
CSS 網(wǎng)格規(guī)范最初成形于 IE10僵刮，也就是說(shuō)盡管 IE10 和 IE11 不支持現(xiàn)代的網(wǎng)格，雖然這種網(wǎng)格和本站記載的現(xiàn)代布局不同鹦牛，它們還是有一個(gè)很堪用的網(wǎng)格布局版本搞糕。IE10 和 IE11 的實(shí)現(xiàn)是以-ms-為前綴的，也就是說(shuō)你可以給這兩個(gè)瀏覽器用曼追，而在非微軟瀏覽器上窍仰，這種屬性會(huì)被忽略。不過(guò) Edge 仍然能理解舊語(yǔ)法礼殊，所以小心點(diǎn)驹吮，讓每個(gè)東西都安全地在你的現(xiàn)代網(wǎng)格 CSS 中覆寫(xiě)。
網(wǎng)格布局漸進(jìn)增強(qiáng)指導(dǎo)能幫你理解 IE 版的網(wǎng)格晶伦，我們?cè)谶@節(jié)課的末尾加入了一些額外的有用的鏈接碟狞。不過(guò)，除非你有很多使用舊版 IE 的訪客婚陪，你可能發(fā)現(xiàn)專注于建立一個(gè)由所有不支持的瀏覽器共用的回滾版本是一個(gè)更好的選擇族沃。
測(cè)試舊瀏覽
由于大多數(shù)瀏覽器都支持彈性盒和網(wǎng)格，測(cè)試舊瀏覽器想想就很難泌参。一種方式是使用在線的測(cè)試工具脆淹，例如 Sauce Labs，在跨瀏覽器測(cè)試模塊里有詳細(xì)說(shuō)明沽一。
你也可以下載安裝虛擬機(jī)盖溺，在你的電腦的容器環(huán)境中運(yùn)行舊版瀏覽器。能夠使用舊版 IE 是很有用的铣缠，為此烘嘱，微軟已經(jīng)制作了一些可以免費(fèi)下載的虛擬機(jī)。這些對(duì) Mac攘残、Windows 和 Linux 操作系統(tǒng)都是可以用的拙友，所以即使你沒(méi)有 Windows 電腦，這也是一個(gè)測(cè)試舊的和現(xiàn)代 Windows 瀏覽器的絕佳辦法歼郭。
