...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?
Adding a Prefix In most cases, to use a brand new CSS style property, you take the standard CSS property and add the prefix for each browser. The prefixed versions would always come first (in any order you prefer) while the normal CSS property will come last.
CSS prefixes -webkit- (Chrome, Safari, newer versions of Opera, almost all iOS browsers including Firefox for iOS; basically, any WebKit based browser) -moz- (Firefox) -o- (old pre-WebKit versions of Opera) -ms- (Internet Explorer and Microsoft Edge)
Yes, and there will always be, as it's kind of an industry standard that vendors use their prefix on newly drafted properties/methods until those become a standard.
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] = value;
}
Then you can just use this in most cases.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With