L'essentiel du HTML5

Prendre en main caniuse, shim et polyfill

Testez gratuitement nos 1268 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Palliez vos besoins de rétrocompatibilité avec des navigateurs ne prenant pas en compte le HTML5 de manière large. Appuyez-vous sur toute une série de polyfills venant remplacer le coté natif de l'API.
06:29

Transcription

Dans l'étape précédente, en téléchargeant Modernizr, on a vu qu'il y avait énormément de fonctionnalités qui pouvaient être détectées. Et on retrouve l'intégralité de ces fonctionnalités ici sur le site caniuse, qui va nous permettre de lister l'ensemble des fonctionnalités, quelles soient css html, api ou Javascript, pour nous indiquer leur portabilité sur les navigateurs. Regardez, si je prends l'api Websockets, ici, je vais avoir toute l'utilisation de Websockets et on va m'expliquer que tous les navigateurs la prennent en considération. Parfait. Faites attention parce ques des fois, il peut y avoir des subtillités. Regardez, ici, je vais aller prendre Webworker, par exemple. Je regarde, on me dit que cette api est largement est largement supportée par l'ensemble des navigateurs. Et faites attention parce qu'on a les shared webworker, qui sont une sous fonctionnalité des webworker, qui elles, ne sont pas pris en compte par l'ensemble des navigateurs. Simplement les deux majeures. Alors si votre s'adresse à un intranet, par exemple, basé sous firefox, chrome, il n'y a pas de soucis, vous foncez. Par contre, si vous le déployez sur un public plus large, faites attention, il faudra penser à trouver une solution alternative dans le cas où les webworker ne sont pas pris en compte. Et voir comment on va pouvoir faire une sorte de dégradation gentille des fonctionnalités de votre application. On verra ça juste brievement à la fin de cette étape. Revenons sur l'utilisation de Modernizr pour détecter ça. Alors, pour détecter ça, il suffit puisqu'on a Modernizr lié, on l'avait utilisé pour les css, ici, de venir placer un script. Alors, je vous propose pour focaliser simplement sur cette utilisation, c'est de placer simplement un script en bas de page, à la fin du chargement du document. On va faire un console.log tout simplement. On va lui affiche moi une information. Et cette information, tu vas aller la piocher dans Modernizr. Alors, vous écrivez Modernizr comme cela se prononce. Sans l'apostrophe. Modernizr, tout simplement. Et une fois qu'on a invoqué la class Modernizr, et bien, on va lui demander la fonctionnalité qu'on vise. Alors, ça pourrait être, admettons, est-ce que tu gères les webworker ? Les websockets ? On va faire un truc beaucoup plus basic, on va demander est-ce que tu gères la vidéo ? On écrit video tout simplement. J'enregistre, je vais passer dans le navigateur pour venir tester. J'actualise ma page. et vous voyez que là, il me répond un objet en fait. En m'indiquant format par format, le ogg, le h264, le webm de la manière dont il va le gérer ou pas. Et puis, il me donne aussi des primitiveValue et c'est à dire, il me dit en gros, si toutes ces valeurs sont données de manière html, je vais pouvoir les intégrer. Donc vous voyez, vous pouvez faire maintenant un test de boucle ici, et dire ifmodernizrvideo, à ce moment-là tu fait ça sinon, on va chercher peut-être de réorienter ou de demander à l'utilisateur de télécharger directement la vidéo pour la visualiser sur son navigateur et non pas depuis le navigateur. Alors, on n'est pas obligé de systématiquement passer par Modernizr. Mais vous avez compris le principe. Il va falloir faire un test, vérifier si la prise en compte d'une fonctionnalité. Si cette fonctionnalité est prise en compte, on oriente dans un sens, sinon on oriente dans l'autre. Prenons un exemple basique, on utilise de plus jQuery. Et vous voulez travailler avec jQuery mais vous savez pas si la personne a jQuery à bord. Ce que vous pouvez faire, alors Modernizr nous ferait un plaisir d'aller travailler là-dessus. Et si vous n'avez pas Modernizr, vous allez simplement checker une fonctionnalité de savoir si jQuery est pris en compte. Si jQuery est pris en compte, on fera quelque chose, sinon on fera autrement. Alors là, je me suis un peu mélangé les pinceaux. Voilà, je vais sortir ici. Donc, ici, on va checker par exemple if jQuery. Voilà, window.jQuery, ce sera plus clair mais bon ça suffisait de faire jQuery tout court. Par contre, il est Q sensitive dans beaucoup de que cas, donc je vais mettre un Q majuscule. Ici, on va lui dire si il y a jQuery, tu vas faire un console.log. Il vaudrait mieux le sortir faire une fonction. Mais là, on pourrait très bien faire cette manière-là, on va lui dire si tu as jQuery, tu vas m'écrire jQuery. Plus, tu vas me concaténer par exemple $. Alors là, on fait du jQuery, je suis désolé si vous n'utilisez pas cette librairie mais c'est une syntaxe Javascript qui nous permet de pouvoir écrire plus rpaidement certaines fonctionnalités. Et ici, je vais utiliser exactement la même chose mais dans le cas où tu n'utilises pas jQuery, on va faire donc natif, on va dire que c'est du javascript natif qui sera pris en compte et non pas au travers. Et là, on va passer par un document.getElementById et on va venir chercher l'Id titre. On obtient exactement la même information sauf qu'on l'obtient de manière native ou non native. Donc si maintenant, ici, je reviens actualiser dans mon document ici, si je fais actualise. Il me dit natif nul, y a pas. Si je mets un petit # ici, ça ne va pas le faire, voilà. Je retourne actualiser dans mon document. Il me dit bien que c'est un object.HTMLHeadingElement. C'est un objet d'en-tête, parfait. Si par contre, maintenant, je vais rajouter une liaison vers un cdn de jQuery, ici, donc je reviens dans mon code directement à la racine, ici. Et là, je vais placer une liaison vers cdn qui pointera pour récupérer jQuery, j'enregistre mon document. Je bascule dans le navigateur. Et je lance, et vous voyez qu'ici, il me dit jQuery. C'est bien un objet de type jQuery, un wrapper qui a été récupéré. Donc, on va pouvoir adapter notre script en fonction des fonctionnalité prises en compte, ou pas, par le navigateur. Ce que je vous invite à regarder maintenant, c'est deux sites qui sont tout autant intéressants l'un que l'autre. Le premier, ça va être chez Modernizr, le github, mais surtout d'avoir tous les polyfills qui vont exister. Donc si vous traitez du SVG, si vous traitez du canvas, du webstorage, etc... Donc là, vous allez avoir toutes les librairies que vous allez pouvoir utiliser, charger, dans la mesure où votre naviguateur ne traiterait pas de manière native, ces fonctionnalités-là. Vous voyez, il y a quand même plétors de librairies à pouvoir venir accéder. Il y a un autre site aussi qui est tout autant intéressant qui s'appelle html5please. Et là-dessus, vous allez trouvez, en tapant directement dans ce site, polyfills, tous les polyfills que vous pourrez utiliser pour remplacer un certain nombre de fonctionnalités natives de vos navigateurs par des librairies externes. Voilà, donc à chaque fois que vous allez développer un site, si vous avez besoin d'utiliser une retrocompatibilité, vous allez voir que html 5 permet énormément de choses mais pour les naviguateurs qui les prennent en compte. Pour ceux qui ne prennent pas en compte, si vous avez une rétrocompatibilité à assurer, il va falloir détecte le navigateur et l'orienter vers une librairie à ce moment-là, qui pourra faire le job à la place.

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 !