L'essentiel des CSS

Explorer les styles par défaut

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Avant de débuter le codage CSS de vos pages, il est important de prendre en compte le rendu par défaut de vos navigateurs. Voyez que des développeurs ont donné leur contribution et vous proposent leurs visions de la réinitialisation des CSS par défaut.
06:10

Transcription

Avant d'ajouter quelque style que ce soit, si on regarde déjà une simple page HTML, qui contient un article avec un titre et des paragraphes, une section à l'intérieur de l'article avec un titre, toujours h1, et un aside avec un autre titre h1 à l'intérieur. Alors, contrairement à beaucoup d'idées reçues, on peut depuis HTML 5 mettre autant de h1 que l'on veut à l'intérieur d'une page, c'est même, recommandé, dans la mesure où il y a une justification par rapport à sa localisation. Mettre deux h1 dans un article ne présenterait aucun intérêt. Mais un article h1, à ce niveau-là, et une section, h1 à ce niveau-là, c'est tout à fait permis et recommandé. Qu'est-ce qu'il en est, si on regarde ça dans un navigateur ? Ici, je suis dans un navigateur contemporain, on va dire, je suis dans Chromium. Et on voit dans Chromium qu'il y a un certain rendu. Si je viens dans Firefox, aussi, il y a un rendu. Vous avez remarqué qu'entre Titre de contenu, ici, qui est un h1, et ce titre de section qui est aussi un h1, il y a quand même une distinction, parce que le navigateur a compris quand même que ce h1 était un niveau imbriqué de cet article, et pouvait être considéré comme un h2, bien qu'il soit un h1. D'accord ? Donc, premier niveau dans sa section, il reste quand même un deuxième niveau, au niveau plan global de la page. Alors si on regarde maintenant dans un Internet Explorer version 8, alors il n'y a pas de distinction, ce sont des h1, à l'époque, on ne pouvait mettre qu'un h1 par page, donc pour lui, c'est que du h1 qui se voit à ce niveau-là. Si on regarde quand même de plus près, je vais ouvrir Firefox ici et je vais faire un peu de place, au niveau de Firefox. Regardez ici, on voit bien quand même que le contenu de la page n'est pas tout à fait identique. Si je prends cette partie-là, que je la réduis même en partie, même si je baisse un petit peu, vous voyez que déjà, je n'ai pas tout à fait la même page à ce niveau-là, et si je passe dans Chrome, par rapport à Firefox, pareil, on voit que même si je réduis la hauteur de Firefox, je serais à ce niveau-là, on voit qu'ici, je n'arrive pas du tout en face. Donc quand vous faites des interfaces au pixel près, on va se retrouver avec des styles par défaut du navigateur, qui ne correspondent pas, et donc les marges, les espaces, tous ces trucs-là vont causer souci dans la disposition, dans la précision que l'on pourra apporter à nos pages et à nos contenus. Alors je vous propose de faire un tour du côté du W3C, encore une fois, où on voit que, à l'époque 2014, à peu près, de la création de HTML 5, on avait un module qui s'appelait rendering, qui permet de pouvoir définir quelles sont les marges, quels sont les espaces, quelles sont les configurations par défaut, qu'il serait recommandé de porter dans tous les navigateurs ? Il y avait une page un peu plus précise à l'époque de HTML 4, c'est à dire que le W3C allait même jusqu'à donner une feuille de style avec des valeurs de base, par défaut, pour que les navigateurs l'adoptent. Alors les navigateurs se sont tous entendus pour avoir une typo par défaut de 16 pixels, c'est pour ça que toutes les données, ici, sont en em, on verra ces unités un peu plus tard. Mais, quand bien même, tous les navigateurs n'ont pas forcément respecté cette clause. Si je viens du côté de Webkit, Webkit va donner ce qu'il appelle sa feuille de style par défaut, de base, en disant voilà en gros, les valeurs qu'on va adopter, que l'on va requérir, pour chacune des balises HTML. Si on prend Internet Explorer, alors là, en fonction des versions d'Internet Explorer, on va avoir une divergence d'opinions, surtout pour le modèle de boîte, mais on va avoir toutes les balises qui vont avoir, pas forcément, les mêmes paramètres, en fonction de la version. Si on regarde du côté de Firefox, Firefox, c'est un poil moins communiquant, on va dire que l'équipe de Mozilla ne donne pas forcément cette information parce que, quelque part, c'est pas quelque chose qui va être nécessiteux, c'est bon de le savoir mais voilà, si je viens ici dans ressource://gre-ressources, ici, on va avoir toutes les feuilles de style utilisées par défaut, par le navigateur. Si je viens dans ua.css, ici, j'ai tous les composants qu'ils vont retrouver, propres à Mozilla, ici, si je viens dans html.css, j'ai tous les éléments html classiques, et on voit un peu comment Mozilla va les utiliser, quelles vont êtres les marges qu'il va utiliser, les paddings, etc. Donc ça peut avoir d'intérêt de connaître ce genre d'information. Mais, quand bien même, Eric Meyer, il y a fort longtemps, ça a commencé presque au début des CSS, a dit : « Il faudrait faire un outil CSS qui serait en reset CSS, qui permettrait de réinitialiser les feuilles de style CSS. » Et là-dessus, donc, lui, a proposé de redéfinir quelque chose qui soit travaillable. Mais Eric Meyer est allé plus loin, il a dit : « Attention, comme à travailler, ça peut être intéressant, d'avoir des cadres rouges pour pouvoir isoler tel type d'élément ou repérer tels éléments. » Donc ça peut être intéressant d'avoir une véritable boîte à outils dans cet outil de réinitialisation. Alors là-dessus, beaucoup de développeurs y sont allés de leur pogne, et on a retrouvé, donc, dans CSS Reset ici, les plus fameuses CSS Reset, donc il y a celle d'Eric Meyer, bien sûr, il y a HTML 5 Doctor, Yahoo, Universal Selector, Normalize, Free eBook. Alors là, pour pouvoir obtenir le code, vous avez simplement une souscription à la Newsletter à fournir, pour pouvoir vous abonner, d'une part à la Newsletter de CSS Reset, mais en même temps accéder au code qui vous intéresserait. Si je regarde maintenant du côté du code, en fait, je vais prendre une deuxième page dans laquelle j'ai fait un link vers une feuille de style de Reset CSS. On va ouvrir cette Reset, c'est celle proposée par Eric Meyer donc, et ici, vous voyez qu'il y a les ajouts qui ont été faits ici pour article, aside, details, etc. Toutes les balises qui sont apparues en HTML 5, sont en display block ici, donc tout est redéfini. Et là, on est vraiment dans le style de base, minimum, pour pouvoir réinitialiser toutes les marges à 0, les paddings, pas de bordure, les font size à 100 %, etc. Ce qui fait que maintenant, quand je vais visualiser ma page dans un navigateur, si au lieu de prendre la page n°1 ici, je prends la page n°2, donc celle qui va être utilisée avec un Reset, vous voyez, plus rien n'est distingué. On ne voit plus ni les titres, ni les espaces, aucun marge est respectée. Et donc là-dessus, si je vais dans un vieux navigateur, ce sera exactement pareil, on voit bien qu'on a exactement le même contenu. Et là, puisqu'on a une page qui est standard, qui est basique, on va pouvoir venir tout coder, en CSS, pour prendre complètement en main l'aperçu visuel de nos rendus.

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 !