Jak na prefixy v CSS? Autoprefixer pomůže

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, který slouží k jakémukoliv automatickému zpracovávání CSS kódu.

Používat Autoprefixer můžete mnoha různými způsoby, o těch bude další část textu. Nejprve ale k nastavení.

Nastavení pomocí Browserlist

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

Nejlepším způsobem, jak poskytnou 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%

Pak tento kód…

.box {
  display: flex;
}

…bude mít totožný zápis i po zásahu Autoprefixeru. Zápisem 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 Browserlistu je IE 10, takže Autoprefixer přidá zápis pro tento stařičký prohlížeč: display:-ms-flexbox.

Použití Autoprefixeru

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

Online

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

Příkazová řádka

Využijte balíček postcss-cli. github.com/postcss/postcss-cli.

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

Gulp

Využijte balíček gulp-postcss. github.com/postcss/gulp-postcss

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

Ve Webpacku můžete využít postcss-loader. github.com/webpack-contrib/postcss-loader

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. github.com/postcss/autoprefixer