Актуальность вендорных префиксов для свойств box-shadow и border-radius.

Перевод статьи:  Do we need box-shadow or border-radius prefixes anymore?
Автор:  Chris Coyier.

Статья содержит ответ на вопрос, поставленный одним из посетителей сайта автора статьи Криса Койера, который гласит:

Нужно ли все еще применять вендорные префиксы типа -moz и -webkit при использовании ставших популярными последнее время свойств типа border-radius или box-shadow?

Краткий ответ.

Касательно упомянутых выше двух свойств (border-radius и box-shadow), то ответом скорее всего будет – нет.

Но они могут вам все же понадобиться в следующих случаях:

  • Если отсутствие у блоков теней и закругленных углов серьезно нарушает форму восприятия информации пользователем, что само по себе является большой редкостью.
  • Либо если весомая доля трафика вашего сайта приходится на Firefox 3.6, Safari 4, iOS 3.2 и Android 2.3 (или более ранние версии указанных браузеров).

Более детально.

Давайте копнем поглубже. Прежде чем браться за решение проблемы, нужно знать, насколько она серьезна. В этом вам поможет очень удобный ресурс, позволяющий определить, поддерживают ли браузеры интересующие вас возможности.

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

border-radius

Firefox 3.6 и ниже требует наличия префикса -moz-. А начиная с четвертой версии его можно уже не применять. Для того, чтобы у вас сложилось представление о популярности определенных версий браузеров, автор статьи приводит статистику посещений собственного сайта, которая зафиксировала лишь 0.3% посетителей, использующих FF 3.6 и ниже от общего процента (30%) пользователей, работающих с более поздними версиями Firefox.

Касательно Safari можно сказать, что только четвертая версия и ниже требуют наличия префикса -webkit-. А согласно все той же статистике, таких пользователей еще меньше — 0.1% от всех почитателей браузера Safari, доля которых составляет 10% от общего пирога.

На мобильных устройствах, таких как iPhone 3GS или iPad 1 установлены браузеры версий iOS 3.x, которые никогда не обновлялись. Так вот они тоже требуют обязательного наличия префикса -webkit-, но их доля в общем проценте посетителей самая низкая.

Еще раз напоминаю, что вы должны руководствоваться статистикой исключительно вашего сайта. Но по моему личному мнению, даже если сложить воедино всех пользователей проблемных в нашем случае браузеров, то их количество не превысит значение 1% от общего числа посетителей.

Вопрос поддержки браузерами свойства border-radius не является существенным и его можно без опасения отнести к категории тех, на которые закрываются глаза по причине того, что для большинства пользователей это не доставляет особых проблем.

box-shadow

Что касается отображения теней для блоков, то здесь обстановка примерно та же, но все-таки немного строже. Для браузеров Firefox и iOS все остается без изменений. Safari версии 5.0 и ниже требуют наличие префикса -webkit-, но этот изъян был устранен буквально через три месяца после выхода пятой версии в новом релизе 5.1, которая входит в состав OS X 10.7.

Наиболее существенное отличие между поддержкой этих двух свойств относится к Android, версия 2.3 которого требует использование префикса -webkit-. Но уже начиная с четвертой версии 4.0, свойство box-shadow можно применять в стандартном виде. Даже для сайта автора статьи, процент посетителей, использующих ранние версии Android несколько выше показателей других рассмотренных выше браузеров, и составляет 0.5%. А если ваш сайт еще в большей степени ориентирован на пользователей мобильных устройств, то этот показатель будет значительно выше.

В большинстве случаев игнорирование браузером свойства box-shadow не приводит к серьезным проблемам, но все же бывают ситуации, когда это имеет существенное значение.

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *