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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1、属性选择器:id选择器 # 通过id 来选择类名选择器 . 通过类名来选择属性选择器 ...
    Yuann阅读 1,680评论 0 7
  • 一、样式篇 第1章 初识jQuery (1)环境搭建 进入官方网站获取最新的版本 http://jquery.co...
    凛0_0阅读 3,526评论 0 44
  • 原文链接 http://blog.poetries.top/2016/10/20/review-jQuery 关注...
    前端进阶之旅阅读 16,718评论 18 503
  • Html5新特性 1.新的Doctype尽管使用,即使浏览器不懂这句话也会按照标准模式去渲染 2. Figure元...
    Hedgehog_Dove阅读 1,115评论 0 1
  • 小雨给木子打电话,木子接了。小雨说:我搬新家了,你不来看看我吗? 木子轻轻的哦了一声,随即没有说话。不说来也没说不...
    随时随地写人生阅读 386评论 0 9