CSS3/HTML5兼容性&新增属性

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)  -

2.查找元素的方法(属性选择器/伪类选择器/伪元素选择器)

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字符并且在“结束”位置；