Les unités de longueurs CSS dites absolues
Dans les unités Css absolues nous trouvons :
| Unité | Descriptif |
|---|---|
| cm | le centimètre. |
| mm | le millimètre. |
| in | le pouce (inch) 1in est égal à 2.54cm. |
| pt | le point. 1pt est égal à 1/72 de pouce. |
| pc | le picas. 1pc est égal à 12pt. |
La relation entre ces unités Css est : 1in = 2.54cm = 25.4mm = 72pt = 12pc
Toutes les propriétés Css acceptant une longueur ou taille acceptent n'importe quelle de ces unités Css.
En règle générale, le cm, mm, in, pt ou le pc sont utilisés pour l'impression.
Le convertisseur d'unités de longueurs Css, va vous permettre de trouver les équivalences entre PX, (R)EM, % et PT.
Les unités de longueurs CSS dites relatives
Le convertisseur d'unités de longueurs Css, va vous permettre de trouver les équivalences entre PX, EM, % et PT.
Les unités Css de longueurs sont dites relatives, car elles se réfèrent toujours à un autre élément.
Dans les unités Css relatives nous trouvons :
| Unité CSS | Relative à | Unité CSS | Relative à |
|---|---|---|---|
| % | Taille de la police ou de l'élément parent | ex | Valeur de la propriété "x-height" |
| em | Taille de la police | rem | Taille de la police |
| vw | Bloc conteneur initial | vh | Bloc conteneur initial |
| vmin | Bloc conteneur initial | vmax | Bloc conteneur initial |
| ch | Largeur du caractère |
Unité Css %
L'unité de longueur CSS % (pourcentage) est relative à la taille de la police héritée pour la propriété CSS font-size.
L'unité % CSS est relative à la taille de la police pour la propriété CSS line-height.
L'unité CSS % est relative à la longueur ou la hauteur de l'élément parent pour les propriétés width ou height , idem pour les marges CSS intérieures et marges CSS extérieures. Attention, le changement de la valeur de la propriété css position, change l'élément parent référent.
Exemple : si font-size: 120% alors la taille de la police est 20% plus grande que la taille de la police héritée.
Voici le mode de calcul pour trouver la valeur en pourcentage en partant de valeur en px :
taille désirée en pixels / taille relative en pixels * 100
L'unité CSS % est reconnue par l'ensemble des navigateurs.
J'utilise l'unité % Css pour les tailles de blocs tel que width ou height, pour les marges CSS intérieures et marges CSS extérieures essentiellement. Cependant vous pouvez aussi l'utiliser pour les tailles relatives à la police tel que font-size, line-height.
Le convertisseur d'unités de longueurs Css, va vous permettre de trouver les équivalences entre PX, (R)EM, % et PT.
Unité Css em
L'unité de longueur CSS em est relative à la taille de la police de l'élément (font-size) pour lequel vous utilisez une taille CSS en em, sauf pour la propriété CSS font-size qui est relative à la taille de la police héritée.
Exemple : si font-size: 1.2em alors la taille de la police est 20% plus grande que la taille de la police héritée.
Le zéro peut être omis : font-size: 0.5em ou font-size: .5em
Voici le mode de calcul pour trouver la valeur en em en partant de valeur en px :
taille désirée en pixels / taille relative en pixels
L'unité CSS em est reconnue par l'ensemble des navigateurs.
Moi, j'utilise l'unité em Css pour les tailles de police tel que font-size, line-height mais aussi dans certains cas pour les marges CSS intérieures et marges CSS extérieures.
Le convertisseur d'unités de longueurs Css, va vous permettre de trouver les équivalences entre PX, EM, % et PT.
Unité Css ex
L'unité de longueur CSS ex est relative à la valeur de la propriété "x-height" de la police héritée (font-family). Cette valeur correspond à la hauteur du caractère "x" minuscule. Elle est définie même pour les polices qui n'en contiennent pas.
L'unité ex CSS est reconnue par l'ensemble des navigateurs.
Spécialement, je ne l'utilise jamais, mais de mon point de vue l'unité Css ex sera plus utilisée pour les tailles relatives à la police tel que font-size, line-height, mais aussi dans certains cas pour les marges CSS intérieures et marges CSS extérieures.
Unité Css ch
L'unité de longueur CSS ch est relative à largeur du caractère ou glyphe '0' (zéro, le caractère Unicode U +0030) de la police héritée (font-size et font-family).
L'unité ch CSS a été introduite en CSS3 (*), pose des problèmes d'interprétation.
Il n'existe pas de règle, mais de mon point de vue l'unité Css ch sera plus utilisée pour les tailles relatives à la police tel que font-size, line-height mais aussi dans certains cas pour les marges CSS intérieures et marges CSS extérieures.
Peut-être aussi utiliser dans le cas d'une police de type monospace (tous les glyphes ont la même largeur), car elle vous permettra de donner à un bloc une taille de N caractères.
width : 3ch
Unité Css rem
L'unité de longueur CSS rem est relative à la taille de la police spécifiée pour la balise HTML ou la valeur par défaut donnée par le navigateur (font-size) à cette balise.
Si cette unité perdure, l'unité rem Css sera adoptée par tous les webdesigner, qui ne se prendront plus la tête avec l'unité css em.
Voici le mode de calcul pour trouver la valeur en rem en partant de valeur en px :
taille désirée en pixels / taille du font-size de HTML en pixels
L'unité Css rem a été introduite en CSS3 (*), pose des problèmes d'interprétation.
Il n'existe pas de règle, mais de mon point de vue l'unité rem Css sera plus utilisée pour les tailles relatives à la police tel que font-size, line-height mais aussi dans certains cas pour les marges CSS intérieures et marges CSS extérieures.
Le convertisseur d'unités de longueurs Css, va vous permettre de trouver les équivalences entre PX, (R)EM, % et PT.
width : 1.5remUnité Css vw (viewport width)
L'unité de longueur CSS vw est relative à la largeur du bloc conteneur initial. Lunité vw Css est égale à 1% de cette dernière.
L'unité vw CSS a été introduite en CSS3 (*), pose des problèmes d'interprétation.
La valeur de viewport width semble être basée sur window.innerWidth, elle est donc variable suivant la taille de la fenêtre du navigateur.
Exemple dynamique : 3x(768/100) = 23px
Il n'existe pas de règle, mais de mon point de vue l'unité vw Css sera plus utilisée pour les tailles de blocs tel que width ou height.
width : 1.5vwUnité Css vh (viewport height)
L'unité de longueur CSS vh est relative à la hauteur du bloc conteneur initial. L'unité vh Css est égale à 1% de cette dernière.
L'unité CSS vh a été introduite en CSS3 (*), pose des problèmes d'interprétation.
La valeur de viewport height semble être basée sur window.innerHeight, elle est donc variable suivant la taille de la fenêtre du navigateur.
Exemple dynamique : 3x(1024/100) = 307px
Il n'existe pas de règle, mais de mon point de vue l'unité vh Css sera plus utilisée pour les tailles de blocs tel que width ou height.
width : 4vhUnité Css vmin
L'unité de longueur CSS vmin est relative à la largeur ou à la hauteur du bloc conteneur initial. L'unité vmin CSS est égale à la plus petite valeur des deux.
L'unité CSS vmin a été introduite en CSS3 (*), pose des problèmes d'interprétation.
(*)vm pour Internet Explorer 9+
La valeur de viewport width semble être basée sur window.innerWidth et window.innerHeight, elle est donc variable suivant la taille de la fenêtre du navigateur.
Exemple dynamique : 3x(Math.min(768,1024)/100) = 23px
Il n'existe pas de règle, mais de mon point de vue l'unité vmin Css sera plus utilisée pour les tailles de blocs tel que width ou height.
width : 4vminUnité Css vmax
L'unité de longueur CSS vmax est relative à la hauteur ou la largeur du bloc conteneur initial. vmax est égale à la plus grande valeur des deux.
L'unité Css vmax a été introduite en CSS3 (*), pose des problèmes d'interprétation.
La valeur de viewport width semble être basée sur window.innerWidth et window.innerHeight , elle est donc variable suivant la taille de la fenêtre du navigateur.
Exemple dynamique : 3x(Math.max(768,1024)/100) = 307px
Il n'existe pas de règle, mais de mon point de vue l'unité vmax Css sera plus utilisée pour les tailles de blocs tel que width ou height.
width : 1.5vmaxLe cas de l'unité Css en pixel
Unité Css px
L'unité de longueur CSS px n'est pas relative à la police courante ni relative aux unités absolues.
Il s'agit d'une unité dont le rendu dépend de la résolution du périphérique d'affichage.
Cependant nous pouvons la classer dans les unités de longueur absolues.
Quel que soit le support d'affichage le px a toujours la même apparence visuelle et 1px est toujours affiché de façon nette. Il faut savoir aussi que les valeurs récupérées (valeurs calculées) en javascript sont toujours exprimées en pixel.
En règle générale, l'unité de longueur px est utilisée pour toutes les propriétés css acceptant des unitées de longeurs. Cependant les évolutions technologiques font que le Webdesigner va plus opter pour des chartes adptatives plutôt que des chartes fixes.
Ce qui est sûr c'est que l'unité de longueur px restera utilisée pour la taille de bordures (border-width ou border-radius)
1px est égal à 1/96 de in
Le convertisseur d'unités de longueurs Css, va vous permettre de trouver les équivalences entre PX, (R)EM, % et PT.
Travailler avec les nouvelles unités de longueurs CSS3
Si vous voullez travailler avec les nouvelles unités, il vous faut une solution de secour pour les unités de longueur non interprétées par les navigateurs.
La technique consite à assigner à une propriété css une valeur avec une unité sûre. Puis vous répétez la propriété css avec une unité moins sûre, car le navigateur ignore une déclaration qui comporte une valeur invalide (donc pas reconnue).
font-size:12px;
font-size:1rem;