Does .css() automatically add vendor prefixes?
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 ) {
throw("jQuery 1.4.3+ is needed for this plugin to work");
return;
}
function styleSupport( prop ) {
var vendorProp, supportedProp,
capProp = prop.charAt(0).toUpperCase() + prop.slice(1),
prefixes = [ "Moz", "Webkit", "O", "ms" ],
div = document.createElement( "div" );
if ( prop in div.style ) {
supportedProp = prop;
} else {
for ( var i = 0; i < prefixes.length; i++ ) {
vendorProp = prefixes[i] + capProp;
if ( vendorProp in div.style ) {
supportedProp = vendorProp;
break;
}
}
}
div = null;
$.support[ prop ] = supportedProp
return supportedProp;
}
// check for style support of your property
// TODO by user: swap out myCssPropName for css property
var myCssPropName = styleSupport("myCssPropName");
// set cssHooks only for browsers that
// support a vendor-prefixed border radius
if (myCssPropName && myCssPropName !== 'myCssPropName') {
$.cssHooks["myCssPropName"] = {
get: function(elem, computed, extra) {
// handle getting the CSS property
return $.css(elem, myCssPropName);
},
set: function(elem, value) {
// handle setting the CSS value
elem.style[myCssPropName] = value;
}
};
}
})(jQuery);
How to set vendor prefixed CSS values (NOT property names) | client-side
maybe Modernizr can fix this, like
// returns: -webkit-linear-gradient(left, red, red)
Modernizr.prefixedCSSValue('background', 'linear-gradient(left, red, red)')
How it works:
// prefixedCSSValue is a way test for prefixed css properties (e.g. display: -webkit-flex)
// @credits modernizr v3.6.0 | Build https://modernizr.com/download?-prefixedcssvalue-dontmin
Modernizr.prototype.prefixedCSSValue = function(prop, value) {
var result = false;
var elem = createElement('div'); // basically: document.createElement.apply(document, ['div'])
var style = elem.style;
if (prop in style) {
var i = domPrefixes.length; // domPrefixes === [ "moz", "o", "ms", "webkit" ] or []
style[prop] = value;
result = style[prop];
while (i-- && !result) {
style[prop] = '-' + domPrefixes[i] + '-' + value;
result = style[prop];
}
}
if (result === '') {
result = false;
}
return result;
};
How do I apply vendor prefixes to inline styles in reactjs?
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 can't be done in this way. For example this CSS:
background: black;
background: -webkit-linear-gradient(90deg, black, #111);
background: linear-gradient(90deg, black, #111);
Because objects can't have duplicate keys, this can only be done by knowing which of these the browser supports.
An alternative would be to use Radium for the styling toolchain. One of its features is automatic vendor prefixing.
Our background example in radium looks like this:
var styles = {
thing: {
background: [
'linear-gradient(90deg, black, #111)',
// fallback
'black',
]
}
};
How to automatically add browser prefix to CSS3 properties?
There are several options that come to mind, depending on your use-case:
- SASS with Bourbon
- SASS with Compass
Less with LESS elements
Emmet
CSS3 Abbreviations (In your text editor)PrefixFree (client side js)
My personal preference is to use Compass, but the Emmet abbreviations work well if you do not want the overhead of using a CSS pre-processor.
Related Topics
How to Stretch Images With No Antialiasing
Styling ≪Input Type="File"≫
Android Calling JavaScript Functions in Webview
Detect Ipad/Iphone Webview Via JavaScript
Force Link to Open in Mobile Safari from a Web App With JavaScript
How to Run Untrusted Code Serverside
Execute a Command Line Binary With Node.Js
JavaScript File Per View in Rails
How to Get Possibly Overlapping Matches in a String
How to Decrypt Message With Cryptojs Aes. I Have a Working Ruby Example
Using Selenium to Imitate Dragging a File Onto an Upload Element
JavaScript Closure Inside Loops - Simple Practical Example
How to Resize a Google Map With JavaScript After It Has Loaded
Jquery - How to Determine If a Div Changes Its Height or Any CSS Attribute
Getelementbyid() Returns Null Even Though the Element Exists