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

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

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

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

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

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

border-radius

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

.example {
    border-radius:10px;
}

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

box-shadow

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

.example {
    box-shadow:0 0 5px rgba(0,0,0,0.5);
}

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

background-origin, background-size and background-clip

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

.example {
    background-origin:content-box;
    background-size:100% auto;
    background-clip:content-box;
}

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

Градиенты

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

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

.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 );
}

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

.example {
    background:#f9f9f9;
    background:-webkit-linear-gradient(top, #ffffff 0%, #f2f2f2 100%);
    background:linear-gradient(to bottom, #ffffff 0%, #f2f2f2 100%);
}

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

calc()

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

.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-:

.example {
    -webkit-transition:background-position 0.5s;
    transition:background-position 0.5s;
}

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

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

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

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

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

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

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

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на 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> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree