Nous mettrons à jour notre Politique de confidentialité prochainement. En voici un aperçu.

HTML5 : Optimisation des flux de production

Configurer Autoprefixer

Testez gratuitement nos 1341 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Avant de vous pencher sur le package PostCSS, entièrement dédié aux CSS, intégrez Autoprefixer à votre panoplie. Apprenez à le configurer et adaptez-le à vos objectifs.
08:01

Transcription

Côté css, on a besoin également d’un certain nombre de fonctionnalités. Et donc avant d’aller regarder le fameux postCSS, on va voir qu’on a la possibilité d’utiliser des packages de manière indépendante qui vont pouvoir nous permettre de réaliser certaines tâches, comme par exemple le fait de rajouter ou pas des préfixes. C’est vrai qu’on n’a pas spécialement besoin de systématiquement publier tous les préfixages dans nos css et ça, on peut le faire à la demande et en fonction de certaines critères de production. Donc ici, gulp nous propose un autoprefixer qui est assez extraordinaire, puisqu’il va nous permettre de pouvoir rajouter ce préfixage, en ciblant vraiment le type de navigateur que l’on veut. Alors pour ça, il s’appuie sur browserslist. Browserslist ici, on va le décrire. Donc vous voyez, vous pouvez dire 1%, et Last 2 versions, IE 8, etc. Et donc pour pouvoir venir explorer chacune de ces fonctionnalités, je vous invite à vous rapprocher de ce petit github-là, qui va nous donner l’intégralité des filtrages que l’on peut avoir besoin. Revenons à l’autoprefixer ici, il suffit de pouvoir installer gulp-autoprefixer et gulp bien entendu, puisqu’on va avoir besoin des deux et de se focaliser ensuite sur notre gulpfile pour pouvoir le renseigner. Toujours pareil, on se repointe sur le dossier. Si je demande à ce dossier de me lister le contenu, je vois que j’ai la sortie, le fichier css qu’on va venir préfixer, le gulpfile et le package.json. Alors, on voit bien que c’est un dossier de sortie dans lequel je vais venir publier mes éléments. Si je fais un cd sortie, ici on n'a rien, et si j'ai un ls, on voit bien qu’il est vide, qu’il y a que dalle. Donc je refais un « ../ » pour revenir sur mon élément ici, et si je demande par exemple, de faire un Get-Content de package.json, vous voyez qu’on peut faire tout depuis la ligne de commande ici. Je vois mon gulp, il est présent, mon gulp-autoprefixer est là aussi, donc je ne peux directement faire qu'un npm install, puisque je n’ai pas les node_modules qui sont présents ici, je fais un npm install et je sais que ça va m’installer tous les packages nécessaires pour pouvoir travailler et je vais pouvoir donc maintenant venir me focaliser sur l’écriture du gulpfile ici, pendant ce temps-là. Alors au niveau de gulp, toujours pareil, on va faire un var gulp et on va faire un require gulp tout simplement, voilà. C’est très simple, et je vais faire exactement pareil pour l’autre package qui est autoprefixer. Voilà, donc on va créer sur cette instance de gulp notre tâche ici, et donc on va pouvoir l’appeler préfixs par exemple. Vous l’appelez comme vous voulez, c’est simplement arbitraire à ce niveau-là, et on va créer une fonction anonyme à l’intérieur de cette tâche ici. Et puis là, on va faire un return gulp, on va pointer notre fichier src, c’est toujours pareil. Encore une fois, pensez à venir copier la partie des noms de fichier pour être sûr de ne pas créer d’erreur de syntaxe qui serait assez lourde de conséquence. Et ici on va placer notre pipe. Alors, je reviendrais sur les paramètres par la suite, pour l’instant on va finir notre tâche. Je vais dire autoprefixer, et on va passer notre paramètre ici, on viendra placer notre objet par la suite ici, et ce qu’on faire, c’est : on va placer directement un second pipe qui cette fois-ci fera un gulp.destination, la destination de sortie, et donc on va placer dans notre dossier sortie. Alors moi, maintenant ce qui m’importe, ça va être de pouvoir voir les paramètres qu’on va pouvoir placer dans ce autoprefixer. Alors, si je regarde du côté du site npmjs ici, on s’aperçoit que dans l’autoprefixer, on a un objet qui va avoir deux paramètres, qui seront le browsers et le cascade. Je vous invite à venir regarder du côté des paramètres, quelles sont ces deux propriétés ? Pour nous, l’intérêt c’est : on va se focaliser sur le browsers parce que c’est cette partie-là qui m’importe. Donc je vais venir copier cette partie, je vais créer un objet à l’intérieur de cet élément, et je vais classer mon browsers, propriété browsers, et cette fois-ci, on va passer sur, par exemple les trois dernières versions, j’enregistre, on peut retourner dans la console, placer un clear pour nettoyer un peu tout cela et puis surtout maintenant donc, on a notre fonction qu’on a appelée préfixe. Si je fais un gulp prefixs, pluriel, je le lance, la tâche s’execute. Moi, ce qui m’intéresse maintenant, c’est si je fais un ls, vous voyez, je suis dans sortie ici, si je viens dans sortie, et si je fais un Get-Content ici, du fichier .css, on voit bien qu'on a simplement au niveau de Microsoft flex pour les trois dernières versions qui a été pris en compte et le display : -ms-grid. Alors pour cela, le plus simple ça va être de réduire nos fenêtres, de nettoyer cette console ici, de faire un « cd../ » pour revenir à zéro ici, et d’afficher ici les sorties css ici. Donc si maintenant, au lieu de faire dans ce gulpfile ici, je vais revenir, donc on va pouvoir commenter au fur et à mesure, donc ici, il suffit de commenter cette ligne-là, de venir rajouter un browser, par exemple Last 1 versions ici, j’enregistre, on vient ici, on va exécuter notre... voilà, gulp prefixs ici, je l’execute. Si je regarde du css maintenant, on s’aperçoit qu’avec une dernière version on n’a pas du tout la même configuration qui est faite à ce niveau-là, et on va pouvoir, comme ça, venir vérifier différents éléments. Donc si je reviens dans le gulpfile ici, je peux recommenter cette partie-là, et si là je lui dis : attention, ce que je veux maintenant c’est par exemple tous les browsers, mais qui ne seront pas les Internet Explorer < 11, et donc là, si je relance le préfixe ici, on va se retrouver cette fois-ci avec un css qui est différent, encore une fois de plus, vous voyez. Et donc vous allez pouvoir venir comme ça, faire différents tests, alors, le prochain qu’on pourrait faire, pourrait être des Internet Explorer de 9 à 11. Donc ici on lance, ça se réalise, on check, on voit bien qu’on a tout à fait un autre résultat. Ensuite, quelque chose qui est tout à fait intéressant, qui est de dire les browsers 1%, c'est-à-dire dès qu’un navigateur est utilisé à plus de 1% dans tes statistiques à toi, autoprefixer, et donc là on génère notre élément, on obtient quelque choses d’assez proche de ce qu’on avait juste avant, mais on peut affiner cette partie là en lui indiquant cette fois-ci in FR, c'est-à-dire statistique <1% spécialement en France. Et donc là, qu’est ce qu’on obtient ? On n’obtient pas forcément le même navigateur, pas forcément la même grille de lecture, et on peut même aller plus loin, c'est-à-dire, on peut également venir compléter avec une virgule, puisque là n’oublions pas que navigateur, on se trouve dans un tableau, ici, dire 1% en France et uniquement les 2 dernières versions de IE versions par exemple, on va pouvoir compléter là-dessus. Voilà si on lance, qu’est-ce qu’on obtient au résultat ? On obtient différentes propositions de grid. Donc vous voyez quelque chose qui ne va pas être ancrée en dur dans nos css mais qui va s’adapter en fonction des tâches que l’on va vouloir faire. Je vous invite vraiment à vous rapprocher ici à ce niveau du premier site qui vous permet d’explorer toutes les possibilités que vous avez, et puis aussi dans les parties d’options, tout à l’heure je vous parlais, il y avait browsers, cascade, eh bien, de voir les propriétés qui peuvent être rajoutée dans l’objet cette fois-ci. Si je reviens ici dans l’objet autoprefixer ici, tout ce qu’on va pouvoir rajouter comme propriété parce qu'ici, je peux autant rajouter dans le tableau des propriétés propres aux browsers, mais je vais pouvoir ici, venir rajouter cascade, par exemple true en seconde propriété, et je pourrais aller comme ça avec des virgules vers d’autres propriétés que je pourrais venir chercher dans cette liste de propriétés sur le site de autoprefixer directement.

HTML5 : Optimisation des flux de production

Optimisez vos flux de production lors de vos développements en HTML5. Explorez les méthodes et les éléments essentiels à la mise en place de processus automatisés.

5h29 (62 vidéos)
Aucun commentaire n´est disponible actuellement
 
Spécial abonnés
Date de parution :26 déc. 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !