От автора: Для активации определенных свойств в некоторых браузерах большая часть веб-разработчиков сейчас применяют вендорные префиксы в CSS. Это отлично, но иногда я вижу примеры кода и инструменты добавления префиксов, где с излишним энтузиазмом добавляются все возможные из когда-либо употреблявшихся префиксов (а иногда даже те, которые никогда не применялись). Я считаю, что для многих свойств CSS можно безопасно прекратить использование вендорных префиксов или, по крайней мере, значительно сократить их количество.
В приведенных ниже примерах я отмечаю те префиксы, которые применяю в данное время. Я включил только те свойства CSS, которые часто используются с несколькими вендорными префиксами, но могут прекрасно обойтись без них всех или оставить всего один.
Вы подумаете: «О, нет! Вы отгораживаетесь от тех, кто пользуется старыми версиями браузера X!». Нет, это вопрос не игонорирования кого-либо или «неподдержки» версий определенных браузеров. Это вопрос применения прогрессивного улучшения для уменьшения количества CSS и упрощения его управления и поддержки. Мы не говорим здесь о важных свойствах. Если браузер не поддерживает свойство без префикса, ну что же, в нем не будет закругленных углов, или теней, или градиентов, или чего-то еще. Результат будет выглядеть, как в IE8, которым все еще пользуется больше народа, чем, скажем, Firefox 3.6, или Chrome 9, или Safari для iOS 4, или какими-то другими старыми версиями браузеров, которым может понадобиться вендорный префикс.
Пока вся разметка не разрушается при отсутствии поддержки какого-либо свойства, это в общем нормально – при условии, что по меньшей мере пара последних версий всех основных браузеров станет применять ваш CSS.
border-radius
Без вендорных префиксов.
1 2 3 |
.example { border-radius:10px; } |
Текущая браузерная поддержка border-radius.
box-shadow
Без вендорных префиксов.
1 2 3 |
.example { box-shadow:0 0 5px rgba(0,0,0,0.5); } |
Текущая браузерная поддержка box-shadow.
background-origin, background-size and background-clip
Без вендорных префиксов.
1 2 3 4 5 |
.example { background-origin:content-box; background-size:100% auto; background-clip:content-box; } |
Текущая браузерная поддержка фонов CSS3.
Градиенты
Возможно, градиенты (linear-gradient и radial-gradient) – это те самые свойства, где можно больше всего сэкономить при уменьшении количества префиксов. Я не делаю их здесь полностью беспрефиксными, а использую только префикс -webkit- (и нестарый синтаксис WebKit).
Поэтому вместо чего-либо подобного (что получается при применении инструментов добавления вендорных префиксов):
1 2 3 4 5 6 7 8 9 10 |
.overkill-example { background:#f9f9f9; background:-moz-linear-gradient(top, #ffffff 0%, #f2f2f2 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f2f2f2)); background:-webkit-linear-gradient(top, #ffffff 0%, #f2f2f2 100%); background:-o-linear-gradient(top, #ffffff 0%, #f2f2f2 100%); background:-ms-linear-gradient(top, #ffffff 0%, #f2f2f2 100%); background:linear-gradient(to bottom, #ffffff 0%, #f2f2f2 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f2f2f2',GradientType=0 ); } |
Я применил бы следующее:
1 2 3 4 5 |
.example { background:#f9f9f9; background:-webkit-linear-gradient(top, #ffffff 0%, #f2f2f2 100%); background:linear-gradient(to bottom, #ffffff 0%, #f2f2f2 100%); } |
Здесь всего лишь одно дополнительное заявление. И, наблюдая за браузерной поддержкой градиентов CSS, я думаю, что через год-другой опущу и его тоже.
calc()
Здесь я пользуюсь только префиксом -webkit-.
1 2 3 4 5 |
.example { background-position:100% 100%; background-position:-webkit-calc(100% + 30px) -webkit-calc(100% + 16px); background-position:calc(100% + 30px) calc(100% + 16px); } |
Заметьте, что вам, возможно, придется применять calc() с осторожностью. Если вы пользуетесь им для свойств, влияющих на разметку, убедитесь в наличии заявления-альтернативы для неподдерживающих браузеров по избежание полного крушения.
Текущая браузерная поддержка calc().
Переходы
Для переходов я применяю только префикс -webkit-:
1 2 3 4 |
.example { -webkit-transition:background-position 0.5s; transition:background-position 0.5s; } |
Как и в случае с градиентами, думаю, через некоторое время я смогу полностью отказаться от префиксов к переходам.
Текущая браузерная поддержка переходов CSS.
Адаптируйте к своему сценарию
Выше приведены примеры того, как я сейчас управляюсь с вендорными префиксами для данных свойств CSS. Если у вас или ваших клиентов многие пользователи сидят на старых версиях, таких как Firefox 3.6 или iOS 2.1, и если прогрессивное улучшение визуального представления неприемлемо, вам придется пользоваться большим количеством префиксов. Лично я все еще получаю отчеты об ошибках касательно пропущенных префиксов, но стараюсь заранее объяснить своему клиенту идею прогрессивного улучшения.
Автор: //www.456bereastreet.com/
Источник: //www.456bereastreet.com/
Редакция: Команда webformyself.
Комментарии (1)