In this article I will demonstrate a neat new capability within jQuery 1.8 (currently in beta2) which applies vendor specific CSS3 transformations without having to call out each one individually.

Introduction

The W3C specification for CSS3 allows for vendor specific style extensions which is a good thing and a bad thing. When attempting to do a transform for example it means increasing the size of your style sheet to try and accommodate all the possibilities.

For Example when trying to do a Transform we need to add -moz and -webkit to get the feature to work in those browsers
(code gleaned from http://www.html5rocks.com/en/tutorials/3d/css/)

	DIV {
		-moz-transform: rotate3d(0, 1, 1, 30deg);
		-webkit-transform: rotate3d(0, 1, 1, 30deg);
		transform: rotate3d(0, 1, 1, 30deg);
	}

Demonstration

You can see the issue for yourself at this link – try the different browsers and you will see – (no transform in IE)

As you can see from the examples below the style is specific to the browser (-moz = mozilla | -webkit chrome/safari)

Using the new jQuery feature

Checking out the jQuery blog we can see that one of the new features of jQuery 1.8 is the browser compensation for applying vendor specific styles

VENDOR-PREFIXED CSS PROPERTIES

The W3C had its heart in the right place when it came up with the idea to use vendor prefixes for CSS features that were not yet standardized, but it hasn’t resulted in a fairy-tale ending. Web developers are faced with the nightmare of including all the vendor-prefixed property names in stylesheets. jQuery 1.8 eases the pain a bit. We automatically take the non-prefixed property name and generate the prefix that is appropriate for the current browser, so you don’t have to. For example, on Chrome the jQuery call $("#myscroll").css("marquee-direction", "backwards") will set the CSS to -webkit-marquee-direction: backwards.

On the demo site I have demonstrated a simple implementation of  it using the following  jQuery css method call.

	function jQTransform(){
		$("#jQiFrame").css('transform', 'rotate3d(0, 1, 1, 30deg)')
	}

On the demo page you can click the button and in each of the three browsers chrome/firefox/safari you will see the transformation

This is a simple demonstration but once again shows why browser compatibility continues to be a problem and how jQuery helps the developer correct for that.