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.
+2
A:
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.
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.
Edit: 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.");
};
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.
Andrew Dunn
2010-09-20 03:28:48
Except it can be hard to discern where support for those prefixes begins and ends. ie, knowing someone is using Firefox doesn't mean they'll support -moz-border-radius if it was added in version X and they're in a version before X. This is a hard question.
yc
2010-09-20 04:17:09
This is excellent.
yc
2010-09-20 12:12:01
This is a better solution, just don't forget to check for `$('#blah').css('border-radius');` too.
Andrew Dunn
2010-09-20 03:48:21
This is very interesting. Is requires 5 checks ('-webkit', '-moz', '-o', '-ms', and the empty prefix), can be done on a hidden element at the beginning of the window setup which is later on removed. Very nice.
Daniel Ribeiro
2010-09-20 03:53:10
Yeah, I wouldn't congratulate me just yet. It seems the results aren't yet reliable; trying to improve it.
yc
2010-09-20 03:55:15
Don't worry, I'll try it out on our target browsers first as well.
Daniel Ribeiro
2010-09-20 04:02:06
This answer isn't right. Seems to only work for Chrome; Doesn't work for Firefox or Opera; haven't tested for IE.
yc
2010-09-20 04:09:01
This article could be useful: http://perfectionkills.com/feature-testing-css-properties/
yc
2010-09-20 04:46:43
+1
A:
It's adding in another library, but would Modernizr work for you? It adds CSS classes to the <html> tag that can tell you what the browser supports.
It does muddy up the code a bit, but can certainly be helpful in appropriate situations.
Jeff Rupert
2010-09-20 04:02:14
Not sure if this can help with prefix things, though. Guess I shouldn't have made this an answer. =/
Jeff Rupert
2010-09-20 04:04:49
It really doesn't, does it? It would be great if modernizer had a Modernizer.prefix thing. I had come across it about an year ago, but it has really grown. It does complement the prefixes nicely, and gives cleaner implementation of dynamic properties (don't even try to set something if it is not supported).
Daniel Ribeiro
2010-09-20 04:27:45