网站首页 > 基础教程正文

CSS3新特性及浏览器版本兼容性解决

ccvgpt 2024-10-12 14:26:31 基础教程 86 ℃

1.CSS3是什么

CSS是是web开发中三大规范（HTML、CSS、JavaScript）之一，入门参见：Web前端开发-CSS入门干货01 。

1996年底，CSS的第一个正式标准成为W3C的推荐标准，1998年5月推出CSS第二版规范，CSS3是在css基础上发展而来，2001年W3C组织完成其草案规范。

CSS3新特性及浏览器版本兼容性解决

CSS3规范的新特点是进行了模块划分，将同类型属性划归为一个模块，如此有利于各个模块的独立更新和演进。

2.支持CSS3的浏览器版本

（1）通过css3test.com网站，可以检测到你当前浏览器对CSS3支持度。

在https://lea.verou.me/projects/这个网站中，还有一些其他工具。

（2）通过https://caniuse.com/这个网站，可以查询CSS属性、html标签以及js等在不同类型浏览器不同版本下的支持情况。

通过https://caniuse.com/ciu/comparison，可以具体看到不同类型浏览器的不同版本对web开发规范的支持情况。

3.解决低版本浏览器兼容CSS3新特性

通过以下四种方式可以解决浏览器兼容CSS3新特性（属性）

3.1 CSS初始化

CSS初始化即主动设置默认值，而不给浏览器自由发挥的机会。关于CSS初始化具体作用及方式参见：CSS样式初始化。

3.2 浏览器的私有属性

浏览器的私有属性，是指属于各浏览器，还未被W3C的标准规范接纳，通常在私有属性前加各浏览器相应的前缀用以区分。

通过MDN（https://developer.mozilla.org/zh-CN/docs/Glossary/Vendor_Prefix）中可以看到除了CSS外，JavaScript的API相对于各浏览器也有私有属性。

主流浏览器引擎前缀:

（1）-webkit- （谷歌，Safari，新版Opera浏览器，以及几乎所有iOS系统中的浏览器（包括 iOS 系统中的火狐浏览器）；基本上所有基于WebKit 内核的浏览器）

（2）-moz- （火狐浏览器）

（3）-o- （旧版Opera浏览器）

（4）-ms- （IE浏览器和 Edge浏览器）

通常先写浏览器私有属性，最后写标准规范属性，示例代码：

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;

3.3 CSS hack

CSS hack是指针对不同浏览器及同一浏览器不同版本对同一个CSS样式支持并不一致，所以针对不同的浏览器/不同版本编写相应的CSS code的过程。

CSS hack通常认为有三种分类：属性前缀法、选择器前缀法、条件注释法。

（1）属性前缀法

在属性前加前缀的方式，指定某个版本的IE可以识别该属性。

_ 　　　　　　 IE6

+、*　　　　　IE6、IE7

\9 　　　　　　IE6、IE7、IE8、IE9

\0　　　　　　IE8、IE9、IE10、IE11

   *background-color:black; /* IE6, IE7 */
    +background-color:yellow;/* IE6, IE7*/
    background-color:gray\9; /* IE6, IE7, IE8, IE9, IE10 */
    background-color:purple\0; /* IE8, IE9, IE10 */
    background-color:orange\9\0;/*IE9, IE10*/

（2）选择器前缀法

在选择器前加前缀的方式，指定某个版本的IE可以识别该属性。如下：

*html: *前缀只对 IE6 生效
*+html: *+前缀只对 IE7 生效

（3）条件注释法

条件注释法是将样式设置在条件语句内，可以被对应的IE版本进行识别。

除IE外都可识别

3.4 自动化插件

Autoprefixer是一款自动管理浏览器前缀的插件，它可以解析CSS文件并且添加浏览器前缀到CSS内容里，使用Can I Use（caniuse网站）的数据来决定哪些前缀是需要的。

4.CSS3新特性

4.1 CSS3中新增的选择器

（1）属性选择器

属性选择器使用中括号（[ ]）设置，详细语法参见Web前端开发-CSS入门干货02 中的属性选择器。

（2）结构伪类选择器

伪类选择器是操作html中已经存在的标签，用冒号（:）进行设置，其语法参见：Web前端开发-CSS中伪类和伪元素，然而这里写的太复杂，常用的有选第一个、选最后一个、选奇数、选偶数、根据公式选。

<style>
/* 选择第一个后代元素 */
ul li:first-child {
color: red;
}
/* 选择最后一个后代元素 */
ul li:last-child {
color: blue;
}
/* 括号内为关键词-even-选择偶数后代元素 */
ul li:nth-child(even) {
color: green;
}
/* 括号内为关键字-odd-选择奇数后代元素 */
ul li:nth-child(odd) {
color: salmon;
}
/* 括号内为公式-选择全部后代元素 ,n从1开始到所有后代元素数量*/
ul li:nth-child(n) {
color: skyblue;
}
ul li:nth-child(2n) {
color: tomato;
}
</style>
<body>
<!-- 结构伪类选择器 -->
<ul>
<li>第一个后代元素</li>
 <li>第二个后代元素</li>
 <li>第三个后代元素</li>
 <li>第四个后代元素</li>
 <li>第五个后代元素</li>
 </ul>
 </body>

（3）nth-child(n)和nth-of-type(n)的区别

nth-child(n)先匹配到第n个盒子，然后再匹配父元素类型（标签类型），如果满足条件则设定该样式，否则该选择器样式无效；

nth-of-type(n)先匹配父元素类型，然后再匹配到第n个盒子，如果满足条件则设定该样式，否则该选择器样式无效。

  /* 先匹配section下的div，然后再匹配1 ，所以匹配到蜡笔小新*/
section div:nth-of-type(1) {
color: red;
}
/* 先匹配section中的第一个盒子,然后再匹配div，结果第一个是p，所以没匹配到 */
section div:nth-child(1) {
color: blue;
} 

<body>
 <section> 
<p>黑猫警长</p>
<div>蜡笔小新</div>
<div>樱桃小丸子</div>
</section>
</body>

（3）伪元素选择器

伪元素选择器是操作html中不存在的逻辑标签，起到了减少html标签、降低html标签复杂嵌套的作用。用双冒号（::）进行设置，其语法参见：Web前端开发-CSS中伪类和伪元素。

以常用的::before和::after进行举例。

::before在某元素内部之前创建逻辑标签；

::after在某元素内部之后创建逻辑标签；

需要注意的是以上创建的逻辑标签可以看作行内标签，且必须有content属性。

从Web前端开发-CSS三大特性和书写规范中CSS三大特性之一，优先级中可以查看各类选择器的权重。

 <style>
div::before {
content: "我是";
}
div::after {
content: "神探";
}
div {
width: 200px;
height: 100px;
border: 1px solid red;
}
</style>

<body>
<div>狄仁杰</div>
</body>

伪元素的常有应用（1）清除浮动，参见Web前端开发-CSS布局-浮动和定位-入门干货。

4.2 CSS3盒子模型新属性

利用box-sizing来指定盒子模型，当其属性值为content-box时，盒子的大小等于width+padding+border的和；当其属性值为border-box时，盒子的大小为width，当padding和border改变大小时，盒子大小不会改变。

4.3 过渡（动画）

在CSS3中增加了新的属性，过渡translation，能够实现动画效果。

translation有四个分量属性：要过渡的属性、花费的时间、运动曲线、何时开始；

1）要过渡的属性：即想要变化的CSS的属性，包括宽度、高度、背景颜色、内外边距等；

2）花费的时间：单位为秒；

3）运动曲线：默认值为ease，可省略不写；

a）ease：表示逐渐慢下来；b）linear：表示匀速；c）ease-in：表示加速；d）ease-out：表示减速；e）ease-in-out：表示先加速后减速；

4）何时开始：单位为秒，默认值0s，表示不延迟，就开始过渡（动画）

比如如下应用：

<style>
div {
width: 100px;
height: 50px;
background-color: rosybrown;
/* 设置div宽度属性为过渡属性 */
transition: width 0.5s ease;
}

div:hover {
width: 150px;
}
</style>

上一篇： Web前端方向课程要点:CSS3渐变制作过程
下一篇：了解基本CSS3动画属性值，必须小心避免滥用

网站首页 > 基础教程 正文

CSS3新特性及浏览器版本兼容性解决

1.CSS3是什么

2.支持CSS3的浏览器版本

3.解决低版本浏览器兼容CSS3新特性

4.CSS3新特性

猜你喜欢

网站首页 > 基础教程正文