Просмотров: 942

Как узнать поддерживается ли новое свойство CSS в каком-либо браузере?

С выходом новых модулей CSS3 и появлением новых свойств возникает проблема: как узнать в каких браузерах эти свойства поддерживаются?

Например, это могут быть свойства:

text-shadow
box-shodow
min/max-width/height
opacity
и др.

Давайте, для примера, возьмем свойство text-shadow и посмотрим в каких браузерах и их версиях оно работает.

Итак, специальный сайт, на котором это можно сделать, находится здесь:

http://caniuse.com

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

13-01-2014 4-42-04

Находим в этом списке свойство text-shadow и переходим по нему. Перед нами появляется таблица с версиями браузеров и закрашенными прямоугольниками.

13-01-2014 4-43-59

Светло-зеленый цвет — свойство поддерживается браузером.

Темно-зеленый цвет — свойство частично поддерживается

Розовый цвет — свойство не поддерживается

Есть сайт с похожими функциями:

http://www.browsersupport.net

Он работает аналогично.

Теперь, зная эту информацию, открывайте статистику Яндекс.Метрики или Google Analytics и посмотрите долю посетителей вашего сайта по каждому браузеру.

В Яндекс.Метрике для этого нужно пройти в меню «Технологии — браузеры». Вот статистика моего сайта за последний месяц.

13-01-2014 4-49-53

Исходя из этого можно уже делать вывод, какое количество посетителей вы можете потерять если будете использовать то или иное свойство CSS.

В общем, делать выводы остается только вам. Надеюсь, что с помощью этой информации вы сможете сделать это более разумно и правильно. Успехов!