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

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

Вы просто пишите обычный 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, но лучше всего обрабатывать стили на этапе разработки и выкладки, а не повторять обработку каждый раз в браузере клиентов.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Ruby on Rails

Для Rails есть гем «autoprefixer-rails» — вам нужно только подключить гем и префиксы будут сами добавляться в ваши 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 в браузере, то можно взять специальную сборку скрипта.

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

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

Другое

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

sudo npm install --global autoprefixer autoprefixer *.css 

Ссылки

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