PrefixFree: избавляемся от префиксов браузеров в CSS

Главная

Статьи

Веб-программирование

29.01.2012 00:00

PrefixFree: избавляемся от префиксов браузеров в CSS

Так в чем проблема с префиксами?

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

.download {

 position: absolute;

 top: 1em;

 left: -1.5em;

 width: 6em;

 height: 6em;

 padding: 1em 0;

 background: #80A060;

 background-image: -webkit-linear-gradient(transparent, rgba(0,0,0,.3));

 background-image: -moz-linear-gradient(transparent, rgba(0,0,0,.3));

 background-image: -o-linear-gradient(transparent, rgba(0,0,0,.3));

 background-image: -ms-linear-gradient(transparent, rgba(0,0,0,.3));

 background-image: linear-gradient(transparent, rgba(0,0,0,.3));

 color: white;

 line-height: 1;

 font-size: 140%;

 text-align: center;

 text-decoration: none;

 text-shadow: .08em .08em .2em rgba(0,0,0,.6);

 -webkit-border-radius: 50%;

 -moz-border-radius: 50%;

 border-radius: 50%;

 -webkit-box-shadow: .1em .2em .4em -.2em black;

 -moz-box-shadow: .1em .2em .4em -.2em black;

 box-shadow: .1em .2em .4em -.2em black;

 -webkit-box-sizing: border-box;

 -moz-box-sizing: border-box;

 box-sizing: border-box;

 -ms-transform: rotate(15deg);

 -webkit-transform: rotate(15deg);

 -moz-transform: rotate(15deg);

 -o-transform: rotate(15deg);

 -ms-transform: rotate(15deg);

 transform: rotate(15deg);

 -webkit-animation: none;

 -moz-animation: none;

 animation: none;

}

К сожалению, префиксы пока необходимо использовать. Но реальность такова, что в большинстве случаев, они вызывают различные сложности, они увеличивают размеры CSS файлов, и они усложняют настройку правил (так как вы должны пять раз прописать нужное значение).

Решение: плагин PrefixFree

Используя плагин PrefixFree можно не использовать префиксы совсем, даже для таких свойств как @keyframes или transition, которые вообще нигде не поддерживаются без префиксов.

Плагин делает все с помощью JavaScript. Он обрабатывает таблицы стилей (кроме подключенных при помощи @import), а также встроенные стили.

Еще одним плюсом использования Prefixfree является то, что когда производители браузеров откажутся от использования префиксов для свойств CSS3, а это рано или поздно случится, вы сможете просто удалить этот скрипт, а в код CSS не придется вносить изменения.

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

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

При применении плагина код, приведенный выше, будет выглядеть так:

.download {

 position: absolute;

 top: 1em;

 left: -1.5em;

 width: 6em;

 height: 6em;

 padding: 1em 0;

 background: #80A060;

 background-image: linear-gradient(transparent, rgba(0,0,0,.3));

 color: white;

 line-height: 1;

 font-size: 140%;

 text-align: center;

 text-decoration: none;

 text-shadow: .08em .08em .2em rgba(0,0,0,.6);

 border-radius: 50%;

 box-shadow: .1em .2em .4em -.2em black;

 box-sizing: border-box;

 transform: rotate(15deg);

 animation: none;

}

Чем этот плагин лучше серверного варианта?

Использование скрипта на серверной стороне означает:

Его надо часто обновлять, так как поддержка браузерами свойств CSS3 меняется и часть префиксов становится не нужными. PrefixFree автоматически определяет необходимость префикса.
Все префиксы должны быть загружены. Что существенно увеличивает размер передаваемых файлов. Для таблицы средних размеров размер увеличения может оказаться больше размера файла prefixfree.js.
В случае использования препроцессоров, например LESS или SASS, вы будете зависеть от их внутреннего синтаксиса. Поэтому нельзя будет просто удалить скрипт через несколько лет.

Но у серверного варианта есть ряд преимуществ:

Файл дольше загружается, но пользователь не видит версии без префиксов. Использование плагина PrefixFree занимает некоторое время.
Серверный вариант будет работать даже с отключенной поддержкой JavaScript. Для варианта использования PrefixFree при отключении JavaScript дизайн лишится некоторых свойств CSS3, но останется функциональным. Если ваш код CSS написан корректно, то дизайн должен оставаться функциональным даже без использования CSS3.

В любом случае решение, какой вариант использовать, принимать вам.

Вы можете скачать Prefixfree из GitHub. Сжатая версия весит менее 5 КБ, которая становится менее 2 КБ после Gzip. Также, имейте в виду, что это все еще бета-версия и возможны ошибки. Вы можете помочь их исправить, или хотя бы сообщить о них в трекере. Удачи!

Источник