Статьи

Лучшие практики для программирования с префиксами поставщиков

Декабрь 6, 2018

Префиксы поставщиков позволяют веб-разработчикам экспериментировать с новыми стандартами, прежде чем они достигнут стадии Рекомендации кандидата . Ранее я писал, что эти префиксы также являются механизмом, который поставщики браузеров используют для обработки временных конфликтов между реализациями и спецификациями. При создании демонстраций новых функций для нашего сайта IE Test Drive и в различных презентациях многие из нас в команде IE активно работают с префиксами поставщиков.

В этой статье описывается шаблон, который наша команда использовала, чтобы значительно упростить разработку при использовании префиксов поставщиков. Мы хотели бы поделиться этим с вами и услышать ваши мысли об этом подходе или любых других, которые вы считаете лучшей практикой.

Код, подверженный ошибкам

Используя скрипт для доступа к свойствам CSS с префиксами вендора, легко получить код, который выглядит следующим образом: 

  var elm = document.getElementById ("myElement");

 elm.style.msTransitionProperty = "all";

 elm.style.msTransitionDuration = "3s";

 elm.style.msTransitionDelay = "0s";

 elm.style.webkitTransitionProperty = "все";

 elm.style.webkitTransitionDuration = "3s";

 elm.style.webkitTransitionDelay = "0s";

 elm.style.MozTransitionProperty = "all";

 elm.style.MozTransitionDuration = "3s";

 elm.style.MozTransitionDelay = "0s";

 elm.style.OTransitionProperty = "all";

 elm.style.OTransitionDuration = "3s";

 elm.style.OTransitionDelay = "0s";

Хотя он функционален, он раздутый, уродливый и подвержен ошибкам.

Консолидация свойств с префиксом поставщика в одно имя

Лучшим вариантом является определение метода, который просматривает список имен свойств и возвращает первое поддерживаемое свойство или значение NULL, если браузер не поддерживает ни одно из них. 

  function FirstSupportedPropertyName (prefixedPropertyNames) {

     var tempDiv = document.createElement ("div");

     для (var i = 0; i <prefixedPropertyNames.length; ++ i) {

         if (typeof tempDiv.style [prefixedPropertyNames [i]]! = 'undefined')

             вернуть prefixedPropertyNames [i];

     }

     вернуть ноль;

 }

Затем мы инициализируем переменную для каждого используемого нами префиксного свойства, передавая ему массив возможных свойств в том порядке, в котором мы предпочитаем их использовать. 

  var transformName = FirstSupportedPropertyName (["transform", "msTransform", "MozTransform", "WebkitTransform", "OTransform"]);

 var backfaceVisibilityName = FirstSupportedPropertyName (["backfaceVisibility", "msBackfaceVisibility", "MozBackfaceVisibility", "WebkitBackfaceVisibility", "OBackfaceVisibility"]);

 var transitionName = FirstSupportedPropertyName (["transition", "msTransition", "MozTransition", "WebkitTransition", "OTransition"]);

 var animationName = FirstSupportedPropertyName (["animation", "msAnimation", "MozAnimation", "WebkitAnimation", "OAnimation"]);

 var gridName = FirstSupportedPropertyName (["gridRow", "msGridRow", "MozGridRow", "WebkitGridRow", "OGridRow"]);

 var regionName = FirstSupportedPropertyName (["flowFrom", "msFlowFrom", "MozFlowFrom", "WebkitFlowFrom", "OFlowFrom"]);

 var hyphensName = FirstSupportedPropertyName (["дефисы", "msHyphens", "MozHyphens", "WebkitHyphens", "OHyphens"]);

 var columnName = FirstSupportedPropertyName (["columnCount", "msColumnCount", "MozColumnCount", "WebkitColumnCount", "OColumnCount"]);

Тогда код на вашем сайте, который использует эти свойства, становится примерно таким: 

  var elm = document.getElementById ("myElement");

 if (transitionName) {

     elm.style [transitionName + "Property"] = "all";

     elm.style [transitionName + "Duration"] = "3s";

     elm.style [transitionName + "Delay"] = "0s";

 }

 еще {

     // отступление для браузеров без переходов CSS3

 }

Обратите внимание на простое обнаружение функции, FirstSupportedPropertyName возвращением null в FirstSupportedPropertyName

Этот шаблон также работает, когда свойства CSS имеют префиксы поставщиков. Вы можете использовать немного другой шаблон для случаев, когда значение CSS (например, линейный градиент) имеет префиксы поставщика: 

  function FirstSupportedFunctionName (свойство, prefixedFunctionNames, argString) {

     var tempDiv = document.createElement ("div");

     for (var i = 0; i <prefixedFunctionNames.length; ++ i) {

         tempDiv.style [property] = prefixedFunctionNames [i] + argString;

         if (tempDiv.style [property]! = "")

             вернуть prefixedFunctionNames [i];

     }

     вернуть ноль;

 }

 var linearGradientName = FirstSupportedFunctionName ("backgroundImage", ["-ms-linear-градиент", "-moz-linear-градиент", "-webkit-линейный-градиент", "-o-линейный-градиент"], "(top , черно-белый)");

 var radialGradientName = FirstSupportedFunctionName ("backgroundImage", ["-ms-радиальный градиент", "-moz-радиальный градиент", "-webkit-радиальный градиент", "-o-радиальный градиент"], "(50 % 50%, круговая обложка, черный, белый) ");

Тестирование сайтов, использующих свойства с префиксом поставщика

Общий вопрос — какие имена свойств использовать, если некоторые браузеры еще не поддерживают это свойство или если ни один браузер не поддерживает основанное на стандартах свойство без префикса. Есть пара подходов, каждый из которых имеет свои достоинства:

  1. Всегда включайте все ожидаемые имена, даже если они еще не работают в браузерах доставки. Преимущество этого пути состоит в том, что, поскольку браузеры добавляют поддержку с префиксом своего поставщика или добавляют поддержку для свойства без префикса, ваш сайт будет «просто работать» без изменений. Риск состоит в том, что сайт автоматически обнаружит поведение, которое вы никогда не тестировали. Префикс поставщика указывает, что поведение не завершено, и все свойства с префиксом и свойство без префикса могут вести себя не одинаково, так как добавление поддержки браузерами вашего сайта может «просто не работать».
  2. Включайте только имена свойств, которые вы можете проверить. Преимущество заключается в том, что ваш сайт будет вести себя так же, как при первом написании, даже если браузеры добавят поддержку новых свойств. Риск заключается в том, что у вас излишне ухудшена функциональность Для образцов или демонстрационных сайтов люди могут интерпретировать это как браузер, не имеющий функции вообще.

Вам необходимо определить правильный путь для вашего сайта. В большинстве наших демонстраций мы хотим продемонстрировать новую функциональность веб-платформы в любом браузере, который ее поддерживает. А поскольку небольшие ошибки в этих демонстрациях не создают больших проблем для пользователей, мы обычно выбираем вариант № 1. С другой стороны, если у вас есть производственный сайт, где изменение поведения вызовет проблемы для вашего бизнеса, вы можете выбрать более склонный к риску путь.

Независимо от того, какой путь вы выберете, одна константа — это тестирование. При использовании свойств с префиксом поставщика вы используете раннюю, часто нестабильную функциональность, которая может измениться даже после того, как браузер впервые вводит поддержку свойства, поэтому крайне важно протестировать каждое обновление браузера, чтобы убедиться, что ваш сайт функционирует должным образом.

34
Share: