vendor-prefix

Setting vendor-prefixed CSS using javascript

by

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] = value; element.style[“ms” + property] = value; element.style[“o” + property] = … Read more

List of CSS vendor prefixes?

by

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 Committee -wap- The WAP Forum -webkit- Safari, Chrome (and other WebKit-based browsers) -khtml-, -konq- Konqueror browser -apple- Webkit supports properties using the -apple- prefixes as well prince- YesLogic -ah- Antenna … Read more

Using variables in property names in LESS (dynamic properties / property name interpolation)

by

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; @value){ -webkit-@{property}: @value; -moz-@{property}: @value; -ms-@{property}: @value; -o-@{property}: @value; @{property}: @value; } /*example*/ .test { … Read more

Does .css() automatically add vendor prefixes?

by

As @zeroflagL wrote it appears that since jQuery 1.8.0 .css() does add browser specific prefixes (see this). In earlier versions this is not done automatically by jQuery’s .css(). You will have to do it by yourself or you can use jQuery’s .cssHooks() to add vendor prefixes. Code example from here: (function($) { if ( !$.cssHooks … Read more

Ordering of vendor-specific CSS declarations

by

The best practise is undisputedly to have the unprefixed property last: .foo { -moz-border-radius: 10px; /* Mozilla */ -webkit-border-radius: 10px; /* Webkit */ border-radius: 10px; /* W3C */ } Whichever is last out of -webkit-border-radius and border-radius will be the one that’s used. -webkit-border-radius is the “experimental” property – the implementation may contain deviations from … Read more

How to validate vendor prefixes in CSS like -webkit- and -moz-?

by

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 ignoring the standard, the actual vendor extensions themselves are not recognized as official CSS properties. This is not going to change, as they’re proprietary and specific to the vendors … Read more

Why do browsers create vendor prefixes for CSS properties?

by

It’s because the features were implemented by vendors before the specification reached its final release stage. The vendor prefixes ensure that there are no clashes with changing functionality etc. Originally, the point of vendor prefixes was to allow browser makers to start supporting experimental CSS declarations. Let’s say a W3C working group is discussing a … Read more