L'essentiel des CSS

Tenir compte des navigateurs

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Écrire des CSS est une chose, s'assurer qu'elles soient prises en compte par l'ensemble des navigateurs en est une autre. Parcourez quelques exemples et voyez comment il est possible de couvrir le plus largement le parc des navigateurs.
08:26

Transcription

Ecrire des CSS par le passé a toujours été un peu problématique parce que tous les navigateurs n'intégraient pas les CSS de la même manière. Donc, c'était un peu problématique. Qu'en est-il aujourd'hui ? Ça continue, parce que tous les navigateurs n'implémentent pas à la même vitesse les working drafts et les nouvelles versions de modules qui vont arriver. Pour mieux comprendre cette évolution - qui en est une en fait - qui donne l'impression d'avoir des problèmes avec CSS, mais en fait il y a une réelle évolution, revenons un peu dans le passé. Si ici j'écris un simple document HTML qui s'appuie bien entendu sur du HTML5 et qui fait appel à la balise section, si je passe dans un navigateur contemporain, on voit que j'ai un font-size de 2,25 et 125% de line-height c'est respecté, c'est fait. Mais si je passe dans un vieux navigateur de type Internet Explorer et que j'actualise ma page, on voit que ce n'est pas pris en compte. Alors, c'est pas pris en compte, on voit bien qu'on ne parle pas de CSS on parle de HTML5. Il suffirait que maintenant je place une balise de script dans mon document et que je dise dans ce document document.create element de type section En gros je dis au Javascript : «Tu me crées un élément de type section.» J'enregistre. Je bascule dans IE directement. J'actualise et on voit bien que c'est pris en compte. En fait, le souci c'est que IE ne connaissait pas la balise section et ne savait pas comment la styler. Dès qu'on lui a dit : « Je la créé, je l'invente » il comprend qu'il peut le faire. C'est parfait. Seulement, ça va me demander de la faire pour l'intégralité de ces balises. A la place, ce que je vous propose de faire, c'est de trouver une librairie, on verra les shim et les polyfill par la suite, mais en gros on va trouver une librairie Javascript qui va faire ce job pour moi et qui va redéfinir tous les éléments HTML5, en plus qui va leur donner un style par défaut avec des types bloc, etc. Là encore, on reviendra dessus plus tard. Pour faire ça, je vais me rapprocher d'un CDN. Un CDN, c'est un serveur qui met à disposition des scripts pour moi. Ça a l'avantage surtout que je n'ai pas à le télécharger sur mon serveur mais surtout puisque c'est un CDN où beaucoup de développeurs vont aller se servir, il y a de fortes chances que ce script soit déjà dans le cache du navigateur du visiteur. C'est un double intérêt : bande passante améliorée et librairie disponible. Ici, je vais récupérer celui-ci. Je pourrai faire un script directement au sein de ma page pour venir le positionner. Le petitt souci, c'est si je fais un script au sein de ma page tous les navigateurs vont le voir et il y a plein de navigateurs qui n'en ont pas besoin. Je vais donc utiliser un commentaire conditionnel comme on l'a vu tout à l'heure. Au lieu de mettre un CSS je vais mettre un script à l'intérieur qui va pointer vers cette librairie. Tous les navigateurs inférieurs à IE 9 iront chercher cet élément-là et vont avoir un patch. Jusque-là c'est fabuleux parce que ça va fonctionner. Mais si je décide de faire un lien vers ma page vers un autre style CSS et en l'occurence je vais pointer vers ce script n°2 qui fait appel à des couleurs en mode HSLA donc du TSL avec couche alpha, là IE, même avec tous les scripts qu'on veut, il ne va pas comprendre. Lui, ce qu'il comprendrait, ça serait plutôt : Si il y avait de bonnes vieilles couleurs en hexadécimal qui seraient tapées presque dans le marbre. Comment peut-on faire pour dire, en fonction du navigateur, tu m'envoies telle ou telle feuille de style ? Alors, ça ça ne va pas s'approcher de IE, parce que si on regarde dans la documentation d'IE il me dit : « Attention, le support pour les anciennes version d'IE va se terminer le 12 janvier 2016.» C'est à dire qu'elles sont déjà terminées. Si vous voulez vous amuser vous pouvez venir demander ce qu'il en est pour IE10. C'est vieux, mais pas si vieux que ça. Il va vous renvoyer : « Attention, en fonction du système d'exploitation que tu as, si on couvre toujours le système d'exploitation, on va pouvoir te couvrir. SI on ne couvre pas, on va rentrer dans des politiques... » En gros, on vous dit : « Basculez sur Edge, basculez sur un système d'exploitation contemporain et on vous supportera. » En gros, vous pouvez avoir l'intégralité de la politique de Microsoft ici. Ce n'est pas pour incriminer Microsoft parce que ce que vous allez rencontrer là, on a beaucoup de modules qui sont en rouges, qui sont en working draft, ce qui veut dire que tous les navigateurs ne vont pas les intégrer à la même vitesse et de la même manière. Ce qu'on va faire là, on pourra être amené à le faire non pas pour IE mais pour d'autres. Je vous invite à vous rapprocher d'une librairie de type yepnope Yepnope, c'est quoi ? C'est « Yep je le fais, nope : je ne le fais pas.» C'est lui qui va tester, voir si le navigateur peut prendre en compte ou pas une technologie. Yepnope est utilisé par modernizr, qu'on verra dans une prochaine étape. Yepnope peut être utilisé tout seul. Même chose, je vais retourner sur mon CDNS, je vais choper une librairie yepnope ici et je vais venir l'utiliser. Cette fois-ci je l'utilise pour tout le monde. Qu'on soit sur navigateur, IE ou un navigateur moderne, on va l'utiliser de la même manière. Ce qu'on va faire là, on va rajouter un script pour l'instant. On va créer une variable 'vérification' qui va vérifier si le document comprend addeventlistener On sait très bien que dans les vieilles versions d'IE on n'avait pas un addeventlistener qui fonctionnait. Si ma vérification ne fonctionne pas, ça veut dire qu'à ce moment-là c'est une ancienne version, si elle fonctionne, c'est que c'est une version plus récente. On n'a plus qu'à tester ça dans les navigateurs. Si je vais dans un navigateur de ce type-là, si j'ouvre l'inspecteur de console, je passe sur la console, je recharge ma page, et il me dit que c'est une version plus récente. Il n'y a pas de souci, il comprend. Si je vais dans IE, le problème c'est que je n'ai pas de console. Comme je n 'ai pas de console, je vous propose de me rapprocher de Firebug, vous connaissez tous Firebug plus ou moins par Firefox ou la console de Chrome, mais ce qu'il y a d'intéressant avec Firebug c'est qu'il fait une version light et il suffit d'y intégrer un script. Je vous invite à vous rapprocher de Firebug light pour bien en prendre connaissance. Il suffit de rajouter un script à notre page. Bien entendu, on ne va le rajouter qu'au moment du développement, au moment où on en a besoin. Après, une fois qu'on a fini de développer, on retire ce script. Là, je lui dit : Je veux Firebug light dans ma page. Quand je vais passer maintenant dans IE, sI je recharge ma page et que je fais un petit F12 ici, on a Firebug qui apparaît et qui me dit « c'est une ancienne version.» C'est très bien, on peut arriver à détecter comme ça le navigateur. C'est bien beau mais je vous parlais de yepnope maintenant, on va rajouter un script qui pointe vers yepnope vers le CDN de yepnope qu'on a récupéré. On peut garder cette partie-là, pourquoi pas c'est intéressant. Ici, je vais faire un fonction yepnope Dans le cas où le test c'est 'vérification', si c'est bon 'Yep' tu pointes vers la feuille de style CSS. Attention, c'est not tu prends l'ancienne version CSS qui correspond à des définitions de couleurs plus anciennes. et nope : « à ce moment-là, tu comprends addeventlistener, tu pointes vers la version CSS2.» Si je fais un ctrl+ S, si je bascule dans mon navigateur contemporain, on s'aperçoit qu'on a la prise en compte des coins arrondis, je fais fermer cette partie-là, (ça me dit des choses que je n'ai pas envie de voir pour l'instant) ici, ça me prend bien en compte les coins arrondis, si je bascule dans IE ici, cette partie-là, - je vais fermer là aussi, j'actualise - on a bien ici le cadre qui est fait. Les coins arrondis ne sont pas faits, c'est une autre histoire, mais vous voyez que tout est pris en compte : les couleurs, etc... parce qu'on a bien deux feuilles de style distinctes qui sont prises en considération. Alors, pour pouvoir aller plus loin, on va pouvoir regarder. Je vous invite à vous rapprocher aussi, on y reviendra encore une fois, du site Can I use ____ ? qui va vous donner toutes les propriétés qui seront prises ou non en compte par les navigateurs. Si je fais un ctrl+ F' et que je cherche selector ici on avait vu tout à l'heure selector. Alors, ici on a 2.1, on va rester sur 2.1 pourquoi pas ! Vous voyez bien que tout est vert donc tout est pris en compte, quel que soit le navigateur, quelle que soit la version. Si je viens sur un truc plus avant-gardiste qui était en working draft tout à l'heure si je viens dans region vous voyez qu'il y a beaucoup de rouge beaucoup d'olive... Il y a très peu de navigateurs, il n'y a que Webkif qui le prend en compte pour les stats. Tout le reste n'est pas pris en compte ou alors de manière non complète. Donc regardez bien quelles sont les versions des navigateurs qui travaillent avec. N'hésitez surtout pas à visiter le site de yepnope pour pouvoir pallier à certaines problématiques liées aux versions d'un navigateur.

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 !