Меню показать Меню скрыть
Современные
проекты
от ПаЛыЧа
Сайк ПавелСайк Павел
1 г. назад

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

Альтернативные варианты проверки:

Решение, конечно, не единственное, есть и другие решения. Например:

  1. Свойство @supports{} – об этом можно почитать тут на сайте www.developerdrive.com. Но его поддерживает опять мало браузеров.
  2.  Modernizr: практическое применение.

Добавить комментарий

Наверх