ICTFF Section Informatique

Généralités

CSS permet de choisir parmi un large éventail.

Les unités de longueur sont divisées en deux groupes, les unités absolues et les unités relatives (mesurées par rapport à une valeur supérieure - elles peuvent donc être négatives) - voir les tableaux ci-dessous.

Il est conseillé de se cantonner aux unités % et rem pour un affichage fluide ou pour du texte, et à px quand on a besoin de placer les éléments au pixel près... Les autres valeurs doivent être le plus souvent évitées.

Unités absolues

px	pixel	Valeur en pixels. La définition d'un pixel étant "96 pixels/pouce", le pixel n'est pas forcément recommandé dans tous les cas (cf. les remarques précédentes).
cm	centimètre	Valeur en centimètres. Risque d'affichage différent sur plusieurs écrans. En effet, les réglages et résolutions sont tellement variés que ce qui semble correspondre à 1 cm sur un écran donné pourra être beaucoup plus grand ou plus petit sur un autre.
mm	millimètre	Valeur en millimètres. Même remarque que pour les centimètres.
in	pouce (2.54 cm)	Valeur en pouces (inches). Même remarque que pour les centimètres.
pt	point	Valeur en point. Le point est une mesure typographique utilisée par les imprimeurs (d'où les "points par pouce" de certaines résolutions) et les traitements de texte. Ici encore, les remarques des centimètres s'appliquent.
pc	pica (12 pt)	Valeur en picas. Un autre terme de typographie, et donc, du fait de son origine "papier", les remarques précédentes tiennent.

Unités relatives

%	Valeur en pourcentage. L'élément définit prendra un pourcentage donné de la taille de son élément parent.
vw (vieuwport width)	Il s'agit du centième de la largeur de la fenêtre dans laquelle s'ouvre la page.
vh (vieuwport height)	Il s'agit du centième de la hauteur de la fenêtre dans laquelle s'ouvre la page.
em	le em permet d'utiliser la taille de la police de caractères précisée dans l'élément parent. On peut utiliser le em pour les tailles des polices, les margin, padding, etc. Ex: 1.2 em est une taille de 1.2 fois la taille de la police précisée dans l'élément parent. Si aucune taille n'a été précisée dans les parents, on utilise la taille de l'élément root (par défaut qui est 16px).
rem (root em)	le rem permet d'utiliser la taille de la police de caractères précisée dans html (root element), cette taille est par défaut 16px. On peut utiliser le rem pour les tailles des polices, les margin, padding, etc.

Polices, padding et margin

On utilisera rem, cette unité de mesure relative est la plus adaptée.

Démo
<head>
<meta charset=utf-8>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
*	{
	margin:0;
	padding:0;
}
html{
	font-size:10px;
}
body	{
	margin:0.5rem;
}
h2	{
	font-size:2rem;
	margin-bottom:1rem;
}
.para{
	font-size:1.5rem;
	margin-bottom:1rem;
}
</style>
</head>
<body>
	<h2 >Proverbe</h2>
	<p class=para>
	"À la guerre il périt plus de poltrons que de braves" (proverbe français)
	</p>	
	<p class=para>
	"Qui n'aime pas la paix trouve assez de raisons pour faire la guerre." (proverbe français)
	</p>	
	<p class=para>
	"Quand buffles et bœufs s'affrontent, mouches et moustiques meurent." (proverbe viêt-minh)
	</p>	
</body>

On constate:

on met les margin et padding de toutes les balises à 0
dans l'élément html on change la valeur par défaut du font-size à 10px (16px par défaut)
on donne un margin relatif de 0.5 fois la taille de la police de caractères définie dans l'élément html (root element)
on donne un font-size et un margin relatif à la police de caractères définie dans l'élément html pour tous les h2 et les classes para
on peut visualiser l'effet dans l'inspecteur en augmentant ou en diminuant le font-size dans l'élément html

On utilise 10px car cette valeur permet de calculer/évaluer plus facilement les unités relatives rem qu'on utilise.

Les blocs

On utilisera soit les vw et vh soit les %.

Démo
<head>
<meta charset=utf-8>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
*	{
	margin:0;
	padding:0;
}
html{
	font-size:10px;
}
body	{
	height:100vh;
	background:#cccccc;
	margin:0.5rem;
}
main{
	width:50%;
	background:#FFFF00;
}

h2	{
	width:25%;
	background:#00FF00;
	font-size:2rem;
	margin-bottom:1rem;
}
.para{
	font-size:1.5rem;
	margin-bottom:1rem;
}
</style>
</head>
<body>
<main>
	<h2 >Proverbe</h2>
	<p class=para>
	"À la guerre il périt plus de poltrons que de braves" (proverbe français)
	</p>	
	<p class=para>
	"Qui n'aime pas la paix trouve assez de raisons pour faire la guerre." (proverbe français)
	</p>	
	<p class=para>
	"Quand buffles et bœufs s'affrontent, mouches et moustiques meurent." (proverbe viêt-minh)
	</p>
</main>
</body>

Outre les remarques de l'exemple précédent, on constate:

le body occupe 100% de la hauteur (100vh)
le main occupe 50% de la largeur du body (body est l'élément parent)
le h2 uccupe 25% de la largeur du main (main est l'élément parent du h2)

Les % sont des unités relatives à l'élément parent de l'élément qui est dimensionné.

Penser accessibilité

Les liseuses, les personnes agées, les personnes ayant des problèmes de vue ont souvent l'habitude d'augmenter la taille des caractères dans le browser en faisant: Paramètres --> Apparence --> Taille des polices (Moyenne par défaut).

Pour donner à l'utilisateur la possiblité de faire un choix de taille (plus grande ou moins grande) il faut impérativement déclarée la taille de la police en pourcents au niveau de l'élément html.

Démo
<head>
<meta charset=utf-8>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
*	{
	margin:0;
	padding:0;
}
html{
	font-size:62.5%; /* correspond à 10px/16px*/
}
body	{
	margin:0.5rem;
}
h2	{
	font-size:2rem;
	margin-bottom:1rem;
}
.para{
	font-size:1.5rem;
	margin-bottom:1rem;
}
</style>
</head>
<body>
	<h2 >Proverbe</h2>
	<p class=para>
	"À la guerre il périt plus de poltrons que de braves" (proverbe français)
	</p>	
	<p class=para>
	"Qui n'aime pas la paix trouve assez de raisons pour faire la guerre." (proverbe français)
	</p>	
	<p class=para>
	"Quand buffles et bœufs s'affrontent, mouches et moustiques meurent." (proverbe viêt-minh)
	</p>	
</body>

On constate:

quand on ouvre le fichier, si on fait dans le browser Paramètres --> Apparence --> Taille de police, on voit l'effet au niveau de l'affichage du document
dans l'exemple précédent, la taille est donnée en px, quand on ouvre le fichier, si on fait dans le browser Paramètres --> Apparence --> Taille de police, on ne voit aucun effet au niveau de l'affichage du document

Garantir une accessiblité au choix de diminuer ou d'augmenter la taille des caractères dans les paramètres du browser augmente aussi le référencement de vos pages car les moteurs de recherche sont très attentifs à l'accessibilité.

La règle des 62.5% est très utilisée sur le net et correspond à 10 divisé par 16 qui est la valeur par défaut.

Quiz

Unités 1

Les unités en CSS