Автопрефиксер — окончательное решение проблемы префиксов в CSS

Автопрефиксер ^[1] — утилита нового поколения для добавления префиксов к экспериментальным свойствам из CSS 3. Она берёт с Can I Use ^[2] последние данные о префиксах и популярности браузеров, читает ваш файл стилей, находит свойства и значения, которым действительно нужны префиксы и добавляет их.

Вы просто пишите обычный CSS:

a {
    transition: transform 1s
}

Автопрефиксер сам заменит нужные (и только нужные) свойства и значения (обратите внимание на -webkit-transform):

a {
  -webkit-transition: -webkit-transform 1s;
  -ms-transition: -ms-transform 1s;
  -o-transition: -o-transform 1s;
  -webkit-transition: transform 1s;
  -o-transition: transform 1s;
  transition: transform 1s
}

Проблема

К сожалению текущие инструменты плохо решают задачу:

• Писать вереницы свойств руками — очевидно плохое решение. Такой код невозможно читать, легко забыть поправить остальные свойства при редактировании.
• В Sass и LESS вам нужно самому следить за актуальностью префиксов и копировать примеси из проекта в проект. К тому же примеси могут решить проблему только у свойств, а не у значений (например, calc()).
• Compass или Bourbon уже лучше, там список примесей хранится централизовано и его легче держать актуальным (но практика показывает, что обычно в примеси добавляют все префиксы не следя за актуальностью). Проблема значений всё так же не решена.
• Самая главная проблема Sass и LESS, что вам всё равно нужно постоянно думать «из CSS 3 это свойство или нет?» — и в зависимости от этого использовать примесь или нет. Это проблему немного решил Stylus — у него синтаксис примесей не отличается от обычных свойств, так что префиксы добавляются невидимо. Впрочем, проблема актуальности и значений всё равно остались.
• Есть ещё скрипты добавления префиксов прямо в браузере, например Prefix Free ^[3], но лучше всего обрабатывать стили на этапе разработки и выкладки, а не повторять обработку каждый раз в браузере клиентов.

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

Это понимал и разработчик Stylus, TJ Holowaychuk, поэтому он начал разработку препроцессора нового поколения — Rework ^[4]. Это не отдельный язык, который компилировался в CSS (как Sass или Stylus), а именно препроцессор CSS-дерева:

• сначала CSS-парсер строил дерево стилей;
• потом JS-функции меняли это дерево как угодно;
• в конце новое дерево сохранялось в CSS-файл.

В итоге новый инструмент был гораздо гибче — можно было действительно делать с CSS всё что угодно. Поэтому именно Rework лёг в основу Автопрефиксера.

Преимущества

Вам не нужно учить новый язык

Автопрефиксер работает поверх обычного CSS — так что вам не нужно всей командой мигрировать на новый язык. При этом он остаётся совместим с другими языками типа Sass и Stylus — нужно только запустить его после компиляции CSS.

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

Префиксы для значений

Благодаря гибкости Rework Автопрефиксер может добавлять префиксы и для @keyframes, и для значений. Например, в Compass, очень трудно указывать transition-анимацию для свойств из CSS 3, типа — примесями это указать нельзя и приходится перечислять все возможные префиксы для transform.

Всегда актуальные данные

Во-первых, чтобы не зависеть от свободного времени авторов, база данных Автопрефиксера обновляется автоматическими скриптами ^[5] с Can I Use ^[2], так что данные всегда остаются свежими.

Во-вторых, вы указываете те браузеры, которые поддерживаете (по умолчанию, как в Гугл, берутся 2 последние версии каждого браузера) — можно указать и по статистике глобального использования, например «больше 1 %».

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

Использование

Ruby on Rails

Для Rails есть гем «autoprefixer-rails ^[6]» — вам нужно только подключить гем и префиксы будут сами добавляться в ваши CSS-файлы из app/assets/ и lib/assets. Достаточно добавить в Gemfile и дальше писать обычный CSS:

gem "autoprefixer-rails"

Благодаря гибкости Assets Pipeline, префиксы будут добавлять и к вашим стилям в Sass, и в Stylus. Браузеры можно указать в файле config/autoprefixer.yml:

browsers:
  - "last 1 version"
  - "> 1%"
  - "ie 8"

Можно узнать, какие префиксы будут добавляться с помощью задачи rake autoprefixer:inspect.

Ruby

Если вы используете Sprockets без Rails (например, вместе с Sinatra), то можно подключить Автопрефиксер к нему:

AutoprefixerRails.install(sprockets_env)

Можно обрабатывать CSS и без вообще Sprockets:

prefixed = AutoprefixerRails.compile(css))

JavaScript

Для компиляции в node.js можно использовать пакет с npm:

var autoprefixer = require('autoprefixer');
var prefixed     = autoprefixer.compile(css);

Если же вам нужно обрабатывать CSS в браузере, то можно взять специальную сборку скрипта ^[7].

Если вы уже используете Rework, то можете подключить отдельный фильтр Автопрефиксера:

rework(css).
    use( autoprefixer.filter(['> 1%', 'opera 12.5']) ).
    use( rework.references() ).
    toString();

Другое

Автопрефиксер можно интегрировать и с другими языками и системами с помощью отдельного приложения:

sudo npm install --global autoprefixer
autoprefixer *.css

Ссылки

• Репозиторий ^[1] на ГитХабе
• Rework ^[4] — препроцессор для изменения CSS-дерева

Автор: Iskin

Источник ^[8]