Уменьшаем количество вендорных префиксов

Уменьшаем количество вендорных префиксов

От автора: Для активации определенных свойств в некоторых браузерах большая часть веб-разработчиков сейчас применяют вендорные префиксы в CSS. Это отлично, но иногда я вижу примеры кода и инструменты добавления префиксов, где с излишним энтузиазмом добавляются все возможные из когда-либо употреблявшихся префиксов (а иногда даже те, которые никогда не применялись). Я считаю, что для многих свойств CSS можно безопасно прекратить использование вендорных префиксов или, по крайней мере, значительно сократить их количество.

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

Вы подумаете: «О, нет! Вы отгораживаетесь от тех, кто пользуется старыми версиями браузера X!». Нет, это вопрос не игонорирования кого-либо или «неподдержки» версий определенных браузеров. Это вопрос применения прогрессивного улучшения для уменьшения количества CSS и упрощения его управления и поддержки. Мы не говорим здесь о важных свойствах. Если браузер не поддерживает свойство без префикса, ну что же, в нем не будет закругленных углов, или теней, или градиентов, или чего-то еще. Результат будет выглядеть, как в IE8, которым все еще пользуется больше народа, чем, скажем, Firefox 3.6, или Chrome 9, или Safari для iOS 4, или какими-то другими старыми версиями браузеров, которым может понадобиться вендорный префикс.

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

border-radius

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Без вендорных префиксов.

Текущая браузерная поддержка border-radius.

box-shadow

Без вендорных префиксов.

Текущая браузерная поддержка box-shadow.

background-origin, background-size and background-clip

Без вендорных префиксов.

Текущая браузерная поддержка фонов CSS3.

Градиенты

Возможно, градиенты (linear-gradient и radial-gradient) – это те самые свойства, где можно больше всего сэкономить при уменьшении количества префиксов. Я не делаю их здесь полностью беспрефиксными, а использую только префикс -webkit- (и нестарый синтаксис WebKit).

Поэтому вместо чего-либо подобного (что получается при применении инструментов добавления вендорных префиксов):

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Я применил бы следующее:

Здесь всего лишь одно дополнительное заявление. И, наблюдая за браузерной поддержкой градиентов CSS, я думаю, что через год-другой опущу и его тоже.

calc()

Здесь я пользуюсь только префиксом -webkit-.

Заметьте, что вам, возможно, придется применять calc() с осторожностью. Если вы пользуетесь им для свойств, влияющих на разметку, убедитесь в наличии заявления-альтернативы для неподдерживающих браузеров по избежание полного крушения.

Текущая браузерная поддержка calc().

Переходы

Для переходов я применяю только префикс -webkit-:

Как и в случае с градиентами, думаю, через некоторое время я смогу полностью отказаться от префиксов к переходам.

Текущая браузерная поддержка переходов CSS.

Адаптируйте к своему сценарию

Выше приведены примеры того, как я сейчас управляюсь с вендорными префиксами для данных свойств CSS. Если у вас или ваших клиентов многие пользователи сидят на старых версиях, таких как Firefox 3.6 или iOS 2.1, и если прогрессивное улучшение визуального представления неприемлемо, вам придется пользоваться большим количеством префиксов. Лично я все еще получаю отчеты об ошибках касательно пропущенных префиксов, но стараюсь заранее объяснить своему клиенту идею прогрессивного улучшения.

Автор: http://www.456bereastreet.com/

Источник: http://www.456bereastreet.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на HTML5 и CSS3 с нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (1)

  1. Виталий

    Есть отличный инструмент для упрощения себе жизни – автопрефиксер. Постпроцессор css, удаляет ненужные префиксы и дописывает те, которых не хватает.

    Онлайн можно просмотреть вот тут – autoprefixer.github.io
    Официальный сайт – github.com/postcss/autoprefixer

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree