• Главная  
• Блог  
• Проверка браузера на поддержку свойств CSS через JavaScript

Проверка браузера на поддержку свойств 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.