明天我们就来说说如何处理CSS兼容性带来的问题。
由于浏览器厂商众多，使用的浏览器内核不同，对CSS句型的支持程度也不同。
有的可能是句型不支持的，有的可能是句型支持的，并且疗效表现不同。 总之，都是浏览器不同造成的。
（如果想了解各大浏览器的市场占有率，可以访问度娘家的统计网站）
了解市场份额后，您还需要了解该浏览器对每种 CSS 样式的支持程度。 您可以访问前端兼容性自检工具CANIUSE或quirksmode。
下面我们一一介绍一下各种CSS兼容情况及解决方案。
浏览器的不同默认行为
直接例子：
在IE10以下的浏览器中，添加图片链接默认会形成黑色边框，但中级浏览器没有这种现象。
所以你需要给img{border-style:none;}来解决这个CSS兼容性问题。
类似的问题还有很多。 幸运的是css兼容，有一个特殊的库可以解决大部分兼容性问题，即：NormalizeCSS。
NormalizeCSS 可以被视为 ResetCSS 的替代方案。
NormalizeCSS 的创建是出于以下目的：
保留有用的浏览器默认样式，而不是完全删除其常用样式：提供大多数 HTML 元素来修复浏览器自身的错误并确保跨浏览器的一致性优化 CSS 可用性：以一些小的方式解释代码：使用注释和完整的文档来解释代码
因此，强烈建议在开发网页时，先引入NormalizeCSS，然后再编译具体的样式。
有时可以通过添加浏览器前缀来解决浏览器的默认行为。
我们先来了解一下什么是浏览器前缀。
我们都知道，一个CSS样式从提出提案到即将发布，需要很长的时间。 为了提前满足市场需求，浏览器厂商通过添加浏览器前缀的方式提前支持这些样式。 这样，当样式即将发布时，并不影响正常使用。
常见的浏览器前缀有：-webkit-（Chrome 和 Safari）、-moz-（Firefox）、-ms-（IE）等。
比如IOS下，横屏切换时，文字感觉是手动放大的。 您可以通过给出 html{-webkit-text-size-adjust:100%; 来解决这个问题。 再比如IE下输入框会有封闭的图号，可以通过给出input[type=text]::-ms-clear{display:none;}来解决。
有时不同浏览器下的默认样式无法统一，比如表单的一些元素，如：复选框、单选框、下拉菜单等。
这时候就需要完全模拟样式来解决。
以下是模拟的checkbox实现代码：
.checkbox{
width: 20px;
height: 20px;
display: inline-block;
overflow: hidden;
}
.checkbox input{
display: none;
}
.checkbox div{
width: 100%;
height: 100%;
border: 1px #767676 solid;
border-radius: 2px;
box-sizing: border-box;
}
.checkbox input:checked + div{
background: #0075ff;
display: flex;
}
.checkbox input:checked + div::after{
content: "";
margin: auto;
width: 10px;
height: 4px;
border:1px white solid;
border-top:none;
border-right:none;
transform: rotate(-45deg);
position: relative;
top: -2px;
}
CSSHack
有时我们需要为不同的浏览器甚至不同的版本编译特定的CSS样式。 这个过程称为CSShack！
CSShack的写法大致可以归纳为以下几类：条件hack、属性hack、选择器hack。
Conditional hacks 是 HTML 源代码中由 IE 有条件解释的句子。
条件黑客可用于向 IE 提供和隐藏代码。
使用条件 hack 的页面在 IE9 中工作正常，但在 IE10 中则不行css兼容，因为 IE10 不再支持条件 hack。
属性 hack：在 CSS 样式属性名后添加一些 hack 前缀，该前缀只能被特定浏览器识别。
_：选择IE6或更低版本。 据悉，还可以使用连线（破折号）（-），防止与各个破折号的属性混淆，因此最好使用逗号（_）*：选择IE7或更低版本。如：（+）和(#)等，虽然业界对(*)的认知度很高9：选择IE6+：选择IE8+、Opera15以下的浏览器
.box{
color: #0909; /* IE8+ */
*color: #f00; /* IE7 */
_color: #ff0; /* IE6 */
}
Selector hack：对于网页性能不一致或者需要特殊处理的浏览器，在CSS选择器之前添加一些前缀，这些前缀只能被特定的浏览器识别。
* html .box { color: #090; } /* For IE6 */
* + html .box { color: #ff0; } /* For IE7 */进步与智力退化
渐进式改进是针对低级浏览器进行页面重构，保证最基本的功能，然后针对中级浏览器改进疗效和交互，增加功能，达到更好的用户体验。
优雅降级是从一开始就构建完整的功能，然后使其兼容较低版本的浏览器。
例如，中级浏览器支持border-radius，但低版本浏览器不支持border-radius。 这时采用的是直角形式，这是一种高贵的降级。 其实图片也可以用来模拟圆角。 该方法也是一种高贵的降级。
又比如，中级浏览器支持box-shadow，但低级浏览器不支持shadow。 这时候改用普通边框，这是一种高贵的降级。
简单来说，低版本浏览器的主要功能不受影响，布局也没有严重错乱。 它不必与中级浏览器完全相同，这些想法是高贵的降级。 一般可以通过是否支持样式来进行覆盖操作。 具体示例代码如下：
.box {
width: 200px;
height: 200px;
box-shadow: 0 1px 3px rgba(0,0,0,.25);
border: 1px solid #d0d0d5;
border: 0 rgba(0,0,0,.2);
}
由于IE8浏览器不识别rgba颜色表示，因此，在IE8眼中，border:0rgba(0,0,0,.2); 这些写法是非法的，会被忽略。
Polyfill（垫圈）处理 CSS 兼容性
Polyfill 是一段代码（通常是 Web 上的 JavaScript），它为旧浏览器提供了其本身不支持的新功能。
简单来说，就是通过JavaScript来解决CSS兼容性问题，一般需要引入JavaScript文件。
以下是一些处理 CSS 兼容性的常见 polyfill：
SELECTIVIZR（让 IE6-9 支持 CSS3 样式） Transform（让 IE 支持 Transform 变体） Respond（让 IE6-8 支持媒体查询） html5shiv（让 IE 识别并支持 HTML5 元素） css-vars-ponyfill（支持 CSS 变量）
这里只举一个反例，举一反三即可。
Respond.js允许IE6-8支持媒体查询。 首先，下载相关的JS文件，可以通过github下载，即：respond.src.js文件。
使用 Respond.js 时，有一些要求：
需要启动本地服务器（localhost），不能使用普通本地url地址（以file://开头）； CSS文件需要从外部导入，在style中写入CSS样式是无效的；
由于响应插件会查找 CSS 文件然后对其进行处理，因此响应文件必须放置在 CSS 文件旁边。
.box{
width: 100px;
height: 100px;
background: pink;
}
/* test.css */
.box{
background: skyblue;
}postcss（工程）处理 CSS 兼容性
后面介绍的一些解决方案，比如添加浏览器前缀、贵族降级、JavaScript处理CSS兼容性等，通常需要自动完成，而postcss就是解决这种兼容性的工程形式，从而实现手动处理。
PostCSS 是一个允许使用 JS 插件转换样式的工具。
这个插件可以检查你的 CSS、支持 CSSVariables 和 Mixins、编译浏览器尚未广泛支持的高级 CSS 语法、内联图像和许多其他出色的功能。
有很多常见的插件都是使用postcss来解决CSS兼容性的。 这里有一些：
autoprefixer (手动添加浏览器厂商私有前缀所需的属性) postcss-color-rgba-fallback (IE8不支持rgba()颜色，转换为十六进制补码) postcss-opacity (给IE浏览器添加滤镜属性，作为降级过程) postcss-pseudoelements (让IE8支持逗号:,同时也支持::的伪元素) postcss-vmin (让IE9支持视口相对单位vmin) node-pixrem (让IE10及以下不支持支持rem单位转换成px单位）postcss-cssnext（启用CSS中级新句型支持，贵族降级）
这里只举一个反例，举一反三即可。
只有postcss-cssnext可以支持CSS中间新句型。 原理是对不支持新句型的浏览器进行降级句型。
Postcss可以集成在后端工具webpack和gulp中，也可以通过nodejs环境单独使用。
需要nodejs环境
编译postcss.config.js文件进行任务转换
const cssnext = require('postcss-cssnext');
module.exports = {
plugins: [
cssnext
]
};编译源文件src/demo.css
/* src/demo.css */
:root{
--color: pink;
}
.box{
color: var(--color);
background-color: var(--color);
border: 1px var(--color) solid;
}4.通过命令：postcsssrc/demo.css-odist/demo.css-w
/* dist/demo.css */
.box{
color: pink;
background-color: pink;
border: 1px pink solid;
}中国联通 CSS 兼容性
联通这边CSS兼容的地方还是蛮多的。 以下是一些常见的兼容性处理方法。 首先是联通这边的1px问题。 要理解这个问题，首先需要了解什么是逻辑像素和化学像素。
逻辑像素和化学像素
逻辑像素，也称为“设备独立像素”。
对于后端来说，就是CSS中的像素，例如：iphone6下的逻辑像素是375px。
化学像素，即设备屏幕实际拥有的像素。
一个设备生产出来之后，它们的像素就已经确定了，例如：iphone6下的化学像素是750px。
可以发现，在iphone6下，数学像素是逻辑像素的两倍，这个比例可以用“设备像素比”（即数学像素乘以逻辑像素的值）来表示，可以得到通过 JavaScript 代码 window.devicePixelRatio 设备像素比率。
那么逻辑像素和化学像素之间有什么关系呢？
这里首先确定哪些是相对单位，哪些是绝对单位。
m等绝对单位的定义是什么：一米的宽度等于氪86原子2P10和5d1基态之间跃迁辐射的真空波长的1650763.73倍。 找到的m定义如上，也就是说，在现实世界中，m是一个固定的宽度。
px的全称是像素、像素宽度、像素宽度。
那么我问，超大屏幕的像素大小与你的电脑或手机屏幕的像素大小相同吗？
也就是说，你的手机屏幕上显示的1px宽度可能是0.1mm，露天演出的电子屏上的厚度是5cm。 0.1毫米等于5厘米吗
我感觉px似乎是一个相对单位，如果放在网页或者设计者眼中，可能就不一定如此了。
上面提到的例子是化学像素。 在化学像素的背景下，px确实是一个相对单位。
然而，它在逻辑像素方面有所不同。 css中的1px指的是逻辑像素，浏览器会将你的逻辑像素转换为化学像素。
看来每个设备之间的化学像素尺寸是不同的，使用逻辑像素单元后，显示宽度将是相同的。
开发网页时，我写的是10px。 在您的设备上，逻辑 1px 是 1.2 像素的实际大小，实际上看起来像 10 厘米。
没问题，换个设备，逻辑1px就是真正的2.4像素大小。
也就是说，另一个设备的像素大小是你设备的一半，那么对于他来说，10px就是24像素，而实际大小仍然是10cm，所以，在逻辑像素概念的前提下，px就是一个绝对厚度单元。
总结如下：
逻辑像素：CSS中的像素，绝对单位，保证不同设备下元素的规格相同。 化学像素：设备屏幕的实际像素，相对单位，不同设备下化学像素的大小不同。
一般联通终端的UI设计稿都会按照iphone6的化学像素尺寸来设计，即750px。
其实也可以按照逻辑像素来设计，即375px，通常设计师不会这么做，主要是为了设计稿更清晰。
因此，后端测量规格时，需要乘以2，才能适应页面中的CSS逻辑像素值。
幸运的是，现代UI工具如：Blue Lake、PxCook等都有手动乘以2标记信息的模式。
这样，当设计稿上的像素设置为1px时，对应的逻辑像素应该是0.5px，所以新版本的浏览器中支持0.5px，所以我们写样式border:0.5pxgraysolid没有任何疑问。
为了实现在旧浏览器中的兼容性，需要使用transform:scale(0.5)的形式。
本文作者：东门叔叔，Web后端工程师，对后端CSS、JS、TS、Vue、React、小程序、工程化有深入研究，愿意分享技术。
使用sass和stylus可以方便的使用变量进行样式设计，虽然css也可以定义变量，但是由于原生不支持小程序中的动态css句型，所以定义css，可以使用css变量来让开发工作变得更加简单。
基本用法
基本用法
<!--web开发中顶层变量的key名是:root，小程序使用page-->
page {
--main-bg-color: brown;
}
.one {
color: white;
background-color: var(--main-bg-color);
margin: 10px;
}
.two {
color: white;
background-color: black;
margin: 10px;
}
.three {
color: white;
background-color: var(--main-bg-color);
}
提高使用率
<div class="one">
<div class="two">
<div class="three">
</div>
<div class="four">
</div>
<div>
</div>
.two { --test: 10px; }
.three { --test: 2em; }
在这种情况下定义css，var(--test)的结果是：
class="two"对应的节点：10px
class="two"对应的节点：element: 2em
class="four"对应的节点：10px（继承自parent.two）
class="one"对应的节点：无效值，即该属性的值为未被自定义css变量覆盖的默认值
以上是一些基本概念，大致解释了如何使用css变量。 请注意，在 Web 开发中，我们使用 :root 来设置顶层变量。 更详细的说明请参考MDN文档
css变量的神奇用途
开发中经常遇到的问题就是css数据是硬编码的，无法直接与js变量连接，即有些数据可以动态改变，但css无法使用。对了，可以尝试使用css变量
wxmljs
// 在js中设置css变量
let myStyle = `
--bg-color:red;
--border-radius:50%;
--wid:200px;
--hgt:200px;
`
let chageStyle = `
--bg-color:red;
--border-radius:50%;
--wid:300px;
--hgt:300px;
`
Page({
data: {
viewData: {
style: myStyle
}
},
onLoad(){
setTimeout(() => {
this.setData({'viewData.style': chageStyle})
}, 2000);
}
})
wxml
<view class="container">
<view class="my-view" style="{{viewData.style}}">
<image src="/images/abc.png" mode="widthFix"/>
</view>
</view>
西西
/* 使用var */
.my-view{
width: var(--wid);
height: var(--hgt);
border-radius: var(--border-radius);
padding: 10px;
box-sizing: border-box;
background-color: var(--bg-color);
transition: all 0.3s ease-in;
}
.my-view image{
width: 100%;
height: 100%;
border-radius: var(--border-radius);
}
可以通过css变量动态设置css的属性值
代码片段
github 小程序演示
