使用Modernizr实现CSS雪碧图兼容WebP与PNG格式的配置问题

问题原因 #

你的代码存在CSS语法错误：.webp、.no-webp是Modernizr添加在页面根元素（通常是<html>标签）上的全局标识类，不能直接写在样式声明块内部作为属性前缀，这种写法会被浏览器判定为非法属性，直接忽略整个背景图规则，所以没有任何图片显示。

修正方案 #

需要把标识类作为选择器前缀，匹配根元素的类状态，从而命中对应浏览器场景的样式，修正后的代码如下：

/******************************************* Sprites *******************************************/
/* 支持WebP的浏览器样式 */
.webp #fancybox-close,
.webp .SI-FILES-STYLIZED .cabinet,
.webp .SI-FILES-STYLIZED .cabinet:hover,
.webp .arrow-link-down,
.webp .arrow-link-up,
.webp .big-btn,
.webp .big-btn:hover,
.webp .checklink-box ul li a,
.webp .close_button,
.webp .crlist,
.webp .crlist:hover,
.webp .ez-checkbox,
.webp .ez-checked,
.webp .ez-radio,
.webp .icon,
.webp .left-col .icon,
.webp .mid-btn,
.webp .mid-btn:hover,
.webp .minus,
.webp .minus:hover,
.webp .plus,
.webp .plus:hover,
.webp .search-btn,
.webp .search-btn:hover,
.webp .selectBox-arrow,
.webp .tip-boxes span.triangle,
.webp .title-icon,
.webp a.arrow-link,
.webp a.arrow-link-left,
.webp a.arrow-link:hover,
.webp a.fb-icon,
.webp a.fb-icon:hover,
.webp a.twitter-icon,
.webp a.twitter-icon:hover,
.webp div#tab-indicator,
.webp footer#footer div.container,
.webp li#login,
.webp li#login>a,
.webp nav.slides-nav ul li a {
    background-image: url(../img/sprite.webp);
    background-repeat: no-repeat;
}

/* 不支持WebP的浏览器样式 */
.no-webp #fancybox-close,
.no-webp .SI-FILES-STYLIZED .cabinet,
.no-webp .SI-FILES-STYLIZED .cabinet:hover,
.no-webp .arrow-link-down,
.no-webp .arrow-link-up,
.no-webp .big-btn,
.no-webp .big-btn:hover,
.no-webp .checklink-box ul li a,
.no-webp .close_button,
.no-webp .crlist,
.no-webp .crlist:hover,
.no-webp .ez-checkbox,
.no-webp .ez-checked,
.no-webp .ez-radio,
.no-webp .icon,
.no-webp .left-col .icon,
.no-webp .mid-btn,
.no-webp .mid-btn:hover,
.no-webp .minus,
.no-webp .minus:hover,
.no-webp .plus,
.no-webp .plus:hover,
.no-webp .search-btn,
.no-webp .search-btn:hover,
.no-webp .selectBox-arrow,
.no-webp .tip-boxes span.triangle,
.no-webp .title-icon,
.no-webp a.arrow-link,
.no-webp a.arrow-link-left,
.no-webp a.arrow-link:hover,
.no-webp a.fb-icon,
.no-webp a.fb-icon:hover,
.no-webp a.twitter-icon,
.no-webp a.twitter-icon:hover,
.no-webp div#tab-indicator,
.no-webp footer#footer div.container,
.no-webp li#login,
.no-webp li#login>a,
.no-webp nav.slides-nav ul li a {
    background-image: url(../img/sprite.png);
    background-repeat: no-repeat;
}

如果需要精简代码体积，可使用Sass、Less等CSS预处理器，通过变量、嵌套语法简化重复的选择器书写。

内容的提问来源于stack exchange，提问作者avago