HTML5兼容处理
在不支持HTML5新标签的浏览器里，会将这些新的标签解析成行内元素(inline)对待，所以我们只需要将其转换成块元素(block)即可使用，但是在IE9版本以下，并不能正常解析这些新标签，但是却可以识别通过document.createElement('tagName')创建的自定义标签，于是我们的解决方案就是将HTML5的新标签全部通过document.createElement('tagName')来创建一遍，这样IE低版本也能正常解析HTML5新标签了，但在实际开发中我们更多采用的是通过检测IE浏览器的版本来加载第三方的一个JS库来解决兼容问题，这个库文件会帮自动通过document.createElement('tagName')创建所有HTML5的新标签。
示例代码:
处理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.过渡(动画效果)
9.伸缩布局
RGBA(Red、Green、Blue、Alpha)
R、G、B取值范围0~255
其中的A表示透明度通道，即可以设置颜色值的透明度，相较opacity，它们不具有继承性，即不会影响子元素的透明度。
HSLA(Hue、Saturation、Lightness、Alpha)
H色调取值范围0~360，0/360表示红色、120表示绿色、240表示蓝色
S饱和度取值范围0%~100%
L亮度取值范围0%~100%
A透明度取值范围0~1
2.新增了许多灵活查找元素的方法(提高了查找元素的效率和精准度)
1、E[attr]表示存在attr属性即可；
2、E[attr=val]表示属性值完全等于val；
3、E[attr*=val]表示的属性值里包含val字符并且在“任意”位置；
4、E[attr^=val]表示的属性值里包含val字符并且在“开始”位置；
5、E[attr$=val]表示的属性值里包含val字符并且在“结束”位置；
网友评论