Establecer el prefijo del proveedor de CSS utilizando javascript

Question

... es un gran dolor.

var transform = 'translate3d(0,0,0)'; 
elem.style.webkitTransform = transform; 
elem.style.mozTransform = transform; 
elem.style.msTransform = transform; 
elem.style.oTransform = transform; 

¿Existe una biblioteca/marco/mejor manera de hacerlo? Preferiblemente con solo una línea de JS?

Answer 1

No conozco ninguna biblioteca que haga esto, pero si solo son prefijos - es decir, no hay diferencia en el nombre o la sintaxis: escribir una función usted mismo sería 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; 
} 

Luego puede usar esto en la mayoría de los casos.

Answer 2

Hay un plugin de jQuery que se encargue de ello https://github.com/codler/jQuery-Css3-Finalize

Answer 3

Puede encontrar el respectivo prefijo de proveedor utilizando Javascript con la siguiente código-

var prefix = (function() { 
    var styles = window.getComputedStyle(document.documentElement, ''), 
    pre = (Array.prototype.slice 
     .call(styles) 
     .join('') 
     .match(/-(moz|webkit|ms)-/) || (styles.OLink === '' && ['', 'o']) 
    )[1], 
    dom = ('WebKit|Moz|MS|O').match(new RegExp('(' + pre + ')', 'i'))[1]; 
    return { 
    dom: dom, 
    lowercase: pre, 
    css: '-' + pre + '-', 
    js: pre[0].toUpperCase() + pre.substr(1) 
    }; 
})(); 

El anterior devuelve un objeto de proveedor del navegador respectiva prefijo.

Guardado una gran cantidad de código duplicado en mis scripts.

Fuente - Blog de David Walsh: https://davidwalsh.name/vendor-prefix

Answer 4

Es actualmente finales de 2015, y la situación ha cambiado ligeramente. En primer lugar, el comentario de McBrainy sobre la capitalización anterior es importante. El prefijo webkit ahora es Webkit, pero por suerte solo lo usa Safari en este momento. Tanto Chrome como Firefox son compatibles con el.style.transform sin el prefijo ahora, y creo que IE también lo hace. A continuación hay una solución un poco más moderna para la tarea en cuestión. Se comprueba primero para ver si aún hay que anteponer nuestra propiedad transform:

var transformProp = (function(){ 
    var testEl = document.createElement('div'); 
    if(testEl.style.transform == null) { 
    var vendors = ['Webkit', 'Moz', 'ms']; 
    for(var vendor in vendors) { 
     if(testEl.style[ vendors[vendor] + 'Transform' ] !== undefined) { 
     return vendors[vendor] + 'Transform'; 
     } 
    } 
    } 
    return 'transform'; 
})(); 

Después, sólo podemos utilizar una simple llamada de una sola línea para actualizar la propiedad transform sobre un elemento:

myElement.style[transformProp] = 'translate3d(0,' + dynamicY + 'px,0)'; 

Answer 5

Si está configurando su flujo de trabajo con Gulp, por ejemplo, puede usar Postcss autoprefixer, que es una herramienta útil para resolver los prefijos del proveedor del navegador. Utiliza JS para transformarte css.