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

Автор статьи: Chris Coyier. Оригинал:http://css-tricks.com/do-we-need-box-shadow-prefixes/

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

Нужно ли все еще применять вендорные префиксы типа -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% от всех порядка 10% приверженцев браузера Safari.

На мобильных устройствах, таких как 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 не приводит к серьезным проблемам, но все же бывают ситуации, когда это имеет существенное значение.

* Примечание переводчика.

Ссылка на оригинал: http://css-tricks.com/do-we-need-box-shadow-prefixes/

Оставить комментарий

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