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 代码。我不能在 supports-query 中做这件事，因为我需要做的不仅仅是应用样式，而这是 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
}