CSS - Unités de Mesure

Salut à toi, futur·e web designer ! Aujourd'hui, nous allons entreprendre un voyage passionnant à travers le monde des unités de mesure CSS. En tant que ton prof de informatique bienveillant du coin, je suis là pour te guider à travers cet aspect essentiel du design web. Alors, prends ton ruledu virtuel, et mesurons ensemble quelques CSS !

Unités de Longueur

En CSS, nous avons diverses manières de mesurer et de définir les tailles. C'est comme avoir une boîte à outils pleine de différents rulers, chacun parfait pour des tâches spécifiques. Commençons par les bases :

Unités de Longueur Absolue

Ce sont les plus simples, comme les pouces sur ton ruler :

Unité	Description
px	Pixels
in	Pouces
cm	Centimètres
mm	Millimètres
pt	Points
pc	Picas

Voici un exemple simple :

.box {
width: 100px;
height: 2in;
margin: 10mm;
}

Dans ce code, nous créons une boîte qui fait 100 pixels de large, 2 pouces de hauteur, avec une marge de 10 millimètres tout autour. C'est comme construire une petite boîte en carton précise !

Unités de Mesure CSS - Unité 'em'

Maintenant, parlons de l'unité 'em'. C'est une unité relative, basée sur la taille de la police de l'élément. Pense à elle comme un caméléon qui change de taille en fonction de son environnement.

.parent {
font-size: 16px;
}

.child {
font-size: 1.5em; /* Cela sera 24px */
padding: 2em;     /* Cela sera 48px */
}

Dans cet exemple, la taille de la police de l'enfant est 1.5 fois celle de son parent, et son padding est deux fois sa propre taille de police. C'est comme une poupée russe de tailles !

Unités de Mesure CSS - Unité 'ch'

L'unité 'ch' est basée sur la largeur du caractère '0' (zéro). Elle est particulièrement utile pour créer des mises en page en colonnes dans les polices monospace.

.code-block {
width: 80ch;
font-family: monospace;
}

Cela crée un bloc de code qui fait 80 caractères de large, parfait pour ceux qui sont nostalgiques des jours des terminaux à 80 colonnes !

Unités de Mesure CSS - Unité 'rem'

'rem' signifie "root em". C'est similaire à 'em', mais il est toujours relatif à l'élément racine (généralement

), pas au parent.

html {
font-size: 16px;
}

.box {
font-size: 1.5rem; /* Toujours 24px, indépendamment du parent */
padding: 2rem;     /* Toujours 32px */
}

C'est génial pour maintenir une taille cohérente tout au long de ton document, comme avoir un plan maître pour tout ton site web.

Unités de Mesure CSS - Unités 'lh' et 'rlh'

'lh' signifie "hauteur de ligne" de l'élément, tandis que 'rlh' est la "hauteur de ligne racine". Ce sont des unités plus récentes, parfaites pour le rythme vertical dans la typographie.

.paragraph {
line-height: 1.5;
margin-bottom: 1lh;
}

Cela ajuste la marge en dessous du paragraphe à exactement une hauteur de ligne, créant un rythme vertical harmonieux. C'est comme diriger un orchestre de texte !

Unités de Mesure CSS - Unités 'vh' et 'vw'

'vh' et 'vw' signifient respectivement "hauteur de la fenêtre" et "largeur de la fenêtre". Ce sont des unités en pourcentage basées sur la taille de la fenêtre.

.hero {
height: 100vh;
width: 100vw;
}

Cela crée une section hero qui remplit toujours tout l'écran, indépendamment de la taille du device. C'est comme avoir un panneau publicitaire réactif qui s'ajuste toujours parfaitement !

Unités de Mesure CSS - Unités 'vmin' (minimum de la fenêtre) et 'vmax' (maximum de la fenêtre)

Ces unités sont basées sur la dimension plus petite ou plus grande de la fenêtre, selon ce qui est approprié.

.square {
width: 50vmin;
height: 50vmin;
}

Cela crée un carré parfait qui est toujours la moitié de la taille de la dimension plus petite de la fenêtre. C'est comme avoir un carré changeant de forme qui est toujours proportionnel !

Unités de Mesure CSS - Unité 'vb'

'vb' signifie "taille de bloc de la fenêtre". Il est similaire à 'vh', mais il respecte le mode d'écriture du document.

.sidebar {
width: 20vb;
}

Cela crée une barre latérale qui est toujours 20% de la dimension de bloc de la fenêtre, ce qui est génial pour les sites multilingues avec des directions d'écriture différentes.

Unités de Mesure CSS - Unité 'vi'

'vi' est la "taille en ligne de la fenêtre". C'est comme 'vw', mais encore une fois, il respecte le mode d'écriture.

.header {
height: 10vi;
}

Cela crée une en-tête qui est toujours 10% de la dimension en ligne de la fenêtre, s'adaptant harmonieusement aux différents modes d'écriture.

Exemple - Pourcentages

Les pourcentages en CSS sont toujours relatifs à quelque chose. Voyons-les en action :

.container {
width: 80%;
margin: 0 auto;
}

.child {
width: 50%;
padding: 5%;
}

Ici, le conteneur est 80% de la largeur de son parent, centré avec des marges auto. L'enfant est la moitié de la largeur du conteneur, avec un padding de 5% de la largeur du conteneur. C'est comme des poupées russes, mais avec des boîtes invisibles !

Exemple - Nombres

Parfois, les propriétés CSS n'ont pas besoin d'unités du tout. Voici quelques exemples :

.box {
opacity: 0.5;
line-height: 1.5;
z-index: 100;
}

Ici, l'opacité est une valeur entre 0 et 1, la hauteur de ligne est un multiple de la taille de la police, et l'index z est juste un nombre pour l'ordre d'empilage. C'est comme avoir un potentiomètre, un espaceur de texte et un trieur de calques, le tout en un !

Et voilà, les amis ! Nous avons fait le voyage à travers le pays des unités de mesure CSS, des pixels familiers aux unités de fenêtre exotiques. Souviens-toi, choisir la bonne unité, c'est comme choisir le bon outil pour le travail - cela peut rendre ta vie plus facile et tes designs plus robustes. Alors, va et mesure avec responsabilité !

Credits: Image by storyset