Modernizr如何使用css有条件地加载（Modernizr）类？

Question

我只是在检查如何使用modernizr类的css表达式工作..正如我在Google开发中看到的那样。以下工具：

//normal css
.box{
    width:100px;
    height:100px;
    border-radius:20px;
    background:blue;

//as modernizr detects no support..
.no-borderradius .box{
     background:url(radiusyImage.png);
}

＆＃39; radiusyImage＆＃39;没有添加额外的http请求..我知道这是可能的（只有必要加载源）与js：

if (!Modernizr.borderradius) {
    //load img or a pollyfill..
}

但是用css怎么可能呢？它实际上是如何工作的？

Answer 1

当前浏览器不会请求他们不会在html See this question中使用的图片。

由于Modernizr仅在浏览器不支持该属性时才添加no-borderradius类，因此任何现代浏览器都不会有匹配.no-borderradius .box的DOM元素，因此图像将不会加载。

这里唯一的缺点是你的CSS中有更多的样式，但它的影响是不明显的。