Настройка CSS с префиксом производителя с использованием JavaScript - PullRequest
Новая
       23

Настройка CSS с префиксом производителя с использованием JavaScript

13 голосов
/ 17 января 2012

... это огромная боль. 

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

Есть ли библиотека / фреймворк / лучший способ сделать это?Желательно только с одной линией JS?

Ответы [ 5 ]

24 голосов
/ 17 января 2012

Я не знаю ни одной библиотеки, которая бы это делала, но если бы они все были просто префиксами - то есть, нет разницы в имени или синтаксисе - написание функции самостоятельно было бы тривиальным. 

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;
}

Тогда вы можете просто использовать это в большинстве случаев.

13 голосов
/ 13 сентября 2015

Сейчас конец 2015 года, и ситуация немного изменилась.Прежде всего, комментарий Макбрэйни о капитализации выше важен.Префикс webkit теперь Webkit, но, к счастью, только Safari используется на данный момент.И Chrome, и Firefox теперь поддерживают el.style.transform без префикса, и я думаю, что IE тоже.Ниже приведено несколько более современное решение для поставленной задачи.Сначала он проверяет, нужно ли нам добавлять префикс нашего свойства 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';
})();

После этого мы можем просто использовать простой однострочный вызов для обновления свойства transform элемента: 

myElement.style[transformProp] = 'translate3d(0,' + dynamicY + 'px,0)';
6 голосов
/ 21 июля 2015

Вы можете найти соответствующий префикс поставщика, используя Javascript со следующим кодом: 

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)
  };
})();

Вышеприведенный объект возвращает объект соответствующего префикса поставщика браузера.

Сохранено много повторяющегося кода.в моих сценариях.

Источник - блог Дэвида Уолша: https://davidwalsh.name/vendor-prefix

2 голосов
/ 17 января 2012

Есть этот плагин jquery, который позаботится об этом https://github.com/codler/jQuery-Css3-Finalize

0 голосов
/ 27 февраля 2017

Если вы настраиваете свой рабочий процесс, например, с помощью Gulp, вы можете использовать Postcss autoprefixer , который является удобным инструментом для решения префиксов поставщика браузера.Он использует JS, чтобы преобразовать вас CSS.

...