javascript - Modernizr 如何使用 css 有条件地加载 (Modernizr) 类？

Question

我只是在检查 modernizr 类的 css 表达式是如何工作的……正如我在 Google dev 上看到的那样。工具如下:

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

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

'radiusyImage' 不添加额外的 http 请求..我知道这是可能的(仅在必要时加载源):

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

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

Answer 1

当前的浏览器不会请求它们不会在 html 中使用的图像 See this question .

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

这里唯一的缺点是在你的 CSS 中多了几行样式，但它的影响是不明显的。