瀏覽器兼容

什么是 CSS hack

CSS hack由于不同廠商的瀏覽器犬绒,比如Internet Explorer,Safari,Mozilla Firefox,Chrome等彤枢,或者是同一廠商的瀏覽器的不同版本,如IE6和IE7亏掀,對CSS的解析認識不完全一樣角塑,因此會導(dǎo)致生成的頁面效果不一樣铺遂,得不到我們所需要的頁面效果。 這個時候我們就需要針對不同的瀏覽器去寫不同的CSS士袄,讓它能夠同時兼容不同的瀏覽器悲关,能在不同的瀏覽器中也能得到我們想要的頁面效果。簡單的說娄柳,CSS hack的目的就是使你的CSS代碼兼容不同的瀏覽器寓辱。當(dāng)然,我們也可以反過來利用CSS hack為不同版本的瀏覽器定制編寫不同的CSS效果赤拒。
CSS Hack大致有3種表現(xiàn)形式

  • CSS屬性前綴法
  • 選擇器前綴法
  • IE條件注釋法(即HTML頭部引用if IE)Hack秫筏,實際項目中CSS Hack大部分是針對IE瀏覽器不同版本之間的表現(xiàn)差異而引入的诱鞠。注:IE條件注釋法(即HTML條件注釋Hack):針對所有IE(注:IE10+已經(jīng)不再支持條件注釋): ,針對IE6及以下版本: 这敬。這類Hack不僅對CSS生效航夺,對寫在判斷語句里面的所有代碼都會生效。

談一談瀏覽器兼容的思路

  • 要不要做

  • 產(chǎn)品的角度(產(chǎn)品的受眾崔涂、受眾的瀏覽器比例阳掐、效果優(yōu)先還是基本功能優(yōu)先)
    成本的角度 (有無必要做某件事)

  • 做到什么程度

  • 讓哪些瀏覽器支持哪些效果

  • 如何做

  • 根據(jù)兼容需求選擇技術(shù)框架/庫(jquery)

  • 根據(jù)兼容需求選擇兼容工具(html5shiv.js、[respond.js]- (https://github.com/scottjehl/Respond)堪伍、css reset锚烦、normalize.cssModernizr)postCSS

  • 條件注釋帝雇、CSS Hack涮俄、js 能力檢測做一些修補

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

條件注釋
<script>alert(1);</script>

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

以下工具/名詞是做什么的
條件注釋
條件注釋 (conditional comment) 是于HTML源碼中被 Microsoft Internet Explorer 有條件解釋的語句。條件注釋可被用來向 Internet Explorer 提供及隱藏代碼
IE Hack
使用特殊的符號或者方式寫出只有IE瀏覽器可以解析的代碼尸闸,有CSS屬性前綴法彻亲、選擇器前綴法以及IE條件注釋法
js 能力檢測
使用JS的語法檢測瀏覽器支持的屬性,以便展示效果html5shiv.js用于解決IE9以下版本瀏覽器對HTML5新增標(biāo)簽不識別吮廉,并導(dǎo)致CSS不起作用的問題苞尝。
respond.js
讓不支持css3 Media Query的瀏覽器包括IE6-IE8等其他瀏覽器支持查詢。
css reset
通過重新定義標(biāo)簽樣式宦芦,“覆蓋”瀏覽器的CSS默認屬性
normalize.css
Normalize.css 只是一個很小的CSS文件宙址,但它在默認的HTML元素樣式上提供了跨瀏覽器的高度一致性。相比于傳統(tǒng)的CSS reset调卑,Normalize.css是一種現(xiàn)代的抡砂、為HTML5準備的優(yōu)質(zhì)替代方案。
Modernizr
Modernizr是一個 JavaScript 庫恬涧,用于檢測用戶瀏覽器的 HTML5 與 CSS3 特性注益。
postCSS
PostCSS是一個JS插件轉(zhuǎn)換樣式表的工具。這些插件能夠檢驗?zāi)愕腃SS溯捆、支持變量和混合丑搔,轉(zhuǎn)化css3的新特性語法、行內(nèi)圖片等提揍。

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

caniuse :查css屬性 選擇器在各瀏覽器的兼容。browserhacks:查css屬性 選擇器在各瀏覽器Hack的寫法

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末碳锈,一起剝皮案震驚了整個濱河市顽冶,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌售碳,老刑警劉巖强重,帶你破解...
    沈念sama閱讀 222,183評論 6 516
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件绞呈,死亡現(xiàn)場離奇詭異,居然都是意外死亡间景,警方通過查閱死者的電腦和手機佃声,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,850評論 3 399
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來倘要,“玉大人圾亏,你說我怎么就攤上這事》馀。” “怎么了志鹃?”我有些...
    開封第一講書人閱讀 168,766評論 0 361
  • 文/不壞的土叔 我叫張陵,是天一觀的道長泽西。 經(jīng)常有香客問我曹铃,道長,這世上最難降的妖魔是什么捧杉? 我笑而不...
    開封第一講書人閱讀 59,854評論 1 299
  • 正文 為了忘掉前任陕见,我火速辦了婚禮,結(jié)果婚禮上味抖,老公的妹妹穿的比我還像新娘评甜。我一直安慰自己,他們只是感情好仔涩,可當(dāng)我...
    茶點故事閱讀 68,871評論 6 398
  • 文/花漫 我一把揭開白布忍坷。 她就那樣靜靜地躺著,像睡著了一般熔脂。 火紅的嫁衣襯著肌膚如雪承匣。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,457評論 1 311
  • 那天锤悄,我揣著相機與錄音,去河邊找鬼嘉抒。 笑死零聚,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的些侍。 我是一名探鬼主播隶症,決...
    沈念sama閱讀 40,999評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼岗宣!你這毒婦竟也來了蚂会?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,914評論 0 277
  • 序言:老撾萬榮一對情侶失蹤耗式,失蹤者是張志新(化名)和其女友劉穎胁住,沒想到半個月后趁猴,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,465評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡彪见,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,543評論 3 342
  • 正文 我和宋清朗相戀三年儡司,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片余指。...
    茶點故事閱讀 40,675評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡捕犬,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出酵镜,到底是詐尸還是另有隱情碉碉,我是刑警寧澤,帶...
    沈念sama閱讀 36,354評論 5 351
  • 正文 年R本政府宣布淮韭,位于F島的核電站垢粮,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏缸濒。R本人自食惡果不足惜足丢,卻給世界環(huán)境...
    茶點故事閱讀 42,029評論 3 335
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望庇配。 院中可真熱鬧斩跌,春花似錦、人聲如沸捞慌。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,514評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽啸澡。三九已至袖订,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間嗅虏,已是汗流浹背洛姑。 一陣腳步聲響...
    開封第一講書人閱讀 33,616評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留皮服,地道東北人楞艾。 一個月前我還...
    沈念sama閱讀 49,091評論 3 378
  • 正文 我出身青樓,卻偏偏與公主長得像龄广,于是被迫代替她去往敵國和親硫眯。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,685評論 2 360

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

  • 什么是 CSS hack CSS hack是通過在CSS樣式中加入一些特殊的符號择同,讓不同的瀏覽器識別不同的符號(什...
    怎么昵稱閱讀 389評論 0 1
  • 一两入、如何調(diào)試 IE 瀏覽器 IE7以上版本自帶的開發(fā)者工具,IE6可以用border的方法敲才;例:IE11的開發(fā)者工...
    __Qiao閱讀 1,128評論 2 17
  • 一裹纳、如何調(diào)試 IE 瀏覽器择葡? IE調(diào)試的一般方法(css): 使用高版本IE控制臺(對于IE7以上)IE11的開發(fā)...
    婷樓沐熙閱讀 557評論 0 6
  • 一、問答部分 1. 如何調(diào)試 IE 瀏覽器 IE7及以上版本有調(diào)試臺痊夭,可以按F12啟動刁岸。Paste_Image.p...
    _hello__world_閱讀 472評論 0 1
  • 在開始之前,我們很感激你對Caffe2感興趣她我,希望Caffe2在你的機器學(xué)習(xí)作品中是一個高性能的框架虹曙。Caffe2...
    少俠阿朱閱讀 4,743評論 0 1