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) ?-
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é)束”位置;