Created
February 23, 2011 07:39
-
-
Save louisremi/840141 to your computer and use it in GitHub Desktop.
Why is IE9 Another Thorn in our Side?
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
* margin-top or marginTop? | |
* When to use lower-case and camel-case property names in JavaScript. | |
*/ | |
// Setting style: camel-case | |
elem.style.marginTop = '10px'; | |
// Getting style: camel-case | |
var value = elem.style.marginTop; | |
// Getting computed style: lower-case | |
var value = | |
window.getComputedStyle(elem).getPropertyValue( 'margin-top' ); | |
/* Vendor prefixed properties are slightly different */ | |
// Setting or getting style: camel-case with leading upper-case | |
elem.style.MozTransform = "rotate(90deg)"; | |
// or WebkitTransform or OTransform | |
// Getting computed style: lower-case with leading dash | |
var value = | |
window.getComputedStyle(elem).getPropertyValue( '-moz-transform' ); | |
// or "-webkit-transform" or "-o-transform" | |
/* Trickier: setting the transition property */ | |
// mixed camel-case and lower-case | |
elem.style.MozTransition = | |
"margin-top 1s ease, -moz-transform 1s linear"; | |
/* Too complex? | |
* No worries, JavaScript libraries can handle that for you | |
*/ | |
// Setting style with jQuery: any form can be used | |
$( elem ).css( 'margin-top', '10px' ); | |
// Getting computed style with jQuery: any form can be used | |
$( elem ).css( 'marginTop' ); | |
// Even with vendor prefixed properties | |
$( elem ).css( 'MozTransform' ); | |
/* Conversion is actually really easy using regular expressions */ | |
function camelCase( name ) { | |
return name.replace(/-([a-z])/g, function( all, letter ) { | |
return letter.toUpperCase(); | |
}); | |
} | |
function lowerCase( name ) { | |
return name.replace(/([A-Z])/g, "-$1").toLowerCase(); | |
} | |
/* | |
* They work both for "standard" properties AND vendor prefixed ones! | |
* ... | |
* Introducing IE9 | |
*/ | |
// Setting and Getting style: camel case without leading upper-case! | |
elem.style.msTransform = "rotate(90deg)"; | |
/* Thought dirty browser-specific workarounds were a thing of the past? | |
* Think again. | |
*/ | |
function fixedCamelCase( name ) { | |
if ( name.indexOf('-ms-') === 0 ) { | |
name = name.substr(1); | |
} | |
return name.replace(/-([a-z])/g, function( all, letter ) { | |
return letter.toUpperCase(); | |
}); | |
} | |
function fixedLowerCase( name ) { | |
return name.replace(/([A-Z]|^ms)/g, "-$1").toLowerCase(); | |
} | |
/* Thank god there are no style properties starting with "ms..." */ | |
@louis_remi |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment