Utilisation de PostCSS pour la compatibilité entre navigateurs

Dans le dernier tutoriel, nous avons terminé notre section «Démarrage rapide» de cette série. Nous sommes maintenant prêts à utiliser PostCSS pour générer des feuilles de style, en utilisant différents types de plugins à des fins diverses..

Dans ce tutoriel, nous allons utiliser PostCSS pour créer une feuille de style conçue pour la compatibilité entre navigateurs. Nous allons:

• Avoir les préfixes de vendeurs automatiquement ajoutés dans
• Ajouter une série de solutions de repli pour Internet Explorer versions 8, 9 et 10
• Ajouter des solutions de rechange pour le pas encore largement pris en charge changera propriété

Commençons!

Configurez votre projet

La première chose à faire est de configurer votre projet pour qu’il utilise Gulp ou Grunt, selon vos préférences. Si vous n'avez pas encore de préférence pour l'un ou l'autre, je vous recommande d'utiliser Gulp car vous aurez besoin de moins de code pour atteindre les mêmes objectifs..

Vous pouvez lire comment configurer des projets Gulp ou Grunt pour PostCSS dans les tutoriels précédents.

• Guide de démarrage rapide PostCSS: Gulp Setup or
• Guide de démarrage rapide PostCSS: Configuration Grunt

respectivement.

Si vous ne souhaitez pas configurer manuellement votre projet à partir de rien, vous pouvez télécharger les fichiers source joints à ce didacticiel et extraire le projet de démarrage fourni Gulp ou Grunt dans un dossier de projet vide.. 

Ensuite, avec un terminal ou une invite de commande pointée sur le dossier, exécutez la commande npm installer.

Installer des plugins

Maintenant que votre projet Gulp ou Grunt + PostCSS est prêt, nous devons installer les plugins que vous utiliserez dans ce tutoriel..

Nous allons installer pas mal de plugins, donc au lieu de les installer un à un, comme nous l'avons fait dans les «Guides de démarrage rapide» pour Gulp et Grunt, nous les installerons tous en même temps avec une seule commande.

Que vous utilisiez Gulp ou Grunt, exécutez la commande suivante dans votre dossier de projet pour installer les plugins que nous utiliserons:

npm installer autoprefixer postcss-color-rgba-fallback postcss-opacity postcss-pseudoelements postcss-vmin pixrem postcss-will-change --save-dev

Maintenant que les plugins sont installés, allons-y et chargez-les dans votre projet.

Charger des plugins via Gulp

Si vous utilisez Gulp, ajoutez ces variables sous les variables déjà présentes dans le fichier:

var autoprefixer = require ('autoprefixer'); var color_rgba_fallback = require ('postcss-color-rgba-fallback'); var opacity = require ('postcss-opacity'); var pseudoelements = require ('postcss-pseudoelements'); var vmin = require ('postcss-vmin'); var pixrem = require ('pixrem'); var will_change = require ('postcss-will-change');

Maintenant, ajoutez chacun de ces nouveaux noms de variables dans votre processeurs tableau:

 processeurs var = [will_change, autoprefixer, color_rgba_fallback, opacité, pseudo-éléments, vmin, pixrem];

Faites un test rapide pour vérifier que tout fonctionne en exécutant la commande gulp css puis en vérifiant qu'un nouveau fichier “style.css” est apparu dans le dossier “dest” de votre projet.

Charger des plugins via Grunt

Si vous utilisez Grunt, mettez à jour le processeurs objet, qui est imbriqué sous le options objet, à ce qui suit:

 processeurs: [require ('postcss-will-change') (), require ('autoprefixer') (), require ('postcss-color-rgba-fallback') (), require ('postcss-opacity') () , require ('postcss-pseudoelements') (), require ('postcss-vmin') (), require ('pixrem') ()]

Faites un test rapide pour compiler en lançant la commande grunt postcss puis en vérifiant que le dossier «dest» de votre projet contient maintenant un nouveau fichier «style.css».

Vous avez maintenant tous les plugins installés requis pour ce tutoriel et vous êtes prêt à voir comment les utiliser pour améliorer la compatibilité entre navigateurs de vos feuilles de style..

Ajouter automatiquement le préfixe fournisseur

Certaines des mesures de compatibilité inter-navigateurs que nous allons couvrir ne seront nécessaires que pour des cas d'utilisation spécifiques. Le préfixage automatisé des fournisseurs, en revanche, est quelque chose que j’aimerais suggérer qui devrait être fait avec chaque projet, via le plugin Autoprefixer créé par Andrey Sitnik.

Il peut être difficile de garder un œil sur les propriétés qui nécessitent les préfixes de fournisseur à un moment donné, et en utilisant Autoprefixer, vous n'avez pas à le faire. Utilisez Autoprefixer dans chaque projet. Votre code comparera avec les données de CanIUse.com, puis ajoutera les préfixes du fournisseur, au besoin, sans que vous ayez à y penser..

Faisons un petit test pour voir Autoprefixer en action. Ajoutez l'animation et le code flexbox suivants au fichier “src / style.css” de votre projet:

@keyframes animationExample from width: 0;  à largeur: 100%;  .animateThis animation: animationExample 2s; affichage: flex; 

Courir gulp css ou grunt postcss pour compiler votre fichier, et votre “dest / style.css” devrait maintenant contenir ce code préfixé par le vendeur:

@ -webkit-keyframes animationExample from width: 0;  à largeur: 100%;  @keyframes animationExample from width: 0;  à largeur: 100%;  .animateThis -webkit-animation: animationExample 2s; animation: animationExample 2s; afficher: -webkit-box; afficher: -webkit-flex; display: -ms-flexbox; affichage: flex; 

Comme vous pouvez le constater, des préfixes de vendeurs ont été automatiquement ajoutés, comme l'indiquent les données fournies par CanIUse.com sur l'animation et la flexbox..

Spécification des niveaux de prise en charge du navigateur

Autoprefixer utilise Browserlist pour déterminer les versions de navigateur pour lesquelles il prendra en charge. Sous les paramètres par défaut, il appliquera les préfixes de fournisseur requis pour:

• > 1%: les navigateurs utilisés par plus d'un pour cent de la population mondiale
• 2 dernières versions: les deux dernières versions de chaque navigateur suivies par CanIUse.com
• Firefox ESR: la dernière version de Firefox
• Opera 12.1: Opera version 12.1

L'exemple ci-dessus a été compilé sous les paramètres par défaut d'Autoprefixer. Cela signifiait que le support pour IE10 et Safari 8 était inclus, donc le -Mme- et -webkit- préfixes dont ils ont besoin pour animation et boîte souple ont été automatiquement insérés.

Cependant, IE11 et Safari 9 ne nécessitent pas ces préfixes. Par conséquent, si vous définissez la configuration de votre liste de navigateurs de manière à ne prendre en charge que IE11 + et Safari 9+, ces préfixes ne seront plus ajoutés..

Essayez ceci en passant un navigateurs passant à Autoprefixer dans votre Gulpfile ou Gruntfile comme ceci:

// Dans le tableau 'processeurs' de Gulpfile: préfixe automatique (navigateurs: 'safari> = 9, c'est-à-dire> = 11'], // Dans le tableau 'processeurs' de Gruntfile: require ('préfixe automatique') (navigateurs: [ 'safari> = 9, c'est-à-dire> = 11']),

Maintenant, si vous recompilez votre CSS, vous verrez qu'il n'y a pas de différence entre votre code original et le code compilé. En effet, aucun support n'ayant été demandé pour Safari 8 ou IE10, aucun préfixe de fournisseur n'a été ajouté pour les adapter..

Liens connexes:

• Autoprefixer: https://github.com/postcss/autoprefixer
• Liste de navigateurs: https://github.com/ai/browserslist

Ajouter un repli pour la propriété «will-change»

le changera Cette propriété est utilisée pour informer à l'avance le navigateur que certains éléments de votre conception vont être animés. Cela permet au navigateur d’optimiser le processus de rendu et d’éviter les retards et les scintillements. Cependant, cette propriété n'est actuellement pas prise en charge par IE / Edge, Safari ou Opera Mini..

Le plug-in postcss-will-change, également créé par Andrey Sitnik, ajoute un repli qui aidera ces navigateurs à améliorer le rendu, même avec l'efficacité qu'ils pourraient obtenir s'ils étaient compatibles. changera. Il le fait en ajoutant le visibilité arrière propriété, qui déclenche la création d'une couche de composition qui sera gérée par le GPU.

Par exemple, ajoutez ce code à votre fichier «src / style.css»:

.thisWillChange will-change: transform; 

Compilez votre feuille de style et vous devriez voir la solution de secours apparaître dans votre fichier «dest / style.css»:

.thisWillChange backface-accessibility: masqué; va changer: transformer; 

Remarque: ce plugin devrait être chargé avant Autoprefixer dans votre Gulpfile / Gruntfile. Cela permet à Autoprefixer d’ajouter des préfixes de fournisseur au visibilité arrière propriété, comme si:

/ * Repli avec les préfixes de fournisseur * / .thisWillChange -webkit-backface-visibilité: hidden; visibilité face arrière: masquée; va changer: transformer; 

Liens connexes

• le plugin postcss-will-change: https://github.com/postcss/postcss-will-change
• Tout ce que vous devez savoir sur le CSS va changer de propriété
• Informations CanIUse: http://caniuse.com/#feat=will-change

Ajouter des solutions de secours pour d'anciens problèmes IE

Grâce aux versions améliorées des navigateurs de Microsoft et aux grands groupes qui ont abandonné le support de l'ancienne IE, nous nous rapprochons progressivement de la nécessité de ne pas constamment envisager les solutions de rechange et les solutions de contournement pour les anciens navigateurs problématiques. Microsoft lui-même cessera de prendre en charge IE8 en 2016. Bootstrap 4 alpha a récemment été publié et le support pour IE8 a également été abandonné. Google a cessé de prendre en charge IE8 en 2012 et a cessé de prendre en charge IE9 en 2013.

Cela dit, au final, chaque projet doit être évalué au cas par cas. Si vous ciblez un groupe démographique où les taux d'utilisation des navigateurs traditionnels sont élevés, vous n'aurez peut-être pas d'autre choix que de faire de votre mieux. pour les soutenir. Si tel est le cas, les plugins suivants peuvent vous aider à rendre ce processus un peu moins pénible..

Créer rgba () Repli de couleur

IE8 n'a pas de support pour rgba () couleurs, le plugin postcss-color-rgba-fallback de Guillaume Demesy ajoute donc une couleur hexadécimale plate comme solution de secours.

Par exemple, ajoutez ce code à votre fichier «src / style.css»:

.rgbaFallback arrière-plan: rgba (0,0,0,0,5); 

Compilez et vous devriez voir l'hexcode fall back ajouté dans votre fichier «dest / style.css»:

.rgbaFallback background: # 000000; arrière-plan: rgba (0,0,0,0,5); 

Liens connexes

• plugin postcss-color-rgba-fallback: https://github.com/postcss/postcss-color-rgba-fallback
• Informations CanIUse: http://caniuse.com/#feat=css3-colors

Créer opacité Les replis

IE8 ne peut pas gérer le opacité le plugin postcss-opacity de Vincent De Oliveira ajoute un filtre spécifique à IE pour obtenir le même effet.

Ajoutez ce code à votre feuille de style source:

.opacityFallback opacity: 0.5; 

Après la compilation, vous devriez voir le fichier approprié -ms-filter repli ajouté:

.opacityFallback opacity: 0.5; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha (Opacity = 50)"; 

Liens connexes

• plugin postcss-opacity: https://github.com/iamvdo/postcss-opacity
• Infos CanIUse: http://caniuse.com/#feat=css-opacity

Convertir :: dans : sur les pseudo-éléments

Il est considéré comme la meilleure pratique lors de la génération de pseudo-éléments tel que .element :: before utiliser une notation à deux points ::. C'est pour aider à les distinguer des pseudo-Des classes tel que .élément: survol qui devrait utiliser une seule notation du côlon :.

Cependant, IE8 ne supporte pas la notation double-colon :: pour créer des pseudo-éléments, il ne prend en charge qu'un seul deux points :. En utilisant le plugin postcss-pseudoelements de Sven Tschui, vous pouvez coder selon les meilleures pratiques et modifier automatiquement la notation..

Ajouter le double suivant :: code de notation:

.pseudo-élément :: before content: ";

Compilez votre fichier et vous devriez voir qu'il a été réduit au simple : notation:

.pseudo-élément: before content: ";

En codant selon les meilleures pratiques et en utilisant ce plugin, une fois que IE8 est complètement retiré, vous pouvez simplement retraiter votre CSS sans le plugin et disposer de la syntaxe appropriée..

Liens connexes

• postcss-pseudoelements plugin: https://github.com/axa-ch/postcss-pseudoelements
• Infos CanIUse: http://caniuse.com/#feat=css-gencontent

Ajouter vm Fallback pour vmin

Dans IE9, l'unité relative de la fenêtre vmin n'est pas pris en charge, mais utilise plutôt l'unité équivalente vm. Si vous vous adonnez à IE9, le plugin postcss-vmin de Vincent De Oliveira ajoutera vm unités de repli.

Ajoutez ce code à votre fichier “src / style.css”:

.vmFallback width: 50vmin; 

Recompiler, et le code résultant devrait avoir le vm repli d'unité ajouté dans:

.vmFallback width: 50vm; largeur: 50vmin; 

Liens connexes

• plugin postcss-vmin: https://github.com/iamvdo/postcss-vmin
• Infos CanIUse: http://caniuse.com/#feat=viewport-units

Ajouter px Fallback pour rem Unités

IE8 ne supporte pas rem unités du tout, et à la fois dans IE9 et IE10, ils ne sont pas pris en charge dans éléments en pseudo et Police de caractère déclaration abrégée. Avec le plugin node-pixrem de Vincent De Oliveira et Rob Wierzbowski, vous pouvez avoir px des replis basés automatiquement ajoutés où que vous soyez rem des unités.

Ajoutez ce code à votre feuille de style source:

.remFallback hauteur: 10rem; police: 2rem Arial;  .remFallback :: before content: "; line-height: 1rem;

Recompiler et vous devriez voir tous les fichiers appropriés px les replis ajoutés:

.remFallback hauteur: 160px; hauteur: 10rem; police: 32px Arial; police: 2rem Arial;  .remFallback: before content: "; hauteur de ligne: 16px; hauteur de ligne: 1rem;

Liens connexes

• plug-in node-pixrem: https://github.com/robwierzbowski/node-pixrem
• Infos CanIUse: http://caniuse.com/#feat=rem

Résumons

Pour résumer ce que nous avons couvert dans ce qui précède:

• Autoprefixer est un outil indispensable pour chaque projet
• Le préfixe automatique peut être configuré pour ajouter des préfixes de fournisseur basés sur les navigateurs à prendre en charge.
• Si vous utilisez une animation dans votre projet, envisagez d'utiliser le plugin postcss-will-change
• Si vous prenez en charge IE8, envisagez d’utiliser les plugins postcss-color-rgba-fallback, postcss-opacity, postcss-pseudoelements et postcss-vmin..
• Si vous supportez IE8, IE9, IE10 envisagez d’utiliser le plugin node-pixrem

Dans le prochain tutoriel

La suite de notre série PostCSS Deep Dive est un tutoriel sur l’utilisation des plugins pour minifier et optimiser votre CSS. Nous couvrirons l'inline @importation fichiers, en combinant des requêtes de média, en supprimant l’espace blanc et plusieurs autres méthodes pour rendre vos feuilles de style aussi simples que possible. On se voit là-bas!