Autoprefixer

Autoprefixer je PostCSS plugin, který dokáže ošetřit vstupní CSS tak, aby bylo kompatibilní s prohlížeči dle zadané konfigurace. Princip fungování je založen především na automatickém doplňování tzv. vendor prefixů k CSS pravidlům, vlastnostem nebo hodnotám. Kromě toho v některých situacích umí přeložit moderní zápis do starší syntaxe, což je užitečné pro podporu moderních layoutů ve starších prohlížečích.

Co jsou vendor prefixy?

Dosažení kompatibility se staršími verzemi prohlížečů je možné díky tomu, že prohlížeče někdy experimentálně podporují novější funkce CSS, které v době vydání dané verze ještě nemusí být oficiálně plně specifikované. Aby se experimentální podpora odlišila od plně podporovaných vlastností, fungují experimentální vlastnosti pouze s tzv. vendor prefixem (neboli „předponou výrobce“). Někdy však – podle okolností vzniku – může mít prefixovaná vlastnost i docela jinou podobu: viz oficiální grid-template-columns vs. Microsoftem implementovaná  -ms-grid-columns.

Jakmile je vlastnost v prohlížeči implementována podle finální specifikace, prohlížeč začne upřednostňovat standardní vlastnost, ačkoli prefixované verzi může ještě nějaký čas stále rozumět.

Kromě experimentální podpory budoucích CSS vlastností někdy prohlížeče implementují podporu svých vlastních, nestandardních (v oficiální specifikaci CSS neuvedených) vlastností, které jsou rovněž prefixovány (např. -webkit-overflow-scrolling). Prohlížeče pak přeskakují ty pravidla a vlastnosti, kterým nerozumí, takže nestandardní vlastnosti fungují pouze ve svých „domovských“ prohlížečích.

Jak Autoprefixer funguje?

Autoprefixer automaticky doplňuje podobu pravidel, vlastností a hodnot tak, aby dosáhl co největší kompatibility s cílovými prohlížeči:

/* CSS kód před ošetřením Autoprefixerem (zdroj ukázky: https://github.com/postcss/autoprefixer): */

::placeholder {
  color: gray;
}

.image {
  background-image: url(image@1x.png);
}

@media (min-resolution: 2dppx) {
  .image {
    background-image: url(image@2x.png);
  }
}

/* CSS kód po ošetření Autoprefixerem: */

::-moz-placeholder {
  color: gray;
}

:-ms-input-placeholder {
  color: gray;
}

::placeholder {
  color: gray;
}

.image {
  background-image: url(image@1x.png);
}

@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 2dppx) {
  .image {
    background-image: url(image@2x.png);
  }
}

Ve výchozím nastavení Autoprefixer dále odstraňuje ty prefixy, které se nachází ve vstupním CSS, ale Autoprefixer ví, že již potřeba nejsou.

Jak nastavím cílové prohlížeče?

Nastavení podporovaných prohlížečů se zadává prostřednictvím konfiguračního souboru .browserslistrc nástroje Browserslist:

> 1%
last 1 chrome version
last 1 firefox version

Více o Browserslistu se můžete dočíst v samostatném článku.

Browserslist: užitečný nástroj, který funguje jinak, než jste si možná mysleli

Když se jako vývojáři rozhodujeme, které prohlížeče podporovat, potřebujeme Browserslist. Ten ale možná funguje jinak, než jste čekali.

Frontend GardenAdam Kudrna

Pomůže mi Autoprefixer s moderním CSS gridem v IE 11?

Ano! Kromě doplnění prefixů a přeložení do starší syntaxe dokáže Autoprefixer za určitých okolností emulovat některé novější funkce CSS gridu pro IE 11. Konkrétně zajišťuje přepočet tzv. explicitního gridu (tj. layoutové mřížky s pevným počtem a rozmístěním položek) s mezerami zadanými pomocí grid-column-gap, grid-row-gap nebo grid-gap a omezenou podporu automatického rozmístění položek (autoplacement) v pevně dané mřížce.

/* CSS kód explicitního CSS gridu před ošetřením Autoprefixerem: */

.example {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "left right";
    grid-column-gap: 1rem;
}

.left {
    grid-area: left;
}

.right {
    grid-area: right;
}

/* CSS kód explicitního gridu po ošetření a přepočtu pro IE 11: */

.example {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 1rem auto;
    grid-template-columns: 1fr auto;
    grid-template-areas: "left right";
    grid-column-gap: 1rem;
}

.left {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
    grid-area: left;
}

.right {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
    grid-area: right;
}

Podrobnější ukázky práce s CSS gridem v IE pěkně popisuje článek na Vzhůru Dolů.

S podporou autoplacementu je však potřeba zacházet opatrně. Může vést k rozbití layoutu v projektech, kde ošetření autoplacementu v Autoprefixeru nebylo dosud povolené, nebo se dokonce Autoprefixer nepoužíval vůbec. Z toho důvodu je autoplacement v Autoprefixeru ve výchozím stavu vypnutý. Zapnout jej lze buď v konfiguraci PostCSS pluginu volbou grid: autoplace, anebo řídícím komentářem:

/* autoprefixer grid: autoplace */

.autoplacement-example {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  grid-gap: 20px;
}

Jak Autoprefixer spustím?

Autoprefixer lze prostřednictvím PostCSS začlenit do libovolného automatizačního workflow. Základem je minimální konfigurace postcss.config.js:

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

Jakmile PostCSS o Autoprefixeru ví, zbývá zařadit PostCSS do automatizace třeba s Gulpem:

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

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

Nebo s webpackem:

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

Autoprefixer je dále možné zapojit do CSS-in-JS či řady dalších buildovacích nástrojů, používat jej online či ovládat v příkazové řádce (CLI). Podrobné ukázky najdete v oficiální dokumentaci.

Mohu Autoprefixer lokálně vypnout?

Účinnost Autoprefixeru je možné místně vypínat a opět zapínat pomocí řídících komentářů:

.a {
  transition: 1s; /* bude prefixováno */
}

.b {
  /* autoprefixer: off */
  transition: 1s; /* nebude prefixováno */
}

.c {
  /* autoprefixer: ignore next */
  transition: 1s; /* nebude prefixováno */
  mask: url(image.png); /* bude prefixováno */
}

Pozor na to, že řídící komentáře musí mít podobu CSS komentářů /* */, preprocesorové (tiché) komentáře // nebudou fungovat. Autoprefixer totiž přichází ke slovu až tehdy, kdy jsou zdrojové soubory zkompilované do formátu CSS, do kterého se preprocesorové komentáře // nedostanou.

Související odkazy

• Autoprefixer online
• GitHub repozitář
• CSS Grid in IE: CSS Grid and the New Autoprefixer (Daniel Tonon, CSS Tricks, 2018)