Autoprefixer

CSS-in-JS 🟢 Junior

Définition

Plugin PostCSS qui ajoute automatiquement les préfixes vendeur (-webkit-, -moz-, etc.) selon la liste de navigateurs cibles (browserslist). Plus besoin de les écrire manuellement.

Analogie

Un traducteur qui ajoute automatiquement les sous-titres dans toutes les langues nécessaires.

Exemple de code

/* Input */
.box { display: flex; user-select: none; }

/* Output avec Autoprefixer */
.box {
  display: -webkit-flex;
  display: flex;
  -webkit-user-select: none;
  user-select: none;
}

Cas d'usage

Garantir la compatibilité navigateurs sans écrire manuellement les préfixes vendeur.

#styling#css-in-js

← → au clavier pour passer d'une fiche à l'autre