L'essentiel du HTML5

Utiliser Modernizr

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
À l'instar des balises HTML5, les navigateurs plus anciens peuvent avoir des difficultés à prendre en compte des propriétés CSS. Explorez les bases d'utilisation d'un outil dédié à cette détection : Modernizr.
05:03

Transcription

Donc, au niveau du html, déjà, on a vu qu'il pouvait y avoir une problématique de prise en compte par certains types de navigateurs, mais c'est pareil pour les api. Et ce, quelques soient les api. Si je regarde du côté, par exemple, de css3, ici, le mode de couleur peut être défini sous forme de mode hsla. Donc si on prend un navigateur contemporain, ici sur Chromium, on s'aperçoit que la couleur est prise en considération et utilisée. Par contre, si on bascule sur Internet Explorer, on s'aperçoit que la couleur n'est pas prise en compte. Donc la balise section est maintenant prise en compte, pas de souci, mais pas la couleur. Donc, il va falloir jongler là-dessus. Et pour cela, on a la possibilité d'utiliser un polyfile ou une librairie qui va nous permettre de gérer nos polyfiles. Et Modernizr reste quelque part un incontournable aujourd'hui, sur ce type de fonctionnalité. C'est à dire qu'on va devoir détecter à quel navigateur on a à faire et est-ce que le navigateur prend ou pas en compte l'api, la fonctionnalité ? Alors là, c'est css. Je l'ai pris volontairement pour que ça soit visuel. Quoi que ça soit pas quelque chose de trop basé au niveau du code. Mais cela fonctionne exactement comme des fonctionnalités au niveau des api pures et dures en Javascript. Alors comment fonction Modernizr ? Modernizr va s'assurer que le naviguateur comprend ou pa une fonctionnalité. Et fonction, on pourra faire quelque chose, sinon, on fera autrement. Alors, pour télécharger Modernizr, plusieurs manières. Soit on prend la version de développement ici, qui est intégrale, qui complètement non minifier. Donc, qui va nous permettre de travailler dessus, la contraindre, mieux capter sa fonctionnalité. Soit on va simplement avoir besoin de détécter, par exemple, uniquement que l'api canvas et vidéo soient prises en compte. Donc, à ce moment-là, on va faire Add your detects. On va aller faire notre marché en disant, je veux la balise canvas je veux du canvas text, et on va chercher comme ça, la vidéo. Donc, savoir si la vidéo est prise en compte par le navigateur, voilà. Et vous voyez donc que la liste du marché est très longue. On peut vraiment aller piocher de manière chirurgicale chacune des fonctionnalités que l'on va viser. Donc, ici, si on utilise build, on va utiliser uniquement cette partie-là de la librairie. Soit on va télécharger l'intégralité, soit on va passer encore près d'un cdn, en disant, je vais chercher telle version de Modernizr, je ne vais pas la télécharger, je vais pointer vers son lien de téléchargement. Donc, c'est ce que je vous propose de faire pour pouvoir tester cette fonctionnalité. Alors, on va aller la rajouter au niveau de notre code, ici. Donc, on va simplement rajouter une petite ligne à ce niveau. Donc, on colle le code, tout simplement. Je vais enregistrer et actualiser auprès d'un navigateur moderne. Je vais juste prendre le soin d'inspecter le code à ce niveau-là, au niveau de la console. Et je vais lancer le rechargement de la page. Alors, je vous disais console, c'est pas console, c'est plutôt au niveau de l'élément. Regardez, au niveau de l'élément html, il a été placé tout une classe, une série de classe. C'est Modernizr qui a fait ça, qui me dit donc les fonctionnalités qui sont prises en compte, ou pas, par le naviguateur. Donc ici, vous voyez, la classe JS, Flexbox, FlexboxLegacy, Canvas, ça veut dire que c'est pris en compte. Par contre, l'écrant tactile, no-touch, n'est pas pris en compte, vous voyez. Donc partout, où ça sera pris en compte, la fonctionnalité sera écrite de manière intégrale. Et si c'est pas pris en compte, ça sera no-webworker, par exemple. Moi, ce qui m'importe là, c'est hsl. est-ce que hsl est pris en compte ? Oui, c'est pris en compte, donc c'est pour ça que ça me permet de visualiser le rendu de couleurs. Je vais aller rajouter une petite librairie, ici, qui n'a rien à voir avec la choucroute pour l'instant. Mais qui va nous servir au niveau d'Internet Explorer. Je vais simplement utiliser un firebug-lite. Donc, je vais pointer vers cette adresse chez getfirebug.com pour avoir un firebug au niveau du navigateur. Donc ça me créerait certains soucis si le navigateur le prend en compte mais là, Internet Explorer, lui, ne le prend pas en compte. Alors on bascule dans la partie intéressante, voilà, ici. On va appeler donc ce firebug. Donc, il suffit de faire F12, ici. Et si j'actualise ma page ici, maintenant, vous allez voiur que le html, cette fois-ci, va utilise toute une série de no, no, no. En fait, rien n'est pris en compte ici, et surtout, on a la hsla-class qui a été intégré. Alors, comment ça va nous servir ? Tout simplement, on va retourner dans notre partie de code ici, et on va égrainer cette partie-là. Ici, c'est simplement sur de la couleur, donc on aurait pu faire un paliatif, c'est pas grave, mais regardez, je vais rajouter une classe tout simplement devant chacun de ces sélecteurs, ici. Je vais dire, ici, c'est pour la partie hsla. Voilà comment tu vas traiter la couleur. Par contre, si on est dans une partie no-hsla, c'est à dire que tu ne prends pas en compte le hsla, je réécris mes feuilles de style d'une autre manière pour qu'Internet Explorer justement, puisse le comprendre et le gérer. Internet Explorer ou le navigateur qui ne prendrait pas ces valeurs en considération. Alors comme je le disais, dans ce cas-là, il vaut mieux peut-être écrire de manière uniforme, tirer vers le bas et écrire directement en hexadécimales. Alors là, je vais directement aller au niveau d'Internet Explorer, je vais actualiser ma page, et cette fois-ci, vous voyez que tout est pris en compte. Bien-sûr les border-radius ne sont pas pris en compte parce qu'Internet Explorer ne gère pas les border-radius mais vous avez compris la mécanique. Donc comment on va pouvoir faire pour détecter en fonction du navigateur et affecter les classes de manières différentes.

L'essentiel du HTML5

Préparez la structure de vos sites web de manière évolutive, sémantique, et accessible à tous avec le HTML5. Abordez la gestion du texte, les balises et les attributs, etc.

5h13 (63 vidéos)
Aucun commentaire n´est disponible actuellement
Logiciel :
Spécial abonnés
Date de parution :29 juin 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 !