Définir la taille des éléments en CSS

Cette traduction est incomplète. Aidez-nous à traduire cet article depuis l’anglais

Dans les différentes leçons vues jusqu'à présent vous avez rencontré de nombreuses manières de dimensionner les éléments sur une page en utlisant CSS. Comprendre le dimensionnement des différentes caractéristiques de votre design est important. Cette leçon résumera les diverses méthodes pour appliquer une taille via CSS et définira également quelques termes au sujet du dimensionnement qui vous aiderons dans le futur.
Prérequis:

Maîtrise élémentaire de l'informatique, suite logicielle de base installée, compétences élémentaires pour travailler avec des fichiers, connaissance de base du HTML  (cf. Introduction à HTML), et une idée de Comment fonctionne CSS.

Objectif: Découvrir comment spécifier la taille des éléments en CSS.

La taille naturelle ou intrinsèque des choses

Tous les éléments HTML ont une taille "naturelle", définie avant toute modification par CSS. Un exemple parlant est celui d'un élément image. Une image a une largeur et une hauteur définies dans le fichier image qu'elle incorpore dans la page. On parle d'une taille intrinsèque — qui provient de l'image elle même.

Si vous placer une image dans une page sans modifier sa hauteur ni sa largeur (que ce soit à en utilisant un attribut sur la balise <img> ou avec CSS), cela l'affichera en utilisant sa taille intrasèque. Ci-dessous nous avons l'exemple d'une image à laquelle nous avons ajouté une bordure afin de bien délimiter sa taille.

Un élément <div> vide en revanche, n'a pas de taille en soi. Si vous ajouter une <div> à votre HTML sans aucun contenu à l'intérieur,et que vous lui ajouter une bordure comme nous l'avons fait avec l'image ci-dessus, vous verrez une ligne s'afficher sur la page. Cette ligne résulte de la juxtaposition des bordures horizontales, car il n'y a aucun contenu entre les deux. De plus les bordures s'étendent sur toute la largeur disponible du conteneur, car il s'agit d'un élément de bloc. Un comportement avec lequel vous devriez déjà être familiarisé. Cet élément n'a pas de hauteur (ou plutôt pas de taille dans l'axe de bloc) car il n'y a pas de contenu à l'interieur de celui ci.

Dans l'exemple ci-dessus; essayez d'ajouter du texte a l'interieur de l'élément vide. Les bordures contiennent maintenant ce texte car la hauteur de l'élément est définie par son contenu. De plus, la taille de cette <div> dans l'axe de bloc provient maintenant de la taille du contenu. Là aussi il s'agit de la taille intrasèque de l'élément — sa taille est définie par son contenu.

Spécifier une taille

Nous pouvons bien entendu donner une taille spécifique aux éléments. Quand une taille est ainsi donnée à un élément (et que son contenu est adapté à cette taille), nous parlons de taille extrinsèque. Reprenons notre <div> de l'exemple précédent — nous pouvons lui donner une  width spécifique et une height spécifique, l'élément à désormais une taille définie peu importe ce qui est placé à l'interieur de celui ci. Comme nous l'avons appris dans notre précédente leçon sur le concept d'overflow, une hauteur définie peut générer un débordement du contenu si celui ci est plus important que l'espace alloué par son conteneur.

Du fait de ce comportement parfois inattendu, fixer la hauteur d'un élément avec une longueur ou en pourcentage est une pratique à utiliser avec parcimonie sur le web.

Avec les pourcentages

De bien des manières, les pourcentages agissent de la même manière que les unités de longueur, et comme nous l'avons vu dans la leçon sur les valeurs et unités en CSS, ils peuvent souvent être utilisés de manière interchangeable avec les unités de longueur. Lorsque vous utilisez les pourcentages vous devez seulement être conscient de la valeur auquelle se réfère le pourcentage. Si vous donnez à un bloc enfant une largeur définie en pourcentage, celui ci correspond à un pourcentage de la largeur du conteneur parent.

En effet, les pourcentages sont determinés en fonction de la taille de l'élément parent. Si aucun pourcentage n'est spécifié, notre <div> prendra 100% de l'espace disponible (car il s'agit du comportement par défaut d'un élément de type bloc). En revanche si nous lui donnons une largeur en pourcentage, ce pourcentage fera référence à l'espace que la <div> aurait normalement occupé dans l'élément parent.

Marges et remplissage en pourcentages

Si vous définissez les margins (marges exterieurs) et les paddings (marges intérieurs) avec des pourcentages, vous noterez un comportement inattendu. Dans l'exemple ci-dessous nous avons une boite. Nous avons défini la propriété margin à 10% et la propriété padding à 10% également. Les marges intérieurs et exterieurs sur le haut et le bas de la boite ont la même taille que les marges extérieurs sur la gauche et la droite.

You might expect for example the percentage top and bottom margins to be a percentage of the element's height, and the percentage left and right margins to be a percentage of the element's width. However, this is not the case!

When you use margin and padding set in percentages, the value is calculated from the inline size — therefore the width when working in a horizontal language. In our example, all of the margins and padding are 10% of the width. This means you can have equal sized margins and padding all round the box. This is a fact worth remembering if you do use percentages in this way.

tailles min- et max- 

In addition to giving things a fixed size, we can ask CSS to give an element a minimum or a maximum size. If you have a box that might contain a variable amount of content, and you always want it to be at least a certain height, you could set the min-height property on it. The box will always be at least this height, but will then grow taller if there is more content than the box has space for at its minimum height.

In the example below you can see two boxes, both with a defined height of 150 pixels. The box on the left is 150 pixels tall; the box on the right has content that needs more room, and so it has grown taller than 150 pixels.

This is very useful for dealing with variable amounts of content while avoiding overflow.

A common use of max-width is to cause images to scale down if there is not enough space to display them at their intrinsic width, while making sure they don't become larger than that width.

As an example, if you were to set width: 100% on an image, and its intrinsic width was smaller than its container, the image would be forced to stretch and become larger, causing it to look pixellated. If its intrinsic width were larger than its container, it would overflow it. Neither case is likely to be what you want to happen.

If you instead use max-width: 100%, the image is able to become smaller than its intrinsic size, but will stop at 100% of its size.

In the example below we have used the same image twice. The first image has been given width: 100% and is in a container which is larger than it, therefore it stretches to the container width. The second image has max-width: 100% set on it and therefore does not stretch to fill the container. The third box contains the same image again, also with max-width: 100% set; in this case you can see how it has scaled down to fit into the box.

This technique is used to make images responsive, so that when viewed on a smaller device they scale down appropriately. You should however not use this technique to load in really large images and then scale them down in the browser. Images should be appropriately sized to be no larger than they need to be for the largest size they are displayed in the design. Downloading overly large images will cause your site to become slow, and it can cost users more money if they are on a metered connection.

Note : Find out more about responsive image techniques.

Unités de la fenêtre d'affichage

La fenêtre — la surface de la page montrée par le navigateur lorsqu'on navigue sur un site — a aussi des dimensions. Certaines unités CSS sont dédiées à la description des dimensions de la fenêtre —  vw pour viewport width (largeur de la fenêtre), et vh pour viewport height (hauteur de la fenêtre). Grâce à ces unités vous pouvez dimensionner un objet en fonction de la fenêtre de l'utilisateur.

1vh correspond à 1% dela hauteur de la fenêtre, 1vw à 1% sa largeur. Avec ces unités, on peut dimensionner des boîtes aussi bien que du texte. Dans l'exemple ci-dessous, la boîte a pour dimensions 20vh et 20vw. Elle contient la lettre A, de font-size 10vh.

If you change the vh and vw values this will change the size of the box or font; changing the viewport size will also change their sizes because they are sized relative to the viewport. To see the example change when you change the viewport size you will need to load the example in a new browser window that you can resize (as the embedded <iframe> that contains the example shown above is its viewport). Open the example, resize the browser window, and observe what happens to the size of the box and text.

Dimensionner les objets en fonction de la fenêtre peut s'avérer utile. Par exemple, pour afficher la section principale en pleine page, il suffit de lui attribuer 100vh, cela poussera le reste du contenu sous la fenêtre ; le reste du contenu n'apparaîtra qu'en la faisant défiler.

Résumé

Cette leçon a voulu vous sensibiliser aux difficultés principales qu'on rencontre dès qu'on veut donner une dimension aux objets sur le Web. When you move onto CSS Layout, sizing will become very important in mastering the different layout methods, so it is worth understanding the concepts here before moving on.

Dans ce cours

  1. Cascade and inheritance
  2. CSS selectors
  3. The box model
  4. Backgrounds and borders
  5. Handling different text directions
  6. Overflowing content
  7. Values and units
  8. Sizing items in CSS
  9. Images, media, and form elements
  10. Styling tables
  11. Debugging CSS
  12. Organizing your CSS