Autoprefixer, un postprocesseur pour les préfixes vendeurs

Autoprefixer analyse la syntaxe des fichiers CSS et ajoute des préfixes vendeurs aux règles CSS en utilisant la base de données de Can I Use pour déterminer les préfixes nécessaires.

Par

Autoprefixer analyse la syntaxe des fichiers CSS et ajoute des préfixes constructeurs aux règles CSS en utilisant la base de données de Can I Use pour déterminer les préfixes nécessaires.

Tout ce que vous avez à faire est de l'ajouter à votre outil de construction (Grunt par exemple, ou CodeKit) et vous pouvez complétement oublier les préfixes constructeurs. Il vous suffit d'écrire votre CSS normal, correspondant aux dernières spécifications du W3C, sans préfixe, comme ceci :

a {
    transition: transform 1s
}

Pour appliquer les préfixes constructeurs, Autoprefixer s'appuie sur une base de données combinant l'actualité des préfixes et des navigateurs. Le résultat :

a {
    -webkit-transition: -webkit-transform 1s;
    transition: -ms-transform 1s;
    transition: transform 1s
}

Le problème

Nous pouvons bien sûr écrire les préfixes à la main, mais cela s'avère vite ennuyeux et générateur d'erreurs, surtout pour des préfixes complexes comme flexbox. Nous pouvons utiliser les services comme Prefixr et des plugins d'éditeurs de textes, mais c'est à peu près aussi épuisant. Nous pouvons également utiliser des bibliothèques de mixins avec des préprocesseurs tels que Compass pour Sass ou nib pour Stylus. Ils résolvent pas mal de problèmes, mais en créent d'autres. Ils nous obligent à utiliser une nouvelle syntaxe, leur mise à jour est plus lente que celle des navigateurs modernes et de ce fait comprennent de nombreux préfixes devenus inutiles. Parfois nous devons créer nos propres mixins.

Compass ne vous libère pas des préfixes puisque vous devez encore déterminer, par exemple, si vous devez écrire un mixin pour border-radius ou si vous devez séparer les arguments de +transition par une virgule.

-prefix-free de Lea Verou est à deux doigts de résoudre le problème, mais l'utilisation de bibliothèques côté client n'est pas la meilleure solution si l'on prend les performances en compte. Pour éviter de refaire sans cesse le même boulot, il vaut mieux écrire notre CSS une bonne fois pour toutes : pendant la construction de notre projet ou lors de son déploiement.

Sous le capot

Autoprefixer n'est pas un préprocesseur, comme Sass ou Stylus, c'est un postprocesseur.

Il n'utilise pas de syntaxe spécifique et fonctionne avec le CSS normal. Il peut être facilement intégré à Sass et Stylus puisqu'il intervient après la compilation de CSS.

Autoprefixer est basé sur Rework, un framework d'écriture de postprocesseurs. Rework analyse la syntaxe CSS et exporte en retour un nouveau CSS.

Chaque version d'Autoprefixer contient une copie des dernières données de Can I Use :

  • une liste des navigateurs actuels et de leur popularité.
  • une liste des préfixes requis pour les nouvelles propriétés, valeurs et sélecteurs CSS

Par défaut, Autoprefixer supporte les deux dernières versions des principaux navigateurs, comme le fait Google. Mais vous pouvez choisir vos navigateurs par leur nom (p.ex. "ff 21") ou par critère :

  • Deux dernières versions des principaux navigateurs, en utilisant "last 2 versions".
  • Navigateurs ayant plus de 1% du trafic, avec ">1%".
  • Seulement les versions les plus récentes, avec "ff>20" ou "ff>=20".

Autoprefixer évalue ensuite les préfixes requis et les préfixes obsolètes.

Lorsqu'Autoprefixer ajoute des préfixes à votre CSS, il n'oublie pas les différences de syntaxe. Votre CSS respecte ainsi les dernières spécification du W3C :

a {
    background: linear-gradient(to top, black, white);
    display: flex
}
::placeholder {
    color: #ccc;
}

est compilé en :

a {
      background: -webkit-linear-gradient(bottom, black, white);
      background: linear-gradient(to top, black, white);
      display: -webkit-box;
      display: -webkit-flex;
      display: -moz-box;
      display: -ms-flexbox;
      display: flex
}
:-ms-input-placeholder {
      color: #ccc
}
::-moz-placeholder {
      color: #ccc
}
::-webkit-input-placeholder {
      color: #ccc
}
::placeholder {
      color: #ccc
}

Autoprefixer nettoie les préfixes obsolètes (qu'il peut trouver dans des bibliothèques comme Bootstrap), ce qui fait que le code :

a {
      -webkit-border-radius: 5px;
      border-radius: 5px
}

est compilé en :

a {
      border-radius: 5px
}

Lorsqu'Autoprefixer a terminé son travail, il ne reste plus dans votre CSS que les préfixes à jour. Quand Fotorama est passé de Compass à Autoprefixer, la taille du fichier CSS à été réduite de presque 20%.

Démo

Si vous ne faites pas encore appel à des outils d'automatisation de tâches, regardez du côté de Grunt. Je recommande vivement l'utilisation de tels outils qui peuvent vous ouvrir un monde de syntaxes "sucrées", des bibliothèques de mixins qui vous feront gagner un temps précieux et des outils de process d'images. Toutes les méthodes de productivité sont diponibles maintenant pour les intégrateurs web et les programmeurs.

Créons un dossier pour notre projet et écrivons un CSS simple dans style.css.

//style.css

a {}

Pour cet exemple, nous allons nous servir de Grunt (NdT: Si vous ne connaissez pas bien Grunt, reportez-vous d'abord au formidable article d'introduction à Grunt, traduit ici-même). Tout d'abord, nous devons installer grunt-autoprefixer à l'aide de npm :

//console

npm install grunt-cli grunt-contrib-watch grunt-autoprefixer

Puis nous créons un fichier Gruntfile.js dans lequel nous intégrons Autoprefixer :

// Gruntfile.js

module.exports = function (grunt) {
grunt.initConfig({
    autoprefixer: {
        dist: {
            files: {
                'build/style.css': 'style.css'
            }
        }
    },
    watch: {
        styles: {
            files: ['style.css'],
            tasks: ['autoprefixer']
        }
    }
});
grunt.loadNpmTasks('grunt-autoprefixer');
grunt.loadNpmTasks('grunt-contrib-watch');
};

Cette config permet la compilation de style.css en build/style.css avec Autoprefixer. De plus, nous utilisons grunt-contrib-watch pour recompiler build/style.css à chaque fois que style.css est modifié.

Démarrons Grunt watch :

//console

./node_modules/.bin/grunt watch

À présent, nous ajoutons une expression CSS3 à style.css et nous enregistrons le fichier :

//style.css

a {
      width: calc(50% - 2em)
}

C'est ici que la magie opère et nous avons maintenant un fichier build/style.css. Grunt a détecté le changement de style.css et a lancé la tâche d'Autoprefixer. Celui-ci a trouvé calc() qui nécessite un préfixe vendeur pour Safari 6.

//build/style.css

a {
      width: -webkit-calc(50% - 2em);
      width: calc(50% - 2em)
}

Nous ajoutons maintenant un CSS3 un peu plus compliqué à style.css :

//style.css

a {
      width: calc(50% - 2em);
      transition: transform 1s
}

Autoprefixer sait déjà que Chrome, Safari 6 et Opera 15 ont besoin de préfixes pour transition et transform . Mais IE 9 a aussi besoin d'un préfixe pour transform que nous utilisons dans la valeur de transition.

//build/style.css

a {
      width: -webkit-calc(1% + 1em);
      width: calc(1% + 1em);
      -webkit-transition: -webkit-transform 1s;
      transition: -ms-transform 1s;
      transition: transform 1s
 }

Autoprefixer est conçu pour exécuter toutes les tâches rébarbatives à votre place. Bienvenue dans le futur de CSS3, fini les préfixes vendeurs !

Et après ?

  1. Autoprefixer est compatible avec Ruby on Rails, Middleman, Mincer, Grunt, Sublime Text. Vous trouverez plus d'informations dans la documentation.
  2. Si votre environnement n'est pas compatible avec Autoprefixer, faites-le moi savoir et j'essaierai d'y remédier.
  3. Suivez @autoprefixer pour avoir des nouvelles des mises à jour et des nouvelles fonctionnalités.

Lecture complémentaire :

Grunt pour ceux qui pensent que Grunt est compliqué, une excellente introduction à Grunt par Chris Coyier.


original paru le dans CSS-Tricks.

Sur l'auteur : est un développeur russe, vous pouvez le suivre sur Twitter ou sur son site.

Traduit avec l'aimable permission de CSS-Tricks et de l'auteur.
Copyright CSS-Tricks © 2013.