Проверка браузера на поддержку свойств CSS через JavaScript
В студеную осеннюю пору появилась необходимость проверять, поддерживает браузер то или иное CSS-свойство.
В моем случае это было свойство hyphens. Замечательное свойство, которое позволяет браузеру разбивать слова, вставляя переносы с учетом языковых правил. К сожалению, на данный момент его поддерживает мало браузеров. Но мои любимые Firefox 6+ и Internet Explorer 10+ его поддерживают. Webkit-браузеры не поддерживают это свойство. Так что будем разбираться.
Задача: определить поддерживает ли браузер CSS-свойства через JavaScript.
В нашем замечательном CSS-фреймворке resetCSS есть класс hyp:
.hyp, .hyp * {
-webkit-hyphens : auto;
-moz-hyphens : auto;
-ms-hyphens : auto;
hyphens : auto
}
Теперь надо определить, поддерживает ли браузер это или другое CSS-свойство. Начинаем изучать. Выведем все свойства в консоли браузера:
console.log(document.body.style);
Анализируя вывод, можно увидеть префиксы для свойств, регистр именно такой:
- webkit — для соответствующих браузеров
- Moz — для FireFox
- ms — для IE.
Окей, поняли. Пишем простую функцию:
function supportCSS(prop) {
var yes = false; // по умолчанию ставим ложь
if('Moz'+prop in document.body.style) {
yes = true; // если FF поддерживает, то правда
}
if('webkit'+prop in document.body.style) {
yes = true; // если Webkit поддерживает, то правда
}
if('ms'+prop in document.body.style) {
yes = true; // если IE поддерживает, то правда
}
if(prop in document.body.style) {
yes = true; // если поддерживает по умолчанию, то правда
}
return yes; // возращаем ответ
}
Маленький FAQ по проверке поддержки CSS
Как правильно писать свойства:
Свойства надо писать с заглавной буквы, и каждое слово-дополнение тоже. Опускаем тире. Пример правильного написания: BorderHorizontalSpacing. Не правильно: border-horizontal-spacing.
Альтернативные варианты проверки:
Решение, конечно, не единственное, есть и другие решения. Например:
Свойство @supports{} – об этом можно почитать тут на сайте developer.mozilla.org. Но поддерживает большое количество браузеров (94%). Пример использования:
/* Узнаём, поддерживает ли браузер display: flex; */
@supports (display: flex) {
/* Стили */
}
Или можно использовать популярный Modernizr.