Gulp-autoprefixer. Или как избавиться от параметрических миксин и затрат времени.

Модуль gulp-autoprefixer – мощный и в тоже время гибкий инструмент для реализации автоматической расстановки вендорных префиксов для тех CSS-свойств, которые в чистом виде не поддерживаются на данный момент.

Гибкость данного модуля заключается в том, что его можно настроить под конкретный проекте с конкретными требованиями относительно поддержки браузерами.
Так если бы нам потребовалось поддерживать браузеры лишь 2х последних версий, то к конфиге мы бы указали last 2 versions. Но тут стоит уточнить, что это дефолтное значение модуля и мы можем ничего не указывать.

Другие примеры:

  • Две последние версии конкретного браузера last 2 [Browser] versions (Вместо [Browser] указываем необходимый нам браузер. Важно! gulp-autoprefixer использует собственные имена браузеров, ниже по тексту).
  • Процент использования браузера в сети Интернет. На основе глобальной статистики использования различных версий браузера предоставляется возможность указать поддержку в виде – > 10% (Все браузеры, которые используют более 10% населения).
  • Процент использования браузера в определенной стране > 5% in RU (Больше 5% использования в Российской Федерации. Все коды стран – ISO_3166-1_alpha-2).
  • Интервал версий браузера – ie 6-8 (Версии IE с 6 по 8 включительно).
  • Больше/больше или равно/меньше/меньше или равно версии браузера – Firefox > 20 / Firefox >= 20 / Firefox < 20 / Firefox <= 20.
  • Последняя [Firefox ESR] версия – Firefox ESR.
  • Браузер версии IOS 7 – iOS 7.

Именование браузеров по gulp-autoprefixer:

  • Android – Андроид WebView.
  • BlackBerry или bb – Blackberry browser.
  • Chrome – Google Chrome.
  • Firefox или ff – Mozilla Firefox.
  • Explorer или ie – Internet Explorer.
  • Edge – Microsoft Edge.
  • iOS или ios_saf – iOS Safari.
  • Opera – Opera.
  • Safari – desktop Safari.
  • OperaMobile или op_mob – Opera Mobile.
  • OperaMini или op_mini – Opera Mini.
  • ChromeAndroid или and_chr – Chrome Андроид.
  • FirefoxAndroid или and_ff – Firefox Андроид.
  • ExplorerMobile или ie_mob – Internet Explorer Mobile.

В своей работе gulp-autoprefixer использует небезызвестный ресурс Can I Use. На основе этих данных он определяет какие из браузеров требуют вендорных префиксов для корректного отображения CSS3 свойств.
В предыдущей статье был затронут такой framework как Compass, так вот он тоже использует его в своей работе.

Can I use

Установка gulp-autoprefixer:

$ sudo npm install --save-dev gulp-autoprefixer
	$ cat package.json
	{
		"name": "one_module",
		"version": "0.0.1",
		"devDependencies": {
			"gulp": "~3.8.8",
			"gulp-rename": "~1.2.0",
			"gulp-notify": "~1.6.0",
			"gulp-autoprefixer": "~1.0.0"
	}
}

Далее поздадим в gulpfile.js задачу для нашего модуля:

var gulp = require('gulp'),
	autoprefixer = require('gulp-autoprefixer');

		// Autoprefixer Task
		gulp.task('autoprefixer', function(){
			gulp.src('css/style.css')
			.pipe(autoprefixer({
				browsers: ['last 2 versions']
			}))
			.pipe(gulp.dest('build/css/'));
	});

Пути css/style.css (файл к которому применяется авто-префикс) и build/css/ (директория вывода результата работы модуля) указываем относительно своей структуры проекта и названия файла(ов) стилей.

Результат выполнения задачи autoprefixer:

на входе:

.block {
	transform: rotate(7deg);
}

на выходе:

.block {
	-webkit-transform: rotate(7deg);
		-ms-transform: rotate(7deg);
			transform: rotate(7deg);
}

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

На последок скажу, что бывают ситуации, в которых наоборот требуется не использовать вендорные префиксы. в такой ситуации используются комментарии для gulp-autoprefixer:

a {
    transition: 1s; // Авто-префикс разрешен
}
b {
    /* autoprefixer: off */
    transition: 1s; Авто-префикс запрещен
    .a {
        /* autoprefixer: on */
    	transition: 1s; // Авто-префикс разрешен
    }
}

Надеюсь данная статья окажется для Вас полезной.