Feature Detection: CSS3 Resize Property

[jlizarraga]

Hi all,

Is there a way to test if the client supports the resize property?

EDIT: Figured it out, thanks to Filament Group (http://www.filamentgroup.com/lab/delivering_the_right_experience_to_the_right_device/) and MDC (https://developer.mozilla.org/en/DOM/window.getComputedStyle).


try{ // CSS3 Resize Test
document.styleSheets[0].insertRule("#css3-resize-test { display: none; resize: both; }", document.styleSheets[0].cssRules.length);
var oResizeTest = document.createElement("textarea");
oResizeTest.id = "css3-resize-test";
document.body.appendChild(oResizeTest);
if(window.getComputedStyle(oResizeTest, null).getPropertyValue("resize") == "both"){
// Your code here.
}
}
catch(pError){}

[jscheuer1]

Presumably, and in limited testing (In Safari 3 Win, and Google Chrome which support it, and in Opera 9, Fx 3, and IE 7 which do not), one would just need to test:


typeof document.documentElement.style.resize

If supported, this will be 'string', otherwise 'undefined', so do like:


if(typeof document.documentElement.style.resize === 'string'){
code here to take advantage of this property
}

The document.documentElement object is available for this sort of testing immediately after the opening html tag has been parsed, so this test may be used in the head of your document.

[jlizarraga]

Wow did I over complicate that one! LOL

Thanks John!

EDIT: Wow, this page is the fifth result in google for "css3 resize".