入門任務(wù)12

什么是 CSS hack##

CSS hack由于不同廠商的瀏覽器褥琐,比如Internet Explorer,Safari,Mozilla Firefox,Chrome等刨肃,或者是同一廠商的瀏覽器的不同版本,如IE6和IE7配乓,對CSS的解析認識不完全一樣考赛,因此會導(dǎo)致生成的頁面效果不一樣月趟,得不到我們所需要的頁面效果。 這個時候我們就需要針對不同的瀏覽器去寫不同的CSS撇簿,讓它能夠同時兼容不同的瀏覽器聂渊,能在不同的瀏覽器中也能得到我們想要的頁面效果差购。

談一談瀏覽器兼容的思路##

  • 從產(chǎn)品的角度和成本的角度來判斷要不要做瀏覽器兼容
    產(chǎn)品的受眾?受眾使用的瀏覽器的比例汉嗽。產(chǎn)品的效果優(yōu)先還是基本功能優(yōu)先欲逃?以及你做這件事情的成本,時間成本等來判斷是否要做這件事情饼暑。
  • 如果做的話要做到什么程度稳析?
    你要考慮讓那些瀏覽器支持哪些效果。
  • 如何做弓叛?
    根據(jù)兼容需求選擇技術(shù)框架彰居、庫(jQuery……)根據(jù)兼容需求選擇兼容工具(html5shiv.jsrespond.js撰筷、css reset陈惰、normalize.cssModernizr)postCSS條件注釋毕籽、CSS Hack奴潘、js 能力檢測做一些修補

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

常見屬性的兼容情況#####
  • inline-block >=ie8
  • min-width || max-height >=ie8
  • :before || :after >=ie8
  • :hover >=ie7
  • background-size >=ie9
  • border-radius >=ie9
  • box-shadow >=ie9
  • transform >=ie10
1、條件注釋法#####
 <!--[if IE 6]>
 <p>You are using Internet Explore 6.</p>
 <![endif]-->
<!--[if ! IE]><!-->
<script>alert(1)</script>
<!--<!--[endif ]-->
 <!--[if IE 8]>
<link href="ie8only.css" rel="stylesheet">
<![endif]-->

2影钉、CSS屬性前綴法#####

.box{
color: red;
_color: red;  /*兼容ie6,ie6能識別下劃線"_"和星號"*"   */
*color: red;  /*兼容ie67,ie7只能識別星號  */
color: red\9;   /* ie/edge 6-8 */
}
3画髓、選擇器前綴法#####
*html{}只對IE6生效/
+html{}/只對IE7生效
4、html5shiv.js平委、respond.js奈虾、css reset、normalize.css#####
5廉赔、Modernizr#####
6肉微、postCSS#####

以下工具/名詞是做什么的##

條件注釋
條件注釋 (conditional comment) 是于HTML源碼中被 Microsoft Internet Explorer 有條件解釋的語句。條件注釋可被用來向 Internet Explorer 提供及隱藏代碼
IE Hack
使用特殊的符號或者方式寫出只有IE瀏覽器可以解析的代碼蜡塌,有CSS屬性前綴法碉纳、選擇器前綴法以及IE條件注釋法
js 能力檢測
使用JS的語法檢測瀏覽器支持的屬性,以便展示效果
html5shiv.js
用于解決IE9以下版本瀏覽器對HTML5新增標簽不識別馏艾,并導(dǎo)致CSS不起作用的問題劳曹。
respond.js
讓不支持css3 Media Query的瀏覽器包括IE6-IE8等其他瀏覽器支持查詢。
css reset
因為早期的瀏覽器支持和理解的CSS規(guī)范不同琅摩,導(dǎo)致渲染頁面時效果不一致铁孵,會出現(xiàn)很多兼容性問題,所以重置近乎全部的樣式來達到清除默認樣式
normalize.css
normalize相比較css reset的改進
1.保護了瀏覽器的默認樣式房资,沒有全部清除樣式
2.一般化的樣式:為大部分HTML元素提供
3.修復(fù)瀏覽器自身的bug并保證各瀏覽器的一致性
4.優(yōu)化CSS可用性
Modernizr
Modernizr 是一個用來檢測瀏覽器功能支持情況的 JavaScript 庫蜕劝。通過這個庫我們可以檢測不同的瀏覽器對于HTML5特性的支持情況。Modernizr在頁面加載時快速運行來檢測功能;之后它會創(chuàng)建一個保存檢測結(jié)果的JavaScript對象岖沛,然后為你頁面中的html標簽上添加一系列class屬性來接通你的CSS暑始。
postCSS
PostCSS 是使用 JS 插件來轉(zhuǎn)換 CSS 的工具,支持變量婴削,混入蒋荚,未來 CSS 語法,內(nèi)聯(lián)圖像等等馆蠕。PostCSS 可以作為[預(yù)處理器]使用期升,類似:Sass, Less 和 Stylus。簡而言之互躬,PostCSS是CSS變成JavaScript的數(shù)據(jù)播赁,使它變成可操作。PostCSS是基于JavaScript插件吼渡,然后執(zhí)行代碼操作容为。PostCSS自身并不會改變CSS,它只是一種插件寺酪,為執(zhí)行任何的轉(zhuǎn)變鋪平道路坎背。

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

CSS屬性兼容查詢網(wǎng)站:http://caniuse.com/

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末寄雀,一起剝皮案震驚了整個濱河市得滤,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌盒犹,老刑警劉巖懂更,帶你破解...
    沈念sama閱讀 210,978評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異急膀,居然都是意外死亡沮协,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 89,954評論 2 384
  • 文/潘曉璐 我一進店門卓嫂,熙熙樓的掌柜王于貴愁眉苦臉地迎上來慷暂,“玉大人,你說我怎么就攤上這事晨雳⌒腥穑” “怎么了?”我有些...
    開封第一講書人閱讀 156,623評論 0 345
  • 文/不壞的土叔 我叫張陵悍募,是天一觀的道長蘑辑。 經(jīng)常有香客問我,道長坠宴,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,324評論 1 282
  • 正文 為了忘掉前任绷旗,我火速辦了婚禮喜鼓,結(jié)果婚禮上副砍,老公的妹妹穿的比我還像新娘。我一直安慰自己庄岖,他們只是感情好豁翎,可當(dāng)我...
    茶點故事閱讀 65,390評論 5 384
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著隅忿,像睡著了一般心剥。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上背桐,一...
    開封第一講書人閱讀 49,741評論 1 289
  • 那天优烧,我揣著相機與錄音,去河邊找鬼链峭。 笑死畦娄,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的弊仪。 我是一名探鬼主播熙卡,決...
    沈念sama閱讀 38,892評論 3 405
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼励饵!你這毒婦竟也來了驳癌?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,655評論 0 266
  • 序言:老撾萬榮一對情侶失蹤役听,失蹤者是張志新(化名)和其女友劉穎喂柒,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體禾嫉,經(jīng)...
    沈念sama閱讀 44,104評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡灾杰,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,451評論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了熙参。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片艳吠。...
    茶點故事閱讀 38,569評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖孽椰,靈堂內(nèi)的尸體忽然破棺而出昭娩,到底是詐尸還是另有隱情,我是刑警寧澤黍匾,帶...
    沈念sama閱讀 34,254評論 4 328
  • 正文 年R本政府宣布栏渺,位于F島的核電站,受9級特大地震影響锐涯,放射性物質(zhì)發(fā)生泄漏磕诊。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,834評論 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望霎终。 院中可真熱鬧滞磺,春花似錦、人聲如沸莱褒。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,725評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽广凸。三九已至阅茶,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間谅海,已是汗流浹背脸哀。 一陣腳步聲響...
    開封第一講書人閱讀 31,950評論 1 264
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留胁赢,地道東北人企蹭。 一個月前我還...
    沈念sama閱讀 46,260評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像智末,于是被迫代替她去往敵國和親谅摄。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,446評論 2 348

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