CSS3/HTML5兼容性&新增屬性

HTML5兼容處理

在不支持HTML5新標(biāo)簽的瀏覽器里冗锁,會(huì)將這些新的標(biāo)簽解析成行內(nèi)元素(inline)對(duì)待静袖,所以我們只需要將其轉(zhuǎn)換成塊元素(block)即可使用忠聚,但是在IE9版本以下挠日,并不能正常解析這些新標(biāo)簽逮京,但是卻可以識(shí)別通過(guò)document.createElement('tagName')創(chuàng)建的自定義標(biāo)簽缘眶,于是我們的解決方案就是將HTML5的新標(biāo)簽全部通過(guò)document.createElement('tagName')來(lái)創(chuàng)建一遍嘱根,這樣IE低版本也能正常解析HTML5新標(biāo)簽了,但在實(shí)際開(kāi)發(fā)中我們更多采用的是通過(guò)檢測(cè)IE瀏覽器的版本來(lái)加載第三方的一個(gè)JS庫(kù)來(lái)解決兼容問(wèn)題巷懈,這個(gè)庫(kù)文件會(huì)幫自動(dòng)通過(guò)document.createElement('tagName')創(chuàng)建所有HTML5的新標(biāo)簽该抒。

示例代碼:

處理CSS3的兼容性

1.http://caniuse.com/ 可查詢CSS3各特性的支持程度

2.為屬性添加私有前綴

? eg:谷歌(webkit)

CSS3新增屬性

1.顏色(RGBA/HSLA) ?-

2.查找元素的方法(屬性選擇器/偽類選擇器/偽元素選擇器)

3.文本(text-shadow)

4.邊框(邊框圓角border-radius/box-shadow/boder-image)

5.盒模型(border-box)

6.背景(background-size/background-origin/background-clip)

7.漸變

8.過(guò)渡(動(dòng)畫效果)

9.伸縮布局

RGBA(Red、Green顶燕、Blue凑保、Alpha)

R、G涌攻、B取值范圍0~255

其中的A表示透明度通道欧引,即可以設(shè)置顏色值的透明度,相較opacity癣漆,它們不具有繼承性维咸,即不會(huì)影響子元素的透明度。

HSLA(Hue惠爽、Saturation癌蓖、Lightness、Alpha)

H色調(diào)取值范圍0~360婚肆,0/360表示紅色租副、120表示綠色、240表示藍(lán)色

S飽和度取值范圍0%~100%

L亮度取值范圍0%~100%

A透明度取值范圍0~1

2.新增了許多靈活查找元素的方法(提高了查找元素的效率和精準(zhǔn)度)

1较性、E[attr]表示存在attr屬性即可用僧;

2、E[attr=val]表示屬性值完全等于val赞咙;

3责循、E[attr*=val]表示的屬性值里包含val字符并且在“任意”位置;

4攀操、E[attr^=val]表示的屬性值里包含val字符并且在“開(kāi)始”位置院仿;

5、E[attr$=val]表示的屬性值里包含val字符并且在“結(jié)束”位置;

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末歹垫,一起剝皮案震驚了整個(gè)濱河市剥汤,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌排惨,老刑警劉巖吭敢,帶你破解...
    沈念sama閱讀 217,542評(píng)論 6 504
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異暮芭,居然都是意外死亡鹿驼,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,822評(píng)論 3 394
  • 文/潘曉璐 我一進(jìn)店門辕宏,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)蠢沿,“玉大人,你說(shuō)我怎么就攤上這事匾效∠象埃” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 163,912評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵面哼,是天一觀的道長(zhǎng)野宜。 經(jīng)常有香客問(wèn)我,道長(zhǎng)魔策,這世上最難降的妖魔是什么匈子? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,449評(píng)論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮闯袒,結(jié)果婚禮上虎敦,老公的妹妹穿的比我還像新娘。我一直安慰自己政敢,他們只是感情好其徙,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,500評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著喷户,像睡著了一般唾那。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上褪尝,一...
    開(kāi)封第一講書(shū)人閱讀 51,370評(píng)論 1 302
  • 那天闹获,我揣著相機(jī)與錄音,去河邊找鬼河哑。 笑死避诽,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的璃谨。 我是一名探鬼主播沙庐,決...
    沈念sama閱讀 40,193評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了轨功?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 39,074評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤容达,失蹤者是張志新(化名)和其女友劉穎古涧,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體花盐,經(jīng)...
    沈念sama閱讀 45,505評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡羡滑,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,722評(píng)論 3 335
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了算芯。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片柒昏。...
    茶點(diǎn)故事閱讀 39,841評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖熙揍,靈堂內(nèi)的尸體忽然破棺而出职祷,到底是詐尸還是另有隱情,我是刑警寧澤届囚,帶...
    沈念sama閱讀 35,569評(píng)論 5 345
  • 正文 年R本政府宣布有梆,位于F島的核電站,受9級(jí)特大地震影響意系,放射性物質(zhì)發(fā)生泄漏泥耀。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,168評(píng)論 3 328
  • 文/蒙蒙 一蛔添、第九天 我趴在偏房一處隱蔽的房頂上張望痰催。 院中可真熱鬧,春花似錦迎瞧、人聲如沸夸溶。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,783評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)蜘醋。三九已至,卻和暖如春咏尝,著一層夾襖步出監(jiān)牢的瞬間压语,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,918評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工编检, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留胎食,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 47,962評(píng)論 2 370
  • 正文 我出身青樓允懂,卻偏偏與公主長(zhǎng)得像厕怜,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,781評(píng)論 2 354

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

  • 1粥航、屬性選擇器:id選擇器 # 通過(guò)id 來(lái)選擇類名選擇器 . 通過(guò)類名來(lái)選擇屬性選擇器 ...
    Yuann閱讀 1,633評(píng)論 0 7
  • 一琅捏、樣式篇 第1章 初識(shí)jQuery (1)環(huán)境搭建 進(jìn)入官方網(wǎng)站獲取最新的版本 http://jquery.co...
    凜0_0閱讀 3,380評(píng)論 0 44
  • 原文鏈接 http://blog.poetries.top/2016/10/20/review-jQuery 關(guān)注...
    程序員poetry閱讀 16,643評(píng)論 18 503
  • Html5新特性 1.新的Doctype盡管使用,即使瀏覽器不懂這句話也會(huì)按照標(biāo)準(zhǔn)模式去渲染 2. Figure元...
    Hedgehog_Dove閱讀 1,071評(píng)論 0 1
  • 小雨給木子打電話递雀,木子接了柄延。小雨說(shuō):我搬新家了,你不來(lái)看看我嗎缀程? 木子輕輕的哦了一聲搜吧,隨即沒(méi)有說(shuō)話。不說(shuō)來(lái)也沒(méi)說(shuō)不...
    隨時(shí)隨地寫人生閱讀 357評(píng)論 0 9