Ce que vous ne savez pas sur le calcul des marges de pourcentage en CSS
La plupart des concepteurs Web pensent connaître assez bien le CSS. Après tout, il n’ya pas grand-chose à faire: quelques types de sélecteurs, quelques dizaines de propriétés et certaines règles en cascade dont vous avez à peine besoin pour vous rappeler, car elles relèvent du sens commun. Mais lorsque vous atteignez le niveau critique, il existe de nombreux détails obscurs que peu de concepteurs comprennent vraiment..
Lorsque j’ai examiné les résultats d’un test CSS gratuit que j’avais offert en ligne au cours des six derniers mois, j’ai découvert une question qui presque personne a raison. Parmi les milliers de personnes qui ont passé le test, moins de 14% l'ont bien compris.
La question se résume à ceci: Comment calculer les marges de pourcentage?
La question
Dites que votre site a un conteneur div, et à l'intérieur, un contenu div:
Maintenant, donnons ce contenu div une marge supérieure:
.contenu marge supérieure: 10%;
D'accord, alors c'est 10%… mais 10% des quoi? C'est la question qui seulement 13,8% des personnes peuvent répondre correctement. Et gardez à l’esprit: ces personnes ont accès à Google!
Ce que j'aime de cette question c'est que il semble que la réponse devrait être évidente. À tel point que je soupçonne la plupart des gens de deviner (et de deviner mal). Mais peut-être ne pas semble évident pour vous. Je veux dire, si vous utilisez vraiment votre imagination, le navigateur peut calculer une marge de plusieurs manières comme ceci.
Alors, que diriez-vous si je le précise pour vous puisque la question du test est en fait à choix multiple. Voici vos options:
- 10% de la hauteur du contenu
- 10% de la hauteur du conteneur
- 10% de la largeur du contenu
- 10% de la largeur du conteneur
N'oubliez pas que seulement 13,8% des personnes peuvent choisir la bonne réponse dans cette liste. C'est bien pire que le hasard!
Regardez attentivement les réponses. vous verrez qu'il n'y a en réalité que deux choses à savoir:
Conteneur ou contenu?
Tout d'abord, est la taille de la marge en fonction de la taille du contenu div lui-même ou de la taille du conteneur div?
Maintenant, ce n'est pas une gomme, mais vous pouvez probablement faire confiance à votre instinct. Si je mets une div à 50% de la largeur de son conteneur et que je souhaite ensuite que ses marges gauche et droite occupent le reste de l’espace, je les fixerais naturellement à 25% chacune 100%). Pour que cela fonctionne, les marges de pourcentage doivent être basées sur les dimensions du conteneur.
Effectivement, les deux tiers des personnes qui passent le test ont cette partie de la réponse.
Largeur ou hauteur?
Seconde, la taille de margin-top est-elle basée sur la largeur ou la hauteur de cet élément?
Si vous avez prêté attention, vous êtes probablement déjà sur vos gardes. Pour si peu de personnes à choisir la bonne réponse, il faut que ce soit une question piège, à droite?
Et pourtant, je parie que vous pouvez à peine croire que la réponse n'est pas la taille. Eh bien, ce n'est pas.
Oui, nous parlons d'une marge supérieure ici. Oui, la taille de cette marge est une mesure verticale. Oui, si un bloc correspond à 50% de la hauteur de son conteneur et que vous lui avez attribué une marge supérieure de 25%, vous vous attendriez à ce qu'il représente 25% de la hauteur du conteneur.. Et tu te tromperais.
Ne vous sentez pas mal si vous pensiez que ce devait être la hauteur. Près de 80% des personnes qui passent le test sont d'accord avec vous:
Ça fait sens… Non, vraiment!
Tu n'y crois toujours pas? Voici une citation de la spécification CSS du W3C:
Le pourcentage est calculé par rapport à la largeur du bloc contenant de la boîte générée.. Notez que cela est vrai pour les marges supérieure et inférieure..
La même chose vaut pour le rembourrage en haut et en bas, au cas où vous vous le demanderiez. En ce qui concerne les frontières, il est illégal de spécifier leur largeur en pourcentage.
Donc, à ce stade, vous pensez probablement que les créateurs de CSS sont soit bonkers, ou ils ont juste fait une erreur vraiment stupide. Mais je suis ici pour vous dire qu'il y a deux bonnes raisons de baser les marges verticales sur la largeur du bloc conteneur:
Cohérence horizontale et verticale
Il existe bien sûr une propriété abrégée qui vous permet de spécifier la marge pour les quatre côtés d’un bloc:
marge: 10%;
Cela s'étend à:
marge supérieure: 10%; marge droite: 10%; marge inférieure: 10%; marge gauche: 10%;
Maintenant, si vous écriviez l'une des réponses ci-dessus, vous vous attendriez probablement à ce que les marges des quatre côtés du bloc soient de taille égale, n'est-ce pas? Mais si marge-gauche et marge-droite étaient basées sur la largeur du conteneur et que marge-haut et marge-bas étaient basées sur sa hauteur, ils seraient généralement différents!
Éviter la dépendance circulaire
CSS place le contenu dans des blocs empilés verticalement sur la page, de sorte que la largeur d'un bloc est généralement entièrement dictée par la largeur de son parent. En d'autres termes, vous pouvez calculer la largeur d'un bloc sans se soucier de ce qui est à l'intérieur ce bloc.
La hauteur d'un bloc est une autre affaire. Généralement, la hauteur dépend de la hauteur combinée de son contenu. Modifiez la hauteur du contenu et vous modifiez la hauteur du bloc. Voir le problème?
Pour obtenir la hauteur du contenu, vous devez connaître les marges supérieure et inférieure qui lui sont appliquées. Et si ces marges dépendent de la hauteur du bloc parent, vous avez des problèmes, car vous ne pouvez pas calculer l’un sans connaître l’autre.!
Baser les marges verticales sur le largeur du conteneur rompt cette dépendance circulaire et permet de tracer la page.
As la classe
Voilà donc la question la plus difficile du test et vous pouvez maintenant y répondre. Vous voulez savoir comment vous vous en sortez pour le reste du test? Essayez vous-même. Je promets, la plupart des questions sont beaucoup plus faciles que celle-ci.
En attendant, je suis à la recherche d'une nouvelle question difficile! Quel détail de CSS pensez-vous que personne ne connaît?
Note de l'éditeur: Ceci est écrit pour Hongkiat.com par Kevin Yank. Kevin écrit sur le Web depuis 1999, avec des livres sur PHP, CSS et JavaScript à son nom. Il a également animé des podcasts, pris la parole lors de conférences et produit une formation vidéo sur le Web. Il dirige maintenant l'équipe de développement de Sit the Test, une application Web permettant de créer et de prendre des tests en ligne..
Plus sur Hongkiat:
- Conception Web: hauteur de colonne égale avec CSS
- 6 astuces CSS pour aligner le contenu verticalement
- Regard sur les unités CSS: pixels, EM et pourcentage
- Un coup d'œil sur: CSS3 Box-sizing
À lire: 10 propriétés CSS3 cachées à connaître
