任務12

1. 什么是 CSS hack
由于不同廠商的瀏覽器拄养,或者是同一廠商的瀏覽器的不同版本岗憋,對CSS的解析認識不完全一樣皱埠,因此會導致生成的頁面效果不一致熏版,得不到我們所需要的頁面效果畔柔。這個時候我們就需要針對不同的瀏覽器去寫不同的CSS氯夷,讓它能在不同的瀏覽器中也能得到我們想要的頁面效果。

2.談一談瀏覽器兼容的思路
(1)首先考慮要不要做兼容靶擦。從產(chǎn)品的角度考慮產(chǎn)品的受眾腮考、受眾的瀏覽器比例雇毫、產(chǎn)品是效果有限還是基本功能優(yōu)先;還要考慮成本踩蔚,即有沒有必要做棚放。
(2)如果做兼容,接下來考慮要做到什么程度馅闽。即讓哪些瀏覽器支持哪些效果飘蚯。
(3)如何做兼容。要根據(jù)兼容需求選擇技術框架或庫福也,比如如果要兼容比較舊的瀏覽器(如:IE6,7)局骤,那么現(xiàn)在流行的技術框架顯然不適用,可以選擇1.X版本的JQuery庫暴凑。此外峦甩,還要根據(jù)兼容需求選擇兼容工具,這樣的工具有:html5shiv.js现喳、respond.js凯傲、CSS Reset、Normalize.css嗦篱、Modernizr冰单、Post CSS等;另外默色,還可以考慮使用條件注釋球凰、CSS Hack、JS能力檢測等對兼容做一些修補腿宰。

3.列舉5種以上瀏覽器兼容的寫法
(1)條件注釋:
<pre>

</pre>
(2)屬性前綴法:
<pre>
.box{
color: red;
_color: blue; /ie6/
color: pink; /ie6,7/
color: yellow\9; /
ie/edge 6-10/
}
</pre>
(3) 選擇器前綴法
<pre>
span{ /僅ie6
/
display: block;
}
</pre>
(4)使用Modernizr
利用Modernizr的能力檢測呕诉,對標簽不存在的能力特別優(yōu)化。
<pre>
<div class="no-textshadow"></div>
.no-textshadow{border:1px solid red;}
</pre>

(5)條件注釋和兼容工具相結(jié)合
<pre>

</pre>

4.以下工具/名詞是做什么的
(1)條件注釋
這是基于HTML源碼中被IE(IE<=9)有條件解釋的語句吃度。條件注釋可被用來向IE提供及隱藏代碼甩挫。

(2)IE Hack
針對IE瀏覽器編寫不同的CSS(屬性前綴法、選擇器前綴法椿每、IE條件注釋法)使得頁面效果在不同版本的IE瀏覽器中達到效果一致伊者。

(3)js 能力檢測
使用JS來檢測瀏覽器擁有的能力而不是來區(qū)分是什么瀏覽器。這樣如果瀏覽器擁有某種能力則提供一種方案间护,沒有某種能力則提供另一種方案亦渗。

(4)html5shiv.js
針對不支持HTML5標簽的瀏覽器,創(chuàng)建并模擬HTML5的標簽的效果并使相應的CSS生效汁尺。

(5)respond.js
為不支持CSS3媒體查詢的瀏覽器(IE6-8)模擬CSS3的媒體查詢法精。

(6)css reset
清除瀏覽器默認的元素樣式。

(7)normalize.css
保護有用的瀏覽器默認樣式;一般化的樣式搂蜓,修復瀏覽器自身的bug并保證各瀏覽器的一致性狼荞;優(yōu)化CSS可用性。

(8)Modernizr
是一個JS類庫帮碰,用來檢測瀏覽器的CSS3和HTML5能力相味,從而解決瀏覽器的兼容問題。

(9)postCSS
利用JS插件轉(zhuǎn)換CSS殉挽》嵘妫可以將CSS解析成抽象語法樹。

5.一般在哪個網(wǎng)站查詢屬性兼容性此再?
http://caniuse.com/

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末昔搂,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子输拇,更是在濱河造成了極大的恐慌,老刑警劉巖贤斜,帶你破解...
    沈念sama閱讀 211,290評論 6 491
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件策吠,死亡現(xiàn)場離奇詭異,居然都是意外死亡瘩绒,警方通過查閱死者的電腦和手機猴抹,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,107評論 2 385
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來锁荔,“玉大人蟀给,你說我怎么就攤上這事⊙舳椋” “怎么了跋理?”我有些...
    開封第一講書人閱讀 156,872評論 0 347
  • 文/不壞的土叔 我叫張陵,是天一觀的道長恬总。 經(jīng)常有香客問我前普,道長,這世上最難降的妖魔是什么壹堰? 我笑而不...
    開封第一講書人閱讀 56,415評論 1 283
  • 正文 為了忘掉前任拭卿,我火速辦了婚禮,結(jié)果婚禮上贱纠,老公的妹妹穿的比我還像新娘峻厚。我一直安慰自己,他們只是感情好谆焊,可當我...
    茶點故事閱讀 65,453評論 6 385
  • 文/花漫 我一把揭開白布惠桃。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪刽射。 梳的紋絲不亂的頭發(fā)上军拟,一...
    開封第一講書人閱讀 49,784評論 1 290
  • 那天,我揣著相機與錄音誓禁,去河邊找鬼懈息。 笑死,一個胖子當著我的面吹牛摹恰,可吹牛的內(nèi)容都是我干的辫继。 我是一名探鬼主播,決...
    沈念sama閱讀 38,927評論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼俗慈,長吁一口氣:“原來是場噩夢啊……” “哼姑宽!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起闺阱,我...
    開封第一講書人閱讀 37,691評論 0 266
  • 序言:老撾萬榮一對情侶失蹤炮车,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后酣溃,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體瘦穆,經(jīng)...
    沈念sama閱讀 44,137評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,472評論 2 326
  • 正文 我和宋清朗相戀三年赊豌,在試婚紗的時候發(fā)現(xiàn)自己被綠了扛或。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,622評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡碘饼,死狀恐怖熙兔,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情艾恼,我是刑警寧澤住涉,帶...
    沈念sama閱讀 34,289評論 4 329
  • 正文 年R本政府宣布,位于F島的核電站蒂萎,受9級特大地震影響秆吵,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜五慈,卻給世界環(huán)境...
    茶點故事閱讀 39,887評論 3 312
  • 文/蒙蒙 一纳寂、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧泻拦,春花似錦毙芜、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,741評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽晦雨。三九已至,卻和暖如春隘冲,著一層夾襖步出監(jiān)牢的瞬間闹瞧,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,977評論 1 265
  • 我被黑心中介騙來泰國打工展辞, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留奥邮,地道東北人。 一個月前我還...
    沈念sama閱讀 46,316評論 2 360
  • 正文 我出身青樓罗珍,卻偏偏與公主長得像洽腺,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子覆旱,可洞房花燭夜當晚...
    茶點故事閱讀 43,490評論 2 348

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

  • 什么是 CSS hack Hack是針對不同瀏覽器去寫不同的CSS樣式蘸朋,從而讓各瀏覽器能達到一致的渲染效果,那么針...
    azure_1122閱讀 230評論 0 0
  • 1扣唱、什么是 CSS hack2藕坯、談一談瀏覽器兼容的思路3、列舉5種以上瀏覽器兼容的寫法4画舌、以下工具/名詞是做什么的...
  • 1堕担、什么是 CSS hack 由于不同廠商的瀏覽器,比如Internet Explorer,Safari,Mozi...
    fatearcher閱讀 316評論 0 0
  • 什么是 CSS hack 由于不同廠商(如Internet Explorer,Safari,Mozilla Fir...
    饑人谷_嚴琰閱讀 253評論 0 0
  • 《春風》 Aaron 春風又有幾多情曲聂, 怎奈得柳梢不屑, 空把心意鬧佑惠, 罷了朋腋, 罷了, 春風有意它無意膜楷, 吹得綠野...
    Aaron365閱讀 140評論 0 0