Use the site http://shouldiprefix.com. It has the single purpose to “show what prefixes are needed for a newer CSS property.” Just enter the property you’re interested in the search field, and it will return something like the below graphic:
React does not apply vendor prefixes automatically. In order to add vendor prefixes, name the vendor prefix as per the following pattern, and add it as a separate prop: -vendor-specific-prop: ‘value’ becomes: VendorSpecificProp: ‘value’ So, in the example in the question, it needs to become: <div style={{ transform: ‘rotate(90deg)’, WebkitTransform: ‘rotate(90deg)’ }}>Hello World</div> Value prefixes … Read more
It really depends on which features and which browsers you want to fully support. Even now some browsers are lagging. Here is a really excellent guide: http://caniuse.com/
Though it is not always the case, one of the most common reasons why a property like transition or animation works on some browsers and not others is because of vendor prefixes. What are vendor prefixes? At the time version 4 of Firefox was introduced, the CSS transition module specification was a Working Draft. Before … Read more
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
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
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
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
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
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