Dimensionner des éléments
On va maintenant commencer à voir comment modifier notre affichage HTML avec du CSS, et on va commencer par les dimensions. Il en existe deux seulement, qui sont le width pour la largeur et le height pour la hauteur.
Deux seulement? Facile cette partie là !Oui mais là où ça se complique, c'est quelle valeur leur attribuer...
C'est vrai que je n'ai pas réfléchi à ça...Les tailles fixes
Il y a une première catégorie de taille que l'ont dit "fixe", par exemple il y a le pixel, très utilisé qui se note px, et qui est défini par le nombre de points affichés à l'écran. Un point = un pixel. Si l'on veut modifier la taille d'un <textarea>, on peut faire :
Il fera donc 150 pixels de largeur par 150 pixels de hauteur.
J'aime bien les pixels ça a l'air facile.Effectivement c'est simple et efficace, il y a d'autres unités fixes, mais très peu utilisées. Le problème étant que l'élément ne s'adapte pas du tout à l'écran de l'utilisateur, si par exemple tu fait un textarea de 1500 pixels de large et 500 pixels de haut, sur ton ordinateur il sera très bien, mais sur un smartphone, il va largement dépasser de l'écran et ne sera pas du tout pratique à utiliser.
Ah oui je n'avais pas pensé à ça...Les tailles proportionnelles
C'est pour ça qu'il existe aussi des tailles proportionnelles, la plus utilisée étant le %, elle permet de définir une taille par rapport à la taille du parent.
Oulà ça m'a l'air compliqué ça...Pas vraiment, prenons l'exemple suivant de deux <div>
{"language":"text/html","content":"<div id=\"parent\">\n\t<div id=\"enfant\">\n\t\t\n\t</div>\n</div>","filename":""}
On peut par exemple définir que le parent fait 200px par 150px et que l'enfant lui fera 50% par 100% soit 100px par 150px. J'ajoute des bordures rouges sur le parent et bleues sur l'enfant pour qu'on les distingue bien, mais on verra les bordures plus tard.
Et voilà le résultat !
D'accord, mais la <div> parent est toujours en pixel, on ne peut pas la mettre en % elle aussi?Le problème est que la <div> parent n'a pas vraiment de parent elle-même, excepté le body du document, qui lui-même n'a pas de taille précise, donc les % ne fonctionnent pas très bien. Pour être plus précis d'ailleurs, le body a une largeur qui correspond à la taille de l'écran, mais pas de hauteur définie, car on peut scroller, Donc si on utilise les % pour définir une taille à un enfant direct du body, ça va fonctionner en largeur, mais pas en hauteur.
Il y a une autre unité dynamique qui se base sur le viewport.
Le quoi?Le viewport, ça représente la taille que ton écran est capable d'afficher, ou pour être plus précis, ce que la fenêtre de ton navigateur est capable d'afficher en hauteur comme en largeur, sans prendre en compte les scroll.
Ok, et on en fait quoi de ce viewport?On peut l'utiliser comme pour les %, avec les notations vh pour se baser sur la hauteur du viewport, et vw pour la largeur du viewport. Par exemple 50vh représente la moitié de la largeur de la fenêtre d'affichage.
Et tu vois que l'enfant s'adapte bien aussi !
Oui, c'est presque magique !Les tailles relatives
Il existe un autre type d'unité très utilisé, ce sont les tailles relatives à la taille de police d'écriture. Elles permettent de définir une taille d'élément en multipliant la taille de la police d'écriture appliquée dans l'élément parent. Par défaut la police d'écriture fait 16px sur les navigateurs, avec l'unité "em" on peut définir qu'un élément doit par exemple faire trois fois la taille de la police soit 48px :
Le <div> enfant fait donc maintenant 48px de large. Et ça peut être pratique, car si on change la taille de police l'élément s'adapte en taille.
Oui mais pourquoi on changerai la taille de police?Pas nécessairement nous, mais l'utilisateur peut paramétrer son navigateur pour avoir une police plus large par défaut, et dans ce cas, notre site s'adapte à la configuration de l'utilisateur, et pas juste à la taille de son écran. L'utilisateur peut aussi zoomer sur sa page, ce qui va indirectement augmenter la taille de la police et donc la taille du <div>
Ok, donc c'est celui là qu'il faut utiliser partout !Pas nécessairement, mais ça peut être pratique dans certains cas. Il y a aussi une deuxième unité relative, le rem, qui fonctionne de la même façon, mais au lieu de se baser sur la taille de la police de l'élément parent, il va se baser sur celle de l'élément racine, c'est à dire le <body>, peut importe où se trouve l'élément sur la page.
Ok, compris. J'ai terminé cette partie