动态CSS3前缀用户代理检测 [英] Dynamic CSS3 prefix user agent detection

问题描述

有没有更好的方法，然后使用 jQuery.browser ，或等效，用于确定 css 3 前缀（-moz，-webkit等），作为它是disencouraged ？由于css是动态的（用户可以在运行时对它进行任何操作），css hacks和样式标签hack不能被考虑。

Is there a better way then using jQuery.browser, or equivalents, for determining css 3 prefixes (-moz, -webkit, etc), as it is disencouraged? Since the css is dynamic (the user can do anything with it on runtime), css hacks and style tag hacks can't be considered.

推荐答案

我没有看到使用 navigator.userAgent 来确定是否需要满足Webkit / Gecko CSS3前缀的问题。

I don't see the issue with using the navigator.userAgent to determine if you need to cater for Webkit / Gecko CSS3 prefixes. Or better yet, just stick with CSS2 until CSS3 becomes a W3C Recommendation.

使用 navigator 对象的原因不鼓励是因为它是在针对不同浏览器的（java）脚本编写时通过对象检测使用的，您的情况是使用用户代理检测的情况，因为您的具体针对具有不同渲染引擎的某些怪癖。

The reason use of the navigator object is discouraged is because it was used over Object detection when (java)scripting for different browsers, your situation is one where it is fine to use user agent detection, because your'e specifically targeting certain quirks with different rendering engines.

编辑：
从cy离开的位置取出，你可以使用javascript对象检测来检测是否使用了前缀，我做了一些代码：

Picking up from where cy left off, you can use javascript object detection to detect whether a prefix is used, I made some quick code to do so:

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样式的前缀。

Remember to watch out for strange quirks such as -moz-opacity which is only supported in older versions of Firefox but has now been deprecated in favour of opacity, while it still uses the -moz- prefix for other new CSS3 styles.

这篇关于动态CSS3前缀用户代理检测的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！