L'essentiel des CSS

Utiliser shim et polyfill

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Shim et polyfill sont des librairies et parfois des frameworks complets. Ils permettent de palier aux lacunes de certains navigateurs.
09:32

Transcription

Alors comme on l'a vu avant dans les deux étapes précédentes, entre le pré-fixage et les shim ou les polyfill, il existe pléthore de solutions pour pouvoir rendre l'intégralité de nos navigateurs compatibles entre eux, encore plus proches des standards. Alors on a vu, donc, en résumé, HTML5 Shiv, ici, vous avez le GitHub qui vous permet d'avoir toutes les informations, toute la documentation téléchargeable. Et encore une fois, pour pouvoir le mettre en application, si je regarde sur mon code ici, pour la partie HTML5 Shiv, le problème, c'est que les navigateurs de type Internet Explorer, antérieurs à la version 9, ne prennent pas en compte les balises HTML5. Donc la solution, c'est de se rapprocher, donc, là, ici par exemple, du GitHub directement d'HTML5 Shiv, ou on peut aussi aller sur le CDNJS, comme on l'a vu tout à l'heure, où on peut télécharger toute sortie de librairie. L'essentiel, c'est d'avoir appointé vers un fichier pour pouvoir donner à Internet Explorer la possibilité de prendre en compte ces balises. Donc ici, si j'actualise, on voit bien que tout se passe correctement. Si je passe maintenant dans Internet Explorer 8, ici, si j'actualise, on voit bien qu'une partie a pris en compte tout ce qui formate le paragraphe, mais ce qui formate la section n'est pas pris en compte. Donc pour cela, il suffit de retourner dans le code, ici, de rajouter, on l'avait vu tout à l'heure, un commentaire conditionnel qui lui dit : « Si tu te retrouves dans un navigateur de type Internet Explorer plus petit que la version 9, à ce moment-là, tu vas chercher sur le CDNJS cette librairie. » Et tout simplement, ça va être pris en compte. Donc, là, on peut aller vérifier dans Internet Explorer, si j'actualise, on voit bien que c'est pris en compte. Bien entendu, attention, c'est pris en compte uniquement au niveau de la balise ici, mais on avait vu que tout ce qui était couleur de type HSL, tout ce qui était Border Radius, etc. ne sont pas pris en compte, on voit ici comme dans Border Radius, et on voit bien que sur la version d'Internet Explorer, on n'a pas de coin arrondi. Déjà, ça, c'est une première partie. Il existe, on avait vu également, une seconde approche qui était le yepnope, c'est à dire de dire : « Si je comprends le test ici, si je comprends ce que tu me demandes au niveau du test, ça veut dire que, oui, je le comprends, je vais faire l'action de télécharger ce Javascript, ou tout autre type de fichier à télécharger. Et si tu ne le comprends pas, à ce moment-là, je vais télécharger ce, ou ces fichiers-là, pour venir suppléer. » C'est un peu l'équivalent d'un commentaire conditionnel mais ici, valable pour tous les navigateurs qui vont comprendre le Javascript. Si on regarde du coté du code, on avait, bien entendu, la prise en compte, dans notre section ici, par HTML5 Shiv. Ici, on a placé notre yepnope depuis une librairie CDN pour le télécharger là, depuis un serveur CDN. Et puis, Firebug Lite, juste pour pouvoir avoir dans Internet Explorer la version. Ici, aucun script n'a été chargé, on va s'en charger maintenant. Pour mémoire, on va créer une première variable vérification qui va nous permettre de tester si la prise en compte d'une fonctionnalité existe au sein du navigateur. Donc on sait que les vieux navigateurs Internet Explorer ne comprenaient pas addEventListener, enfin c'est un addEvent tout court, puis on lui demande : « Est-ce que le document addEventListener existe ? » Il va me dire oui ou non. Alors là, on va prendre la version not. On va pouvoir vérifier, donc, if verification, donc si c'est True, cette vérification, ça veut dire que note addEventListener n'existe pas, donc c'est une ancienne version d'Internet Explorer, sinon, c'est une version plus récente. Alors ça, on va pouvoir le commenter parce qu'on n'en a pas l'utilité. On va créer une boucle yepnote, on va créer un objet à l'intérieur qui contient trois propriétés. La première, c'est la propriété test, qui ne s'invente pas, ça fait partie de yepnope. Le test, c'est quoi ? C'est vérification. Donc si vérification renvoie à True, qu'est-ce qu'on fait ? Et bien yep. Donc ça aussi, ça ne s'invente pas, c'est propre à yepnope. Ici, elle va dire : « Tu charges le fichier 1.css », donc si je regarde ce fichier 1.css, ça correspond à une version propre pour Internet Explorer, sinon je lui dis nope, ça, c'est encore un mot-clé de yepnope, je lui dis : « Tu charges le 2. » Si ça charge le 2, ici, qu'est-ce que c'est que le 2 ? Le 2, c'est la version propre à tous les navigateurs contemporains. Donc si j'enregistre maintenant, ici, cette partie-là, et surtout cette partie ici, je vais dans Internet Explorer, on voit bien que dans Internet Explorer, yepnope ne fonctionne pas mais dès que je télécharge, bingo, ça fonctionne. Toujours pas de coin arrondi. Alors maintenant, on a une autre possibilité qui est Modernizr. Alors qu'est-ce que Modernizr ? Ici, si je viens voir Modernizr, c'est une autre librairie qui va fonctionner sur plusieurs méthodes. Alors ici, on va faire au plus simple, on va regarder la méthode basique qui va être que dès l'instant où on récupère cette librairie, on va aller la récupérer sur un CDNJS, c'est très bien, dès qu'on va récupérer cette librairie, on va pouvoir, ici, simplement l'ajouter. Alors on a ajouté la librairie. J'ai mon Firebug Lite pour pouvoir avoir une console de contrôle, au cas où, mais ce qui m'importe, c'est que, tout simplement, en plaçant cette librairie-là, bien entendu, ici, le but, c'est de faire passer, dans un premier temps, les couleurs de type HSL, les corriger, on va dire. Si je viens maintenant dans un navigateur classique, je teste Modernizr, j'actualise ma page, ici, si j'appelle la console de commandes, voyez, j'ai toute une série de classes qui ont été ajoutées au HTML. Et ça, c'est Modernizr qui le fait. Vous voyez, il m'a rajouté, sous forme de yes, c'est à dire de mots, donc HSLA, c'est pris en compte. Multiple Begs, Background Size, Border Image, tout ça, c'est pris en compte par ce navigateur. Bien entendu, on peut s'attendre aussi à ce qu'on aille sur Internet Explorer, si j'actualise ma page, n'oubliez pas qu'on a installé Firebug Lite. Donc, depuis l'onglet HTML, on peut venir consulter, et là, on s'aperçoit que c'est : no, no, no, no, no, donc, rien n'est pris en compte pour l'instant. Donc ici, pas besoin de faire un test comme on avait fait tout à l'heure avec vérification. Ici, on sait directement si c'est pris en compte. Donc pour cela, ce qu'on va faire, on va créer deux classes. Déjà, la première chose, c'est qu'on va commencer par supprimer ce qui n'est pas pris en compte dans cette partie-là, donc je le supprime directement, donc ici, allons-y gaiement, on enlève partout où il y a des couleurs. Et juste après, nous allons créer autant de classes, donc HSLA, B, on va pouvoir passer de HSLA, HSLA Section, on va passer du HSLA Section et on va créer No HSLA P, on va passer des couleurs maintenant, un RGB classique hexadécimal,, ce qui fait que, quand le navigateur aura dans sa classe Body la classe HSLA, il viendra piocher ici. Quand il aura la classe No HSLA, il viendra piocher ici, ce qui fait que maintenant, si je teste dans un navigateur moderne, ici, Modernizr, on voit bien que c'est pris en compte. Et si je vais dans un navigateur beaucoup plus ancien, de type Internet Explorer, qui ne gérait pas ce genre d'approche-là, on voit bien qu'il ne prend toujours pas de Border Radius. Alors là, on peut aller, pour les Border Radius, vers une énième librairie qui serait CSS3 Pie. Alors, CSS3 Pie, c'est quoi ? Ça a été mis en place, CSS3, pour Internet Explorer. Alors il existe des versions de 6 à 8, et après 9, puisque certaines choses ont bougé. Il y a deux approches, une première approche purement CSS, celle qu'on va voir maintenant, et une approche Javascript qui demanderait trop de rentrer dans le Javascript pour ce dont on en a besoin, ça va au-delà, si vous voulez, de simplement connecter une librairie ou d'orienter des fichiers. Donc je vous propose qu'on reste focalisé sur la partie CSS. Et ici, pour utiliser ça, on va télécharger ici, alors quand on va télécharger, bien entendu, vous avez deux versions, la version 1.0 ou la version 2.0 beta. Nous, on a opté pour la 2.0, ici, on va prendre la version beta, on va la télécharger et lorsqu'on a téléchargé tout ça, on se retrouve en fait avec un dossier qui contient des fichiers PHP, des fichiers Javascript, pour 6, 7, 8, pour 9. Nous, ce qui va nous intéresser, c'est le Pie HTC, ici. HTC, c'est un langage que Microsoft Internet Explorer est capable de comprendre. Donc on va utiliser cette partie-là. On pourrait prendre la partie encompressed qui nous permettrait de travailler dessus, mais la partie compressed me va très bien, et surtout, pour 1,69 ko, ne nous en privons pas. Alors, comment ça s'utilise ? De manière très simple. Il nous suffit d'aller dans le fichier ad-hoc, n'oublions pas de rajouter la prise en compte, si ça n'a pas été fait, déjà, ici, d'HTML5 Shiv, pour qu'on puisse comprendre la section. Et moi, ce qui m'importe, c'est ce Border Radius, ici, ce Border Radius ne sera pas compris. Remarquez au passage, quand même, que j'ai comparé un hexadécimal ici. Je ne suis pas resté en TSL, il y a des choses que CSS3 Pie ne fait pas. Mais le Border Radius, CSS3 Pie fait. Et qu'est-ce que je dois faire ? Il va me falloir simplement rajouter, ici, dans cette partie où il y a du CSS3, une propriété BAvior, ici, qui n'est comprise que par Internet Explorer, c'est une propriété CSS que les autres navigateurs ne calculent pas, ici, et tout simplement, je vais pointer une URL qui va être vers le chemin d'accès de mon dossier. Alors ici mon dossier s'appelle piz2-0beta, donc c'est un truc un peu préservé par la version de cet élément-là et je vais pointer vers le pi.htc, le fameux petit document HTC qu'on avait vu dans le décompactage du dossier téléchargé. Il suffit que je rajoute, donc, ça pour que les sections soient prises en compte, et ça, pour que cette propriété Border Radius soit prise en compte. Si je vais maintenant dans un navigateur Internet Explorer, je regarde sur la version CSS3 Pie, je télécharge, je vois bien que les coins arrondis sont pris en compte et bien sûr, les couleurs hexadécimales. Si vous voulez aller un peu plus loin, je vous invite à aller sur le site de CSS3 Pie, d'aller dans la documentation et ici de regarder les features supportés par CSS3, donc Border Radius, BoxShadow, Border Image, RGBA Colour, etc. Donc tout ça, ça va être pris en compte, ça va vous permettre de pouvoir rendre des navigateurs Internet Explorer, de 6 à 9, beaucoup plus compréhensifs, avec le CSS3, que ce qu'ils ne le seraient sans CSS3 Pie.

L'essentiel des CSS

​Explorez et assimilez les outils de base des CSS pour en comprendre les interactions visuelles. Structurez et gérez ainsi l’apparence et le visuel de vos sites web.

5h09 (54 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Thématiques :
Design web
Standards du web
Spécial abonnés
Date de parution :28 avr. 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 !