Вот отрывок кода JS, который устанавливает CSS:
function hyphen_style(style) {
return style.replace(/([A-Z])/g, function(str,m1){ return '-' + m1.toLowerCase(); }).replace(/^ms-/,'-ms-');
}
var css = "#debug_element_highlighter_container * {"+
hyphen_style(Modernizr.prefixed('transitionDuration')) + ": 2s, 2s;" +
hyphen_style(Modernizr.prefixed('transitionProperty')) + ": transform, opacity;" +
...
// append a style tag to head
var head = document.getElementsByTagName("head")[0];
var style = document.createElement("style");
style.type = "text/css";
if (style.styleSheet){
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
Теперь это работает, но я помню, что не так давно у меня были браузеры, отказывавшиеся сотрудничать без установки transitionProperty с использованием префикса поставщика версии свойства стиля transform, т. е. CSS должен был прочитать -webkit-transition-property: -webkit-transform, opacity;, чтобы браузер вел себя как так, как я хочу.
Ясно, что это должно по-прежнему работать сегодня с браузерами, которые также поддерживают -webkit-transition-property: transform, opacity;, но мы видим, что есть четыре различных возможности комбинирования для того, следует ли добавлять префикс поставщика к имени стиля или свойствам стиля, установленным для этих стилей. Не исключено, что в какой-то момент в будущем какой-нибудь веб-браузер внезапно перестанет проверять префиксы -webkit-.
Modernizr (и документация Modernizr) предоставляет нам примитивы (prefixed() и подобные) для преобразования между ними, но мне не ясно, как провести надежное тестирование, требуют ли стили после моды transitionProperty установки имен свойств стиля с префиксом или нет. Довольно просто протестировать сами стили, чтобы увидеть, нужно ли им префикс, просто назначив стили без префикса и посмотрев, «принимает ли он». Но я менее уверен, что этот же подход будет работать для особого случая указания имен свойств стиля.
Конечно, я могу просто использовать гиперпортативный излишний подход, который заключается в установке всех четырех комбинаций объявлений CSS всякий раз, когда возникает такая ситуация, что не оставляет браузеру места, чтобы найти что-то неприятное, если он поддерживает какое-либо из стили.
