【前端学习之HTML&CSS进阶篇】-- CSS第五篇 – 浏览器的兼容性

本文具体内容参考了B站渡一教育的课程，原课程链接如下：
渡一教育课程

前言

html与css以及今后我们将会学到的js共同构成了前端技术中最重要的三种语言，在学习过程中，我们首先从html出发，在html的学习过程中深入了解css。
在本节博客中，我们会重点介绍什么是厂商前缀，和它的书写方法，以及关于css hack的相关知识，具体内容见下。

一、问题产生的原因

1. 市场竞争
   【标准制定滞后，浏览器厂商争先使用新内容】

2. 标准版本的变化
   例如，chrome 54 支持部分css3的功能、chrome 74 基本全部支持；

二、厂商前缀

• 问题： 比如：box-sizing是现在版本使用的样式,而 -webkit-box-sizing 由旧谷歌版本使用
  
• 原因：

1. 市场竞争，标准未发布，厂商发布自己的内容拥有自己的前缀表示自己的标准；
2. 标准仍在讨论中，厂商希望先支持；

浏览器在处理样式或元素时，使用如下方式：
遇到无法识别的代码，直接略过，不报错

• 解决办法

可以使用autoprefixer插件实现自动补充厂商前缀；
（书写CSS，后通过F1选择autoprecss实现）

• 非标准前缀：
  eg.谷歌浏览器的滚动条样式变化：
  

/* 去掉div实现全部滚动条样式 */
div::-webkit-scrollbar{
    /* 选择自己滚动条 */
    width: 10px;
}
div::-webkit-scrollbar-track{
    /* 轨道样式 */
    background-color: #74c0c0;
}
div::-webkit-scrollbar-thumb{
    /* 滑块样式 */
    background-color: #008c8c;
    border-radius: 8px;
}
div::-webkit-scrollbar-button{
    /* 两端按钮 */
    background-color: chocolate;
}

实际开发中自定义滚动条，往往是使用div + css + js实现；

• 多个背景图中选一个作为背景

    background-image: -webkit-image-set(url() 1x, url() 2x);
    /* 1x表示1个像素点上小于等于1个显像单元 */
    /* 具体不解释，1x--小图，2x--大图 */

三、css hack

• 概念：根据不同的浏览器(主要针对IE)，设置不同的样式和元素
  

1. 样式：

IE中，CSS的特殊前缀：

• *属性，兼容IE5、IE6、IE7；
  eg.*background: red

• _属性，兼容IE5、IE6；
  eg._background: red

• 属性值\9，兼容IE5~IE10；
  eg.background\9: red

• 属性值\0，兼容IE8~IE11;
  eg.background\0: red

• 属性值\9\0，兼容IE9~IE11；
  eg.background\9\0: red

IE5、6、7的外边距bug，浮动元素的左外边距翻倍；

2. 条件判断：

     <!--  IE浏览器可以识别如下代码 -->
    <!--[if IE]> 
    <p>
        这是IE浏览器
    </p>
    <![endif] -->
    
    <!-- [if !(IE)]> -->
    <p>
        这不是IE浏览器
    </p>
    <!--<![endif]-->

四、渐进增强 和 优雅降级

• 两种解决兼容性问题的思路，会影响代码的书写风格

• 渐近增强：先适应大部分浏览器，然后针对新版本浏览器加入新的样式；
  书写代码时尽量避免先书写有兼容性的代码，完成之后再逐步加入新标准中的代码；

• 优雅降级：先制作完整的功能，然后针对低版本浏览器进行特殊处理；
  书写代码时，先不用特别在意兼容性，完成整个功能后，再针对低版本浏览器处理样式

五、caniuse

• 用于查找css兼容性的网址：caniuse.com
  

总结

本文是CSS进阶部分的最后一篇文章，在学习到浏览器兼容性的相关内容之后，我们开始步入了JavaScript的学习之中，让我们在不断学习中逐步扩充我们的知识工具，生产更多有价值的内容吧。