Question

如果支持CSS3，我该如何运行js / jquery。

我已经在使用modernizr，但是如何使用它来检测对这种确切样式的支持，而不是对功能的预构建测试之一。

我需要检查支持的CSS是：

@supports((-moz-font-feature-settings:"liga=1, dlig=1") or (-moz-font-feature-settings:"liga","dlig") or (-ms-font-feature-settings:"liga","dlig") or (-o-font-feature-settings:"liga","dlig") or (-webkit-font-feature-settings:"liga","dlig") or (font-feature-settings:"liga","dlig"){ //nothing in here }

如果支持，那么我需要运行某些jQuery代码。我不能在支持查询中做到这一点，因为我需要做的不仅仅是应用样式，而是CSS不能做的事情，只有JS / jQuery。

Answer 1

只需在//nothing in here添加一些独特的CSS，然后使用JavaScript检测是否添加了CSS。

@supports((-moz-font-feature-settings:"liga=1, dlig=1") 
or (-moz-font-feature-settings:"liga","dlig")
or (-ms-font-feature-settings:"liga","dlig")
or (-o-font-feature-settings:"liga","dlig") 
or (-webkit-font-feature-settings:"liga","dlig") 
or (font-feature-settings:"liga","dlig")
{ 
    body { z-index: 689; }
}

然后JavaScript：

if(document.getElementsByTagName('body')[0].style.zIndex === 689)
{
    // The CSS features are supported
} else {
    // Not supported
}

Answer 2

从https://github.com/Modernizr/Modernizr/issues/902开始测试结扎支持，请执行此操作

if((Modernizr.prefixed("fontFeatureSettings")){
    //ligatures supported  
} else{
    //ligatures not supported
}

如果支持CSS，则运行JS / JQuery

2 个答案: