Nous mettrons à jour notre Politique de confidentialité prochainement. En voici un aperçu.

L'essentiel des CSS

Travailler sur des blocs

Testez gratuitement nos 1341 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Passez aux éléments de type bloc. D'une part, il s'agit d'un type plus simple et d'autre part, cette simplicité masque une complexité. Étudiez alors le mode quirk et le mode standard des navigateurs.
03:46

Transcription

En ce qui concerne le modèle de boîte des éléments de type bloc, c'est quelque part plus facile, car ils acceptent tout, et plus compliqué, parce que le modèle de boîte n'a pas toujours été respecté par les navigateurs de la même manière. Notamment, Internet Explorer, à une époque, avait un problème de modèle de boîte et c'est pour ça que le W3C avez trouvé, si vous lisez dans certaines littératures, le mot de quirk et le mode standard. En mode quirk, c'était en mode j'essaye de faire comme c'était avant, et dans le mode standard, le modèle de boîte est défini par le W3C et on s'y colle. Pour montrer ça, on a préparé un espace de travail avec un reset qui met au pixel près une grille 10px qui va utiliser une ligne forte rouge tous les 100 pixels et une ligne pointillée tous les 50 pixels intermédiaire. Parfait. On a font-size de 50 pixels, un line-height de 50 pixels qui répartit bien tous nos éléments dans des lignes de 50, on peut le vérifier. Là on va commencer maintenant à se dire qu'on va leur rajouter une marge de 50 pixels à tout ce petit monde, on va leur ajouter un padding de 50 pixels et un border de 50 pixels. On enregistre, on visualise et youps, on se retrouve avec une marge de 50 pixels tout autour, pour tout le monde, avec une bordure et un padding, tout ça fonctionne, quels que soient les éléments ça fonctionne. Là où ça va commencer à se corser, c'est si je lui demande une largeur et que je dis ici que j'aimerais avoir une largeur de 200 pixels. Alors si j'actualise, ça passe à 200 pixels, et tout le monde a 200 pixels. « Ben alors, pas de problème. » Eh ben si, il y a un problème pour moi. J'ai demandé une largeur de 200 pixels sauf que ici, je me retrouve avec 400 pixels. Pourquoi ? J'en ai demandé 200 et j'en ai 200 de plus. Ben oui en fait j'ai 50 pixels, de bordure en plus de chaque côté et 50 pixels de padding en plus de chaque côté. Dieu merci, il ne compte pas la marge, mais du coup, la largeur de 5 pixels, elle est où ? Elle est même pas à l'intérieur, puisqu'il y a 300 pixels. Donc c'est où la largeur ? La largeur, c'est juste cet élément-là. C'est-à-dire cet élément-là et auquel je vais rajouter 50 pixels de padding et 50 pixels de border. Vous comprenez d'où venait la problématique du modèle de boîte ? Internet Explorer ne le voyait pas de la même manière, il se disait que si tu veux 200 pixels, ça doit faire 200 pixels de là à là, et pas de là à là. Donc, qui a raison et qui a tort ? C'était un peu la guerre des navigateurs à cette époque et la guerre du modèle de boîte. Donc aujourd'hui, on a une nouvelle propriété qui s'appelle le box-sizing qui n'est toujours pas recommandée encore, elle est candidate en recommandation. Donc elle est prête à être validée, mais il y a encore des soucis selon les navigateurs, je vous invite à les découvrir, certains navigateurs ne l'utilisent pas. Alors qu'en est-il ? Bien si je demande le box-sizing: content-box, si je demande le padding-box, pour le box-sizing au niveau du padding et le border-box pour ma bordure, rappelez-vous ce sont les mêmes propriétés que les clips ou les origines pour les histoires de background, c'est génial, il y a une vraie cohérence. Mais maintenant, si j'actualise, ce qu'il se passe c'est que j'ai pas la même largeur, et là on devient cohérent. C'est-à-dire que je veux 200 pixels de large ici, mais je lui dis attention ces 200 pixels, je les veux au niveau du content-box. Mes 200 pixels sont là. Forcément, je vais rajouter le padding autour et je vais rajouter le border. Si je lui dis que je veux les 200 pixels au niveau du padding ben les 200 pixels, c'est tout ça. Donc je vais simplement rajouter la bordure de chaque côté. Si je lui dis « Attends, on s'est pas bien compris c'est la border-box que je veux », donc c'est 200 pixels de là à là, tout compris, padding, border, etc, et on s'en fout si ça doit écraser ce qu'il y a à l'intérieur, on l'écrase. Voilà, là on rentre dans un modèle de boîte qui se veut cohérent et qui nous permet, avec la propriété box-sizing, de pouvoir définir qui va gérer la largeur de nos éléments.

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)
Excellent comme toujours
Nicolas C.
Une formation complète qui permet une mise à jour au niveau des connaissances du CSS.

On n'est jamais surpris de trouver un contenu de qualité dans vos formations M. Birnou Sébarte !

 
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 !