CSS代码的兼容性可以靠浏览器的支持和回退机制

 2016-09-20 13:20

《CSS揭秘》的最大创举可能是完全不提供浏览器兼容性表格。这是一个经过深思熟虑的决定。因为以当前浏览器的更新速度来看,这些信息必定在书还没有上架时就已经过时了。所以,作者认为不准确的浏览器支持信息极具误导性,还不如干脆没有

尽管如此,《CSS揭秘》这本书中大多少攻略要么已经在浏览器中获得良好的支持,要不可以做到平稳退化。玩意某项技术在目前的支持程度下特别不理想,作者也在书中标注了。

兼容性检查

有很多优秀的网站提供了及时有效的浏览器兼容性信息,推荐如下:

有时候你可能会发现某个特性已经得到浏览器支持了,但不同浏览器的表现可能还有着细微的差异。比如说,它可能需要一个浏览器前缀,或者在语法上存在细微的差别。《CSS揭秘》书中只会包含符合标准的、无前缀的代码。不过绝大多数情况下,你都可以同时使用各种不同的语法,并且通过层叠机制来确保哪条声明最终生效。所以,我们应该把标准的语法排在最后

举例来说,得到一条黄色到红色的垂直渐变色,《CSS揭秘》只会这样写:

background:linear-gradient(90deg,yellow,red);

但如果你想支持那些较早的浏览器,可能需要把代码这么写:

background:-webkit-linear-gradient(90deg,yellow,red);
background:-moz-linear-gradient(90deg,yellow,red);
background:-o-linear-gradient(90deg,yellow,red);
background:linear-gradient(90deg,yellow,red);

提供退回机制

上面这些只是在兼容上做了考虑,但对于太老的浏览器,这可能就不能实现了。所以,提供退回机制通常是一种很好的做法,这样可以确保你的网站不会在低版本浏览器中挂掉。

还是上面那个案例,我们可以考虑指定一个渐变色作为背景,并且放在代码的最前段:

background: rgb(255,128,0);/*取得渐变平均值*/
background:-webkit-linear-gradient(90deg,yellow,red);
background:-moz-linear-gradient(90deg,yellow,red);
background:-o-linear-gradient(90deg,yellow,red);
background:linear-gradient(90deg,yellow,red);

不过,有些时候不太可能只通过样式的层叠就提供完善的回退样式。这时,我们就可以借助Modernizr这样的工具来给根元素(<html>)增加一些辅助类,比如textshadow、no-textshadow等。这样你就可以针对不支持某些特性的浏览器来分别编写样式了。就像这样:

/*不支持textshadow的*/
h1{color:gray;}

/*支持的*/
.textshadow h1{
    color: transparent;
    text-shadow: 0 0 .3em gray;
}

如果你想尝试使用某个CSS特性非常新,还可以试试用@supports规则来实现回退,可以将其视作浏览器“原生”的Modernizr。代码就可以变成这样:

/*不支持textshadow的*/
h1{color:gray;}

/*支持的*/
@supports (text-shadow: 0 0 .3em gray){
    h1{
    color: transparent;
    text-shadow: 0 0 .3em gray;
    }
}

但在眼下,还不需慎用@supports。在上面的例子中,我们想要的文本投影效果只会在那些支持text-shadow,并且同时支持用@supports规则的浏览器中生效。这个范围很狭窄。


如果您不打算使用Modernizr,那么选择JavaScript也是可以的。如果要检查某个式样属性是否被支持,核心思路就是在任一元素的element.style对象上检查该属性是否存在:

var root=document.documentElement;//<html>

if ('textShadow' in root.style) {
    root.classList.add('textshadow');
}else{
    root.classList.add('no-textshadow');
}

当然,这个转变下就可以变成一个函数了:

function testProperty(property) {
    var root=document.documentElement;

    if (property in root.style) {
        root.classList.add(property.toLowerCase());
        return true;
    }else{
        root.classList.add('no-'+property.toLowerCase());
        return false;
    }
}

如果想检测某个具体的属性值是否支持,那就需要把它赋予给对应的属性,然后再检查浏览器是不是还保存着这个值。很显然,这个过程会改变元素的式样,因此我们需要一个隐藏元素:

var dummy=document.createElement('p');
dummy.style.backgroundImage='linear-gradient(red,tan)';

if (dummy.style.backgroundImage) {
    root.classList.add('lineargradient');
}else{
    root.classList.add('no-lineargradient');
}

同样,也可以很容易改成一个函数:

function textValue(id,value,peoperty) {
    var dummy=document.createElement('p');
    dummy.style[peoperty]=value;

    if (dummy.style[peoperty]) {
        root.classList.add(id);
        return true;
    }else{
        root.classList.add('no'+id);
        return false;
    }
}
作者头像

作者:紫铜炉

自由博主,网页设计师。我关注科技产品和个人博客发展,注重用户体验和界面优化。

 发表评论: