CSS属性值的兼容hack技巧

天意pt

于 2016-12-16 15:50:32 发布

阅读量489

点赞数

分类专栏： CSS

CSS 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

区分IE10+浏览器的属性hack技巧
哪些CSS属性IE10支持，IE9不支持了，除了transition和animation，那就是gradient背景渐变了，于是乎，我们就可以借助多背景，巧妙实现我们的兼容效果，核心CSS代码如下：

CSS代码：
.box {
width: 100px; height: 100px;
background: url(loading_blue.gif) no-repeat center;/*IE9支持多背景，但是由于不认识渐变linear-gradient语法*/;
background: url(loading_blue.png) no-repeat center, linear-gradient(to top, transparent, transparent); /* 代码IE9不认识 */
animation: spin 1s linear infinite;
}
@keyframes spin{
from { transform:rotate(0); }
to { transform:rotate(-360deg); }

}

HTML代码：
<div class="box"></div>

虽然IE9支持多背景，但是由于不认识渐变linear-gradient语法，所以，下面那行background:... CSS代码IE9不认识，于是，IE9就是要了上面的loading_blue.gif，从而轻松实现CSS3 animation下的loading效果的向下兼容效果。

需要注意的是，下面的background只能是background，虽然理论上使用background-image也是可以的，但是在IE7, IE8浏览器下面，background-image如果是个不认识的东西，他们不会认为这行CSS无效，而是认为你这个背景图有问题，于是会导致IE7,IE8浏览器下连gif loading图片都实现不出来。

如何巧妙隐藏IE9及其以下浏览器版本中的元素
最近遇到一个项目，设计师设计的一些图形效果非常适合用CSS3绘制，其中有斜纹边框效果，这就导致只能兼容到IE10，IE9及其以下浏览器还是图片。

适合图形绘制的效果截图

这个例子的HTML要比上面的loading案例要复杂，由于图形负责，因此，会有很多的HTML内容出现，而对于IE9，这些都是不需要的，因为背景图只需要一层标签即可。所以，这里出现了2处需要兼容处理的地方，其一，IE10+没有背景图；其二，IE9-里面的子元素要全部没效果，比方说隐藏。

第一个兼容处理好办，跟上面的loading处理类似：

.box {
    background: url(shape.png);
    background: linear-gradient(to top, transparent, transparent), none;
}

关键里面的元素隐藏怎么办？有什么隐藏属性IE10认识，IE9不认识的？不好意思，没有，要么都认识，要么都不认识。难道没有什么处理方法了吗？有！

我们平时写CSS3属性的时候，习惯性会加私有前缀，虽然现在很多属性都不需要了，比方说：

.box {
    -webkit-animation: spin 1s linear infinite;
    animation: spin 1s linear infinite;
}

这种私有前缀写法，本质上就是本文的利用浏览器的兼容性的向下兼容策略。所以，如果浏览器之间的属性支持有私有前缀之分，也是可以利用属性兼容性实现向下兼容效果的。

IE9和IE10之间需要私有前缀区分的CSS属性其实为数不多，其中之一就是transform属性：
IE9 transform需要私有前缀

也就是IE9浏览器下，如果transform不加私有前缀是不认识的。好了，我们有思路了，我们可以利用transform来实现我们的隐藏效果。

核心CSS如下：

.box > div {
  position: relative;
  left: -999px;                 /* 所以浏览器偏移屏幕之外 */
  transform: translateX(999px); /* IE10+位置修正 */
}

理论上，上面代码就可以满足我们的需求了。但是，注意的是，transform需要私有前缀的浏览器是原生的IE9浏览器，用户使用的时候肯定都是使用原生版本的，如果从用户角度考虑，我们工作到此为止。但是，我们的测试同事很可能就是使用IE11等浏览器的向下兼容模式看的，要知道，IE11↘IE9的transform不需要-ms-私有前缀也能识别，很可能你这里的实现就会被报bug.
IE11的IE9浏览模式

所以，安全起见，我们需要对上面的CSS做进一步的处理，如下：

.box > div {
    position: relative;
    left: -999px;                            /* 所以浏览器偏移屏幕之外 */
    transform: translate3d(999px,0,0);       /* IE10+位置修正 */
}

嘿嘿，双保险，就算非原生IE9的transform不需要-ms-私有前缀，3d transform那肯定是不认识的，于是乎，一个完美的区分IE10和IE9隐藏的向下兼容方案就实现了。

对CSS属性值兼容策略技巧实现的结语

有时候重要的不是技巧本身，而是解决问题的思路。以后，大家如果需要做一些向下兼容的处理，不妨就试试这种利用属性值兼容性实现的兼容技巧，完全不影响权重，不干扰正常的CSS复杂度。

有人说他在用：

<!–[if lt IE 7 ]><![endif]–>
<!–[if IE 7 ]><![endif]–>
<!–[if IE 8 ]><![endif]–>
<!–[if IE 9 ]><![endif]–>
<!–[if (gt IE 9)|!(IE)]>>–><!–

我还是喜欢这样的方法，如果要求复杂一些就用Modernizr

还有更多Hack 技巧，如：

摘录一些评论内容：

color:red\9; /*IE8以及以下版本浏览器*/
*color:green; /*IE7及其以下版本浏览器*/
_color:purple; /*IE6浏览器*/
经常这样用，感觉用的习惯了，这样的方法有什么缺点吗？

你这样写应该只是区分ie9以下的浏览器

前辈这篇文章总结得很好，这里有相关的文档 CSS Compatibility in Internet Explorer :

https://msdn.microsoft.com/en-us/library/hh781508(v=vs.85).aspx

IE8- 不支持的还有某些单位 (ch, rem, vw…) 能用来作兼容