• 15 hours
  • Medium

Free online content available in this course.

course.header.alt.is_video

course.header.alt.is_certifying

Got it!

Last updated on 2/24/20

Utilisez Autoprefixer pour créer du code adapté à tous les navigateurs

Log in or subscribe for free to enjoy all this course has to offer!

Notre site a l’air parfait sur votre navigateur, mais pas nécessairement sur celui des autres. Nous l’avons développé en utilisant Chrome, mais d’autres utilisateurs peuvent très bien utiliser Firefox, Opera… ou Internet Explorer (aaaaaahhh). 😱

Et alors… c’est pas pareil pour tout le monde ? C’est juste une histoire de préférence, non ? 🙄

Explorez les différents affichages par navigateurs

Eh bien non, il s’avère que certaines propriétés CSS s’afficheront différemment selon les navigateurs, sauf que vous voulez vous assurer que le rendu soit le même pour tous les visiteurs de votre site, peu importe leur navigateur. Pour les propriétés anciennes et bien connues telles que border ou margin, pas besoin de s’inquiéter : elles sont standardisées et fonctionnent sur tous les navigateurs. Mais ce n’est pas le cas pour certaines propriétés plus récentes, telles que grid ou flexbox.

Les équipes qui conçoivent vos navigateurs, tels que Google et Mozilla, n’attendent pas que les nouveaux outils plutôt cool soient standardisés pour pouvoir les intégrer. Au lieu de ça, ils créent leur propre version, en ajoutant un préfixe pour la distinguer des autres navigateurs. Bien sûr un jour ou l’autre, la nouvelle propriété sera standardisée et fonctionnera pour tous les navigateurs, supprimant le besoin d’utiliser des préfixes. Mais en attendant, il vous faudra utiliser des préfixes dans votre code.

Quand vous utilisez flexbox, au lieu de simplement définir la propriété display comme étant flex, vous devez lister touuuuuus les préfixes :

.header {
display: -webkit-box;

 display: -moz-box;
display: -ms-flexbox;
display: flex;
}

Désormais, notre header s’affichera uniformément sous Chrome, Safari, Mozilla, Opera et Microsoft Edge ! Je sais, ce n’était pas du tout au programme jusqu’ici et nous avons écrit énormément de code. Et maintenant, il va falloir aller tout modifier pour que notre code tout entier soit adapté sur tous les supports, quel boulot !

Noooon ! Je refuuuuseeee ! 😭

Pas de panique, clairement personne n’en a envie. Ajouter des préfixes est ennuyeux et ils changent tout le temps : puisque les standards évoluent en permanence, vous allez devoir les vérifier à chaque fois que vous écrivez du CSS pour être sûr que votre code est bien compatible. Mmmh barbant.

Autoprefixer” est un plugin qui vous sauvera des -webkit- et des  -moz-. Il fait exactement ce que son nom indique : il ajoute automatiquement des préfixes dans votre CSS. Il vous suffit de lui fournir une feuille CSS et il la passera en revue pour y ajouter les préfixes là où il faut.

Installez Autoprefixer

Alors, comment fait-on pour faire marcher ce plugin salvateur ? Ouvrez le terminal dans VS Code et utilisez npm pour installer Autoprefixer, PsstCSS et PostCSS-CLI

La marche à suivre est à peu près la même que pour installer Sass, sauf que vous installez trois packages d’un coup. Pour installer plusieurs packages en même temps, il vous suffit de les séparer par des espaces :

npm install autoprefixer postcss postcss-cli -g

Une fois que npm a téléchargé et installé les packages, retournez dans package.json  et ajoutez un nouveau script à exécuter pour npm, comme lorsque vous avez installé Sass. Après votre script “sass”, vous allez ajouter un nouveau script nommé “prefix”.

{
"name": "joeblow",
"version": "1.0.0",
"description": "Joe Blow's web portfolio",
"main": "index.js",
"scripts": {
  "sass": "sass ./sass/main.scss:./public/css/style.css -w --style compressed",
  "prefix":
},
"author": "",
"license": "ISC",
}

Et dans ce script, vous devez dire à npm d’utiliser le nouveau package  postcss  que vous venez d’installer, et n’oubliez pas de lui dire où trouver votre fichier CSS compilé :

{
"name": "joeblow",
"version": "1.0.0",
"description": "Joe Blow's web portfolio",
"main": "index.js",
"scripts": {
  "sass": "sass ./sass/main.scss:./public/css/style.css -w --style compressed",
  "prefix": "postcss ./public/css/style.css"
},
"author": "",
"license": "ISC",
}

Une fois que vous avez dit à npm quel package utiliser et où trouver votre fichier CSS, vous devez dire au package  postcss  d’utiliser Autoprefixer en exécutant le  flag --use  suivi d’autoprefixer :

{
"name": "joeblow",
"version": "1.0.0",
"description": "Joe Blow's web portfolio",
"main": "index.js",
"scripts": {
  "sass": "sass ./sass/main.scss:./public/css/style.css -w --style compressed",
  "prefix": "postcss ./public/css/style.css --use autoprefixer"
},
"author": "",
"license": "ISC",
}

Hop et dernière étape : vous devez lui dire où mettre votre nouvelle feuille CSS préfixée :

{
"name": "joeblow",
"version": "1.0.0",
"description": "Joe Blow's web portfolio",
"main": "index.js",
"scripts": {
  "sass": "sass ./sass/main.scss:./public/css/style.css -w --style compressed",
  "prefix": "postcss ./public/css/style.css --use autoprefixer -d ./public/css/prefixed/"
},
"author": "",
"license": "ISC",
}

Et voilà, votre script de préfixage est terminé ! Tout ce qu’il reste à faire, c’est dire à Autoprefixer jusqu’à quand il doit remonter pour assurer votre compatibilité avec tous les browsers.

Comment ça jusqu’à quand ? Tu veux dire une date ? 🤔

Par défaut, Autoprefixer n’ira vérifier que la précédente version des principaux navigateurs pour conclure quels préfixes il doit ajouter à vos feuilles CSS. Mais vous voulez être sûr que les internautes utilisant des versions de browsers un peu plus anciennes soient également pris en compte. On va donc indiquer à Autoprefixer de regarder les quatre dernières versions des navigateurs lorsqu’il vérifie la compatibilité de vos feuilles CSS. Juste après nos scripts, ajoutons donc une nouvelle clé nommée  browserslist (liste des navigateurs) :

{
"name": "joeblow",
"version": "1.0.0",
"description": "Joe Blow's web portfolio",
"main": "index.js",
"scripts": {
  "sass": "sass ./sass/main.scss:./public/css/style.css -w --style compressed",
  "prefix": "postcss ./public/css/style.css --use autoprefixer -d ./public/css/prefixed/"
},
"author": "",
"license": "ISC",
"browserslist": 
}

Et donnons à browserslist la valeur de  last 4 versions  :

{
"name": "joeblow",
"version": "1.0.0",
"description": "Joe Blow's web portfolio",
"main": "index.js",
"scripts": {
  "sass": "sass ./sass/main.scss:./public/css/style.css -w --style compressed",
  "prefix": "postcss ./public/css/style.css --use autoprefixer -d./public/css/prefixed/"
},
"author": "",
"license": "ISC",
"browserslist": "last 4 versions"
}

Vous venez de dire à Autoprefixer de remonter et de prendre en compte jusqu’à 4 versions avant celle d’aujourd’hui.

Ça y est, vous êtes maintenant prêt à autopréfixer votre CSS ! 🤘

Lancez Autoprefixer

Allons dans le terminal et lançons le script prefix :

npm run prefix

Le script apparaît dans la ligne de commande et, un instant plus tard, c’est terminé (tellement rapide) !

Image illustrant l'exécution rapide du script
Exécution du script

Regardez le nouveau CSS préfixé et vérifiez le bloc .header :

.header {
background: #15DEA5;
height: 10rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
    -ms-flex-align: center;
      align-items: center;
-ms-flex-wrap: wrap;
    flex-wrap: wrap;
width: 100%;
}

Notre site web s’affichera désormais proprement et uniformément sur tous les navigateurs compatibles.

Notre site web est prêt pour le grand public ! Il est responsive et compatible. Et grâce à Sass, le maintenir à l’avenir sera tellement plus simple ! 🙌

En résumé

  • Certaines propriétés CSS nécessitent ce qu’on appelle des préfixes et s’afficheront différemment sur différents navigateurs. 

  • Utilisez le plugin Autoprefixer pour ajouter automatiquement des préfixes dans votre CSS.

  • Installez Autoprefixer en utilisant la ligne de commande, et faites bien attention d’indiquer combien de versions anciennes vous voulez couvrir ! 

Bonus : utiliser des boucles et maps pour créer des modificateurs

Vous savez comment ça marche : la clé de la réussite, c’est la pratique ! 😉

L’exercice suivant est totalement facultatif, mais c’est un très bon entraînement pour créer des maps et les utiliser avec des boucles @each, qui peuvent vous faire gagner du temps et rendre votre code encooore plus maintenable (vers l’infini et au delà !)

Voici le challenge : automatiser la création de modificateurs qui changent la couleur du texte de  .article__headline  pour les valeurs de couleurs suivantes :

  1. #cc8624 (orange).

  2. #cc2475 (rose).

  3. #2469cc (bleu).

  4. #24cc24 (vert).

Mettez les valeurs dans une map en attribuant une clé à chacune, puis utilisez une boucle @each pour générer des sélecteurs ayant la structure suivante :

.article__heading--/*colour name goes here*/ {
  color:/*colour values goes here*/;
}

Si vous êtes encore un peu mal à l’aise avec les maps, vous pouvez aller réviser dans les chapitres précédents ! 😀

Example of certificate of achievement
Example of certificate of achievement