Feature Detection -- knowing what feature to detect for dealing w/ border-radius issue using $.support
Hi everyone... hope y'all are having a fun n' festive jQuery-filled day! Here's my dilemma. Hopefully, someone can help me out.
The situation:
I'm building a site for my boss that uses rounded corners on divs. For modern browsers, I'm using the .corners() plug-in, but it isn't a perfect solution. In particular, the css Border properties aren't displaying the same in IE (and, until I upgraded Opera today, the prior version of Opera showed the same thing). Specifically, when keeping the border in those browsers, the border still follows the square corners of the original DIV shape instead of following the curve. (If I didn't need to keep the CSS border property, it'd be fine.)
My Solution:
OK, no problem ... I've created an alternate scenario for those browsers wherein, instead of using the corners plug-in, I'm dynamically wrapping the div in a series of nested DIVs and using the old 4-corners/4-images solution to fake it. I know it isn't an ideal solution, but it keeps my original markup semantically correct and only applies the nested DIVs when absolutely necessary, and only does so using JS and manipulating the DOM.
The Problem:
I could just test for browser, but I know that feature-detection using $.support is a better answer. However, I don't know what features to test for in order to determine whether to use the modern solutions provided by the .corners() plug-in vs. my alternate nested-divs solution.
I initially was testing for $.support.opacity, because it seemed the most likely candidate. However, this morning, when I checked Opera, it proved me wrong, as it was using the .corners() plug-in version, but the borders still went all the way to the hard square corners. BTW, upgrading to the newest version of Opera took care of that issue, but it still shows me that 'opacity' isn't necessarily the feature to look for.
So, the big question is this: what feature should I be testing for to determine whether the browser will not only be able to support rounding of the corners, but also have the border follow that radius as well? If this isn't a native part of the $.support tool, can someone offer suggestions on plugging that hole?
Many, many thanks.
Cheers!
The situation:
I'm building a site for my boss that uses rounded corners on divs. For modern browsers, I'm using the .corners() plug-in, but it isn't a perfect solution. In particular, the css Border properties aren't displaying the same in IE (and, until I upgraded Opera today, the prior version of Opera showed the same thing). Specifically, when keeping the border in those browsers, the border still follows the square corners of the original DIV shape instead of following the curve. (If I didn't need to keep the CSS border property, it'd be fine.)
My Solution:
OK, no problem ... I've created an alternate scenario for those browsers wherein, instead of using the corners plug-in, I'm dynamically wrapping the div in a series of nested DIVs and using the old 4-corners/4-images solution to fake it. I know it isn't an ideal solution, but it keeps my original markup semantically correct and only applies the nested DIVs when absolutely necessary, and only does so using JS and manipulating the DOM.
The Problem:
I could just test for browser, but I know that feature-detection using $.support is a better answer. However, I don't know what features to test for in order to determine whether to use the modern solutions provided by the .corners() plug-in vs. my alternate nested-divs solution.
I initially was testing for $.support.opacity, because it seemed the most likely candidate. However, this morning, when I checked Opera, it proved me wrong, as it was using the .corners() plug-in version, but the borders still went all the way to the hard square corners. BTW, upgrading to the newest version of Opera took care of that issue, but it still shows me that 'opacity' isn't necessarily the feature to look for.
So, the big question is this: what feature should I be testing for to determine whether the browser will not only be able to support rounding of the corners, but also have the border follow that radius as well? If this isn't a native part of the $.support tool, can someone offer suggestions on plugging that hole?
Many, many thanks.
Cheers!