Autoprefixer

Autoprefixer je – jak z názvu vyplývá – automatizační nástroj, který přidává prohlížečové prefixy do CSS kódu.

Autoprefixer například z následujícího kódu…

.box {
  hyphens: auto;
}

… udělá tento kód:

.box {
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

Tím pádem budou kódu rozumět všechny prohlížeče, i když vlastnost hyphens neznají a podporují jen prefixované varianty.

Jak Autoprefixer funguje?

Autoprefixer je balíček, který si můžete do projektu nainstalovat jako plugin pro PostCSS, což je nástroj sloužící k jakémukoliv automatickému zpracovávání CSS kódu.

Používat můžete Autoprefixer mnoha různými způsoby, o těch bude za chvíli řeč. Nejprve ale k nastavení.

Nastavení pomocí Browserslistu

Browserslist je způsob, jak Autoprefixeru a podobným nástrojům (jakým je například Babel pro zpracování JavaScriptu) určit, které prohlížeče v projektu podporujete.

Nejlepším způsobem, jak poskytnout toto nastavení, je soubor .browserslistrc v kořenovém adresáři projektu. Alternativně můžete přidat klíč browserslist do souboru package.json nebo přímo v nastavení Autoprefixeru.

Výchozí nastavení vypadá asi takto:

last 1 version, >1%

Potom tento kód…

.box {
  display: flex;
}

… bude mít totožný zápis i po zásahu Autoprefixeru. Pomocí nastavení last 1 version, >1% jsme řekli, že budeme podporovat jen poslední verzi prohlížečů a takovou verzi, která má ve světě rozšíření více než jedno procento.

Pojďme ale změnit zápis konfigurace takto:

> 1%, IE 11, IE 10

Pak bude výsledek jiný:

.box {
  display: -ms-flexbox;
  display: flex;
}

V konfiguraci Browserslistu je IE 10, takže Autoprefixer přidá zápis pro tento stařičký prohlížeč: display:-ms-flexbox.

Použití Autoprefixeru

Možností využití je celá řada, podívejme se na ně.

Online

Pokud si chcete jen hrát nebo přidat pár prefixů, zajděte na online pískoviště. autoprefixer.github.io

Příkazová řádka

Využijte balíček postcss-cli. vrdl.in/96mcu

npm install postcss-cli autoprefixer
npx postcss *.css --use autoprefixer -d build/

Gulp

Pro kombinování s Gulpem je k dispozici balíček gulp-postcss. vrdl.in/2a70d

gulp.task('autoprefixer', () => {
  const autoprefixer = require('autoprefixer')
  const sourcemaps = require('gulp-sourcemaps')
  const postcss = require('gulp-postcss')

  return gulp.src('./src/*.css')
    .pipe(sourcemaps.init())
    .pipe(postcss([ autoprefixer() ]))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('./dest'))
})

Webpack

webpack.config.js:

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader", "postcss-loader"]
      }
    ]
  }
}

postcss.config.js:

module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}

Použití Autoprefixeru s dalšími nástroji a více nápovědy najdete na oficiálním webu. vrdl.in/ptaqs