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

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

只需在您拥有的地方添加一些独特的 CSS//nothing in here并使用 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
}