Функция обнаружения для свойства перехода CSS3

Question

Я просто возился с этим модернизмом, чтобы узнать, как они проверяют, поддерживается ли определенное свойство CSS в браузере пользователя, в основном я просто хотел иметь небольшой скрипт, который сказал мне, браузер пользователя поддерживает переходы CSS. Я отведенной код Modernizr к чему-то, как показано ниже:

Elem = document.createElement('Alx'); 
     eStyle = Elem.style; 

     var cssProp = (function check(){ 
      props = ["transition", "WebkitTransition", "MozTransition", "OTransition", "msTransition"]; 
      for(var i in props) { 
       var prop = props[i]; 
       console.log(prop); 
       if (!contains('-' , prop) && eStyle[prop] !== undefined) { 
         return prop; 
       } 
      } 
     })(); 

    /* The contains function */ 

    function contains(str, substr) { 
     return !!~('' + str).indexOf(substr); 
    } 

Modernizr делает почти то же самое, я только что сделал несколько изменений и жестко закодированы значения массива, чтобы упростить вещи. Скрипт работает следующим образом.

• Создать элемент html (не обязательно должен быть действительным элементом html).

• выполнить IIFE, который в основном проходит через все возможные версии браузера css, а также стандартный вариант W3C. проверьте, может ли свойство thing быть применено к элементу html, который мы создали, если он не может быть применен, условие if не выполняется и не определено

• Если условие if прошло, возвращается правильное свойство css-3 и хранится в cssProps.

Я просто хотел знать, является ли это пуленепробивным способом проверки того, какой переход поддерживается в браузере пользователя? или если его поддержка вообще?

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

Answer 1

К вашей большей точке «это пуленепробиваемый способ проверки того, какой переход поддерживается в браузере пользователя», ответ - нет. Хотя это почти наверняка даст вам 99,99% всех браузеров, которые его поддерживают, неизбежно будет какая-то причудливая комбинация вещей (веб-просмотр на устройстве Samsung для Android в середине диапазона, который использует custom version of webkit/chrome, является обычным преступником), который будет препятствовать вам действительно будучи «пуленепробиваемым».

Это, как говорится, в то время как вы отлично справились с логикой того, что делает Modernizr, я бы поставил под сомнение вашу потребность в этом.

Как уже отмечали другие комментаторы, вы всегда можете создать пользовательскую сборку, которая имеет именно то, что вы хотите в ней. При этом было бы разумно делать то, что вы сделали, если хотите самую тонкую возможную сборку javascript (поскольку у Modernizr почти наверняка есть поддержка/код для вещей, которые совершенно не имеют отношения к тому, что вы делаете). Если это так, то я предлагаю вам проверить результаты caniuse для перехода. Его в основном все не имеет прецедента, за исключением старых Android.

Это означает, что ваши обнаружения может быть намного меньше

var supportsTransitions = function() { 
    var style = document.documentElement.style; 

    return 'transition' in style || 'webkitTransition' in style 
} 

это даст вам почти одинаковые результаты (по общему признанию, игнорируя старые браузеры - это до вас, если это имеет значение или нет) в гораздо меньшей площади ,

В любом случае - прекрасное начало при обнаружении функции, я надеюсь, что скоро вы вносите свой вклад в Modernizr!