Автоматическое добавление браузерных префиксов в CSS при помощи Sublime Text

Есть множество CSS3-свойств, которые на сегодняшний день находятся в экспериментальной стадии. Экспериментальные CSS-свойства используют браузерные префиксы, и как нам всем уже известно, у каждого браузера есть собственные префиксы: Firefox использует –moz-, IE использует –ms-, Chrome и Safari используют –webkit-, а Opera в свою очередь использовала –о- (но уже перешла –webkit-).

Проблема заключается в том, что в тех случаях, когда вы не используете Compass, вам обязательно нужно использовать браузерные префиксы. Требования также отличаются от браузера к браузеру, и возникает вопрос – когда и в каких случаях следует (или не следует) использовать браузерные префиксы.

Если вы используете Sublime Text, то мы предлагаем вам рассмотреть более простой способ.

Устанавливаем Node.js

Прежде всего, нам нужно установить Node.js. Пакет установки доступен для Windows, OSX и Linux, и скачать его можно отсюда. Если вы не уверены по поводу того, есть ли у вас эта библиотека или нет, то запустите следующую команду в Терминале.

node -v

Если он уже установлен, то вы получите сведения о версии, как показано ниже.


Устанавливаем AutoPrefixer

AutoPrefixer был разработан Андреем Ситником. Позже он был портирован Sindre Sorhus в Sublime Text.

Мы рекомендуем вам установить Package Control для более простого процесса установки. Вы можете посетить Wbond, чтобы получить официальные инструкции. После этого, можно нажать Command + Shift + P и выбрать Install Package. После чего нужно будет найти Autoprefixer.


Для установки нажмите Ввод.

Применение Autoprefixer

Autoprefixer предлагается с настройками по умолчанию:

{
	"browsers": ["last 2 versions"]
}

Но вы можете персонализировать его, адаптировав под собственные требования.

Autoprefixer использует базу данных CanIuse.com для добавления префиксов. CanIUse.com предлагает вам статистику поддержки свойств CSS3, а также HTML5, JS и SVG. И как можно видеть в настройках по умолчанию, Autoprefixer добавляет приставки для двух последних версий.

Если мы возьмем в пример CSS3 Transition, то Autoprefixer добавит префиксы для браузеров Webkit и Opera.


И у нас есть возможность установить поддержку сразу нескольких прошлых версий следующим образом:

{
	"browsers": ["last 7 versions"]
}

Ввиду чего инструмент добавит префикс –moz- для Firefox.


Чтобы добавить префикс, вы можете нажать Command + Shift + P и выбрать Autoprefix CSS.


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