如果浏览器支持CSS3媒体查询和CSS3渐变,我如何通过JavaScript检测？

Question

如果浏览器支持CSS3媒体查询,如何通过JavaScript检测？

如果浏览器支持CSS3渐变,如何通过JavaScript检测？

谢谢.

Answer 1

破解打开Modernizr(可以测试媒体查询),我们看到它使用window.matchMedia(MDN页面)功能.我们可以检查普通的老香草JS,看看这个功能是否存在(Modernizr 真的很棒,但有时你只想要一块砖,而不是房子):

function mediaQueriesSupported()
{
    if(typeof window.matchMedia != "undefined" || typeof window.msMatchMedia != "undefined")
    {
        // alert("media queries are supported!");
        return true;
    }else{
        // alert("no media query support :(");
        return false;
    }
}

或者更优雅:

function mediaQueriesSupported()
{
    return (typeof window.matchMedia != "undefined" || typeof window.msMatchMedia != "undefined");
}

的jsfiddle

我在以下支持媒体查询的浏览器中进行了测试,所有正确返回true:

• Safari Mobile
• Chrome 26

我已经在以下不支持媒体查询的浏览器中进行了测试,所有正确返回false:

• IE 7

至于梯度支持检测,这里和这里有一些很好的答案.实际上,您只需设置属性然后进行测试即可.浏览器会丢弃垃圾或不支持的CSS属性.

编辑:

Niet在这里对这个问题有很好的答案,类似于我对梯度检测的建议.它不是纯粹的Javascript(它需要非常少量的CSS),但它是一种绝对万无一失的方法.

Answer 2

看看http://modernizr.com/,它是一个很棒的使用javascript进行featuredetection的库.