vendor-prefix

...is a huge pain. var transform = 'translate3d(0,0,0)'; elem.style.webkitTransform = transform; elem.style.mozTransform = transform; elem.style.msTransform = transform; elem.style.oTransform = transform; Is there a library/framework/better way to do this? Preferably with just one line of JS? I don't know of any library that does this, but if they are all just prefixes --that is, there is no difference in name or syntax--writing a function yourself would be trivial. function setVendor(element, property, value) { element.style["webkit" + property] = value; element.style["moz" + property] =

I noticed that inuit.css, which was written in SASS, has a .vendor mix-in: @mixin vendor($property, $value...){ -webkit-#{$property}:$value; -moz-#{$property}:$value; -ms-#{$property}:$value; -o-#{$property}:$value; #{$property}:$value; } Is there a way to replicate this in LESS with some of the odd features like e() and @{ } ? Martin Turjak Update: LESS >= 1.6 As of version 1.6 (see changelog ) property name interpolation is implemented in LESS. So you don't need any magic anymore. (For older versions, see my original answer.) Your mixin would work basically as is: LESS: .vendor(@property;

Besides the following list, are there other CSS vendor prefixes that are important for web development ? Are my definitions correct? Should I be more specific about mobile browsers (mobile Webkit, e.g.) -khtml- (Konqueror, really old Safari) -moz- (Firefox) -o- (Opera) -ms- (Internet Explorer) -webkit- (Safari, Chrome) Does this list (which also contains mso- , -wap- , and -atsc- ) add anything of value? Greg These are the ones I'm aware of: -ms- Microsoft mso- Microsoft Office -moz- Mozilla Foundation (Gecko-based browsers) -o- , -xv- Opera Software -atsc- Advanced Television Standards

I have some code: $("#" + this.id).css("border-radius",this.radius + "px"); $("#" + this.id).css("-moz-border-radius",this.radius + "px"); $("#" + this.id).css("-webkit-border-radius",this.radius + "px"); I am trying to improve lines like this by using JSON to apply them (as shown in jQuery's docs) or by removing the vendor prefix versions completely. Does jQuery's .css() method automatically apply any required vendor prefixes when changing CSS properties on an element? As @zeroflagL wrote it appears that since jQuery 1.8.0 .css() does add browser specific prefixes ( see this ). In earlier

I think I've written something like the following a thousand times now: .foo { border-radius: 10px; /* W3C */ -moz-border-radius: 10px; /* Mozilla */ -webkit-border-radius: 10px; /* Webkit */ } But only now have I thought about whether the ordering of those is important? I know that between -moz-* and -webkit-* it doesn't matter, since at most 1 of those will be read, but is it better (in terms of future-proofing, etc) to do the W3C standard first or last? thirtydot The best practise is undisputedly to have the unprefixed property last: .foo { -moz-border-radius: 10px; /* Mozilla */ -webkit

I use the webkit/mozilla border radius and box shadow CSS properties, but I want the CSS to validate (which it currently does not). Is there a way to get it to validate? http://jigsaw.w3.org/css-validator/ No, they are browser specific properties, and not defined in the standard CSS specification. That being said, they correctly follow the rules for vendor specific extension of CSS. It's just not in the W3C official CSS specification. Although the syntax for vendor extensions is mentioned in the CSS3 Syntax module and introduced into the grammar to allow vendors to implement their own prefixes