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

HTML5 : Optimisation des flux de production

Gérer les images responsives

Testez gratuitement nos 1343 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Le format HTML permet l'affichage d'images en tenant compte de la résolution des périphériques de destination. Cependant, certains navigateurs comme Internet Explorer ne le permettent pas. Réglez le problème avec un polyfill.
04:43

Transcription

HTML5 propose un attribut Srcset, qui est en fonction des périphériques de consultation, permet de distribuer diverses sources d’image. Tous les navigateurs aujourd’hui, contemporains, prennent en compte cette fonctionnalité. Mais Internet Explorer, y compris sa version 11, ne le gère pas. De même, le nouvel attribut picture element qui y est, va un tantinet plus loin que le srcset, est pris en compte lui aussi par tous les navigateurs, sauf par Internet Explorer. Nous allons voir que si la mise en place du côté html est très simple, parce qu’ici sur une balise image on va pouvoir utiliser cet attribut srcset si le navigateur prend en compte cet attribut, on va pouvoir distribuer en fonction de : soit de la largeur, soit de la résolution. Ici j’ai utilisé la largeur de l’image, une image différente. Sauf si le navigateur ne comprend pas srcset, automatiquement il va utiliser comme Fallback en gros l’attribut src classique de l’image, et donc distribuera une image classique. Alors, si on regarde les images ici, une image classique c’est une image de base, la 1, la 2 et la 3. Ce sont des images à des résolutions différentes ou à des dimensions pixel différentes, tout simplement représentées par un titre au sein de l’image pour mieux le visualiser en test. Du côté de Picture, c’est exactement pareil, c'est-à-dire que l’on va avoir ici un élément Picture qui va utiliser des éléments sources, et qui donc, en fonction de certains critères, pourra lui aussi, utiliser un srcset pour distribuer directement des images différentes. Pareil, si le navigateur ne prend pas en compte ni Picture donc, ni Source, automatiquement il prendra l’élément img qui est à l’intérieur, qui lui utilise un simple src, et donc pourra afficher l’image par défaut, qui sera l’image de base, ou l’image 1, ou l’image 2, ou l’image 3. Dans le chapitre du JavaScript, nous avons vu qu’il existait des polyfill qui vont nous permettre de gérer les manques d’API de navigateur. Et là, picture fill qui va permettre de prendre en compte ces éléments. Sauf que cette librairie, il faudra la charger que si l’élément ne prend pas, enfin le device, le périphérique, ne prend pas en compte cette fonctionnalité. Alors là, on va utiliser une autre librairie qui va être HeadJS. On avait vu aussi dans les tris de Polyfill, qui va pouvoir filtrer le type de navigateur, et notamment s’il s’agit d’un navigateur de type Internet Explorer. Alors la mise en place est vraiment très simple. Ici, il suffit de mettre, malheureusement pour tous les navigateurs headjs, en chargement. Alors là on utilise un cdn sur cdnjs, et puis de faire un filtre en disant : « une fois que le document est prêt, tu vas tester si on est sur browser IE, dans ce cas-là, tu charges telle fonctionnalité, d’accord ? Ensuite ce que tu vas faire, c’est tu vas faire un document createElement picture parce que l’élément Picture pourra être pris en compte automatiquement pour les css, par exemple. » Mais on pourrait également charger une deuxième librairie qui serait HTML5Shiv qui ferait le job, par exemple, on pourrait faire ce genre d’élément-là. Donc on voit bien qu’ici, ne sera chargée la librairie que dans le cas où on est sur IE. Et puis après, tout le reste du document, c’est exactement la même chose. Il y a rien qui est différent. Ensuite, pour le deuxième, eh bien, on va faire exactement pareil. On va charger cette source-là, et on va dire: « dans le cas où on est sur navigateur Internet Explorer, tu me charges la librairie et tu crées l’élément. » C’est tout ce qui a été fait. Il n’y a pas besoin de faire plus compliqué que ça. Donc si je regarde du côté du navigateur maintenant, histoire de tester un peu tout ça. Alors on va charger directement sur Internet Explorer. Pas besoin de passer par les autres navigateurs. Donc je vais ouvrir chacune de ces pages pour aller visualiser. Et donc si je regarde du côté de la première image, on voit bien qu’on a une image de base. Et puis c’est tout, on n’a aucune modification. Pourtant là, je devrais avoir une Image 3, je ne l’ai pas. Pareil pour la seconde image. On voit bien qu’on a l’image de base, et même si je suis en largeur, je n’ai que cette image-là. Par contre, si je télécharge le deuxième ou le troisième, on voit que j’ai chargé l’Image 3. Alors si maintenant je réduis mon image ici, il va falloir que je réactualise, et voyez qu’ici j’ai l’Image 1. Et puis dès que je vais ouvrir un peu plus, que je vais commencer, voyez, j’ai mon Image 2 qui arrive. Et si j’ouvre encore plus, j’ai l’Image 3 qui se charge. Voilà, maintenant si je reviens en fermeture complète, je prends le dernier test, voyez, j’ai l’Image 1 qui a été chargée. J'ai plus l’image de base, j’ai vraiment l’Image 1 qui est prise en compte, puis là j’ai l’Image 2. Et si je continue à ouvrir grandement, j’ai l’Image 3 qui est pris en compte. Donc les librairies, sans les charger, fonctionnent très bien, me permettent de se substituer la prise en compte native par les navigateurs.

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 !