动态CSS3前缀用户代理检测

Question

有没有更好的方法然后使用jQuery.browser或等价物来确定css 3前缀(-moz,-webkit等),因为它是不鼓励的？由于css是动态的(用户可以在运行时对其执行任何操作),因此无法考虑css hacks和样式标记hacks.

Answer 1

我没有看到使用它navigator.userAgent来确定是否需要满足Webkit/Gecko CSS3前缀的问题.或者更好的是,只需坚持使用CSS2,直到CSS3成为W3C推荐标准.

navigator不鼓励使用该对象的原因是因为它在用于不同浏览器的(java)脚本时被用于对象检测,您的情况是可以使用用户代理检测的情况,因为您专门针对具有不同渲染的某些怪癖引擎.

编辑: 从cy停止的地方拾取,您可以使用javascript对象检测来检测是否使用了前缀,我做了一些快速代码来执行此操作:

window.onload = function ()
{
    CSS3 = {
        supported: false,
        prefix: ""
    };
    if (typeof(document.body.style.borderRadius) != 'undefined') {
        CSS3.supported = true;
        CSS3.prefix = "";
    } else if (typeof(document.body.style.MozBorderRadius) != 'undefined') {
        CSS3.supported = true;
        CSS3.prefix = "-moz-";
    } else if (typeof(document.body.style.webkitBorderRadius) != 'undefined') {
        CSS3.supported = true;
        CSS3.prefix = "-webkit-";
    }
    if (CSS3.supported)
        if (CSS3.prefix == "")
            alert("CSS3 is supported in this browser with no prefix required.");
        else
            alert("CSS3 is supported in this browser with the prefix: '"+CSS3.prefix+"'.");
    else
        alert("CSS3 is NOT supported in this browser.");
};

请记住要注意奇怪的怪癖,例如-moz-opacity仅在旧版本的Firefox中支持但现在已被弃用opacity,而它仍然使用-moz-其他新CSS3样式的前缀.