css兼容

這樣的工具有:html5shiv.js蹬刷、respond.js畴博、CSS Reset笨忌、Normalize.css、Modernizr俱病、Post CSS等蜜唾;另外,還可以考慮使用條件注釋庶艾、CSS Hack袁余、JS能力檢測等對兼容做一些修補(bǔ)。

經(jīng)常問到兩個(gè)名詞:
  • 逐漸增強(qiáng):針對低版本瀏覽器進(jìn)行構(gòu)建頁面咱揍,保證最基本的功能颖榜,然后再針對高級瀏覽器進(jìn)行效果、交互等改進(jìn)和追加功能達(dá)到更好的用戶體驗(yàn)。
  • 優(yōu)雅降級:一開始就構(gòu)建完整的功能掩完,然后再針對低版本瀏覽器進(jìn)行兼容噪漾。

列舉5種以上瀏覽器兼容的寫法

  • 條件注釋


<script>alert(1);</script>

  • css hack

.box{
color: red; _color: blue; /ie6/
color: pink; /ie67/
color: yellow\9; /
ie/edge 6-8*/
}

webkit- ,針對safari且蓬,chrome瀏覽器的內(nèi)核CSS寫法
-moz-欣硼,針對firefox瀏覽器的內(nèi)核CSS寫法
-ms-,針對ie內(nèi)核的CSS寫法

  • 選擇器前綴法

*html *前綴只對IE6生效
*+html *+前綴只對IE7生效
@media screen\9{...}只對IE6/7生效
@media \0screen {body { background: red; }}只對IE8有效
@media \0screen,screen\9{body { background: blue; }}只對IE6/7/8有效
@media screen\0 {body { background: green; }} 只對IE8/9/10有效
@media screen and (min-width:0\0) {body { background: gray; }} 只對IE9/10有效
@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {body { background: orange; }} 只對IE10有效等等

以下工具/名詞是做什么的(過)

  • 條件注釋
    條件注釋 是于HTML源碼中被 Microsoft Internet Explorer 有條件解釋的語句恶阴。條件注釋可被用來向 Internet Explorer 提供及隱藏代碼

  • IE Hack
    針對IE瀏覽器編寫不同的CSS诈胜,有CSS屬性前綴法、選擇器前綴法以及IE條件注釋法

  • js 能力檢測
    使用JS的語法檢測瀏覽器支持的屬性冯事,瀏覽器擁有的能力而不是來區(qū)分是什么瀏覽器焦匈。這樣如果瀏覽器擁有某種能力則提供一種方案,沒有某種能力則提供另一種方案

  • html5shiv.js
    用于解決IE9以下版本瀏覽器對HTML5新增標(biāo)簽不識別昵仅,并導(dǎo)致CSS不起作用的問題缓熟。

  • respond.js
    讓不支持css3媒體查詢的瀏覽器支持查詢

  • css reset
    通過重新定義標(biāo)簽樣式,“覆蓋”瀏覽器的CSS默認(rèn)屬性

  • normalize.css
    Normalize.css 只是一個(gè)很小的CSS文件摔笤,但它在默認(rèn)的HTML元素樣式上提供了跨瀏覽器的高度一致性够滑。相比于傳統(tǒng)的CSS reset,Normalize.css是一種現(xiàn)代的吕世、為HTML5準(zhǔn)備的優(yōu)質(zhì)替代方案

  • Modernizr
    Modernizr是一個(gè) JavaScript 庫彰触,用于檢測用戶瀏覽器的 HTML5 與 CSS3 特性

  • postCSS
    PostCSS是一個(gè)JS插件轉(zhuǎn)換樣式表的工具∧耄可以將CSS解析成抽象語法樹

一般在哪個(gè)網(wǎng)站查詢屬性兼容性?

brwoserhack
canIuse

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末晚伙,一起剝皮案震驚了整個(gè)濱河市吮龄,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌咆疗,老刑警劉巖漓帚,帶你破解...
    沈念sama閱讀 222,865評論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異午磁,居然都是意外死亡尝抖,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,296評論 3 399
  • 文/潘曉璐 我一進(jìn)店門迅皇,熙熙樓的掌柜王于貴愁眉苦臉地迎上來昧辽,“玉大人,你說我怎么就攤上這事登颓〗淋瘢” “怎么了?”我有些...
    開封第一講書人閱讀 169,631評論 0 364
  • 文/不壞的土叔 我叫張陵,是天一觀的道長咕痛。 經(jīng)常有香客問我痢甘,道長,這世上最難降的妖魔是什么茉贡? 我笑而不...
    開封第一講書人閱讀 60,199評論 1 300
  • 正文 為了忘掉前任塞栅,我火速辦了婚禮,結(jié)果婚禮上腔丧,老公的妹妹穿的比我還像新娘放椰。我一直安慰自己,他們只是感情好悔据,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,196評論 6 398
  • 文/花漫 我一把揭開白布庄敛。 她就那樣靜靜地躺著,像睡著了一般科汗。 火紅的嫁衣襯著肌膚如雪藻烤。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,793評論 1 314
  • 那天头滔,我揣著相機(jī)與錄音怖亭,去河邊找鬼。 笑死坤检,一個(gè)胖子當(dāng)著我的面吹牛兴猩,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播早歇,決...
    沈念sama閱讀 41,221評論 3 423
  • 文/蒼蘭香墨 我猛地睜開眼倾芝,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了箭跳?” 一聲冷哼從身側(cè)響起晨另,我...
    開封第一講書人閱讀 40,174評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎谱姓,沒想到半個(gè)月后借尿,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,699評論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡屉来,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,770評論 3 343
  • 正文 我和宋清朗相戀三年路翻,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片茄靠。...
    茶點(diǎn)故事閱讀 40,918評論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡茂契,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出慨绳,到底是詐尸還是另有隱情账嚎,我是刑警寧澤莫瞬,帶...
    沈念sama閱讀 36,573評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站郭蕉,受9級特大地震影響疼邀,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜召锈,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,255評論 3 336
  • 文/蒙蒙 一旁振、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧涨岁,春花似錦拐袜、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,749評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至秉撇,卻和暖如春甜攀,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背琐馆。 一陣腳步聲響...
    開封第一講書人閱讀 33,862評論 1 274
  • 我被黑心中介騙來泰國打工规阀, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人瘦麸。 一個(gè)月前我還...
    沈念sama閱讀 49,364評論 3 379
  • 正文 我出身青樓谁撼,卻偏偏與公主長得像,于是被迫代替她去往敵國和親滋饲。 傳聞我的和親對象是個(gè)殘疾皇子厉碟,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,926評論 2 361

推薦閱讀更多精彩內(nèi)容

  • 做前端多年,雖然不是經(jīng)常需要hack屠缭,但是我們經(jīng)常會遇到各瀏覽器表現(xiàn)不一致的情況箍鼓。基于此勿她,某些情況我們會極不情愿的...
    大女表哥閱讀 1,093評論 0 9
  • 什么是 CSS hack CSS hack是通過在CSS樣式中加入一些特殊的符號袄秩,讓不同的瀏覽器識別不同的符號(什...
    怎么昵稱閱讀 391評論 0 1
  • 1.什么是 CSS hack 由于不同廠商的瀏覽器阵翎,比如Internet Explorer,Safari,Mozi...
    zhaonu閱讀 393評論 0 0
  • CSS Hack 不同的瀏覽器對某些CSS代碼解析會存在一定的差異逢并,因此就會導(dǎo)致不同瀏覽器下給用戶展示的頁面效果不...
    zx9426閱讀 392評論 0 0
  • 1. 什么是 CSS hack 由于不同廠商的瀏覽器,比如Internet Explorer,Safari,Moz...
    andreaxiang閱讀 611評論 0 5