outline-width |
Largeur de la ligne en dehors |
|---|---|
| CSS 2 |
Syntaxe
| outline-width: largeur|inherit|initial|medium|thick|thin; |
Paramètres
| Paramètre | Exemple | Description |
|---|---|---|
| largeur | Ceci est un texte d'exemple |
Cet attribut permet d'indiquer une bordure de largeur du nombre de pixels spécifié. |
| inherit | Ce paramètre permet d'indiquer qu'il faut hérité de la valeur de son parent. | |
| initial | Ce paramètre permet d'indiquer qu'il faut appliquer la valeur par défaut de cette propriété. | |
| medium | Ceci est un texte d'exemple |
Cet attribut permet d'indiquer une bordure de largeur moyenne. |
| thick | Ceci est un texte d'exemple |
Cet attribut permet d'indiquer une bordure de largeur grasse. |
| thin | Ceci est un texte d'exemple |
Cet attribut permet d'indiquer une bordure de largeur fine. |
Description
Cette propriété permet de fixer le largeur de la ligne autour d'une balise (en dehors de ses frontières) afin qu'elle se démarque des autres.
Remarques
- Définition et rôle : La propriété outline-width permet de définir l'épaisseur de la bordure externe d'un élément, appelée "outline". Contrairement à la propriété border, une outline n'affecte pas la mise en page car elle ne prend pas d'espace dans le flux du document.
- Différence avec border-width : Contrairement à border-width, l'outline est dessinée au-dessus du contenu sans modifier la boîte de l'élément. Cela signifie qu'une outline peut chevaucher d'autres éléments adjacents si son épaisseur est importante.
- Unités disponibles : outline-width peut être spécifié en pixels (px), en unités relatives (em, rem), ou avec des mots-clefs pré-définis comme thin, medium et thick. Ces mots-clefs permettent une simplicité d'utilisation, mais manquent de précision.
- Valeur par défaut : La valeur par défaut de outline-width dépend du style utilisateur de l'agent de rendu. Généralement, si aucune valeur n'est définie, aucune outline n'est affichée, car la propriété outline est souvent définie sur none par défaut.
- Accessibilité et focus : Utilisée en combinaison avec outline-style et outline-color, la propriété outline-width est essentielle pour l'accessibilité. Elle est particulièrement utile pour indiquer visuellement le focus sur un élément interactif, comme un bouton ou un lien.
- Compatibilité navigateur : outline-width est bien prise en charge par tous les navigateurs Web modernes, y compris Internet Explorer 8 et versions ultérieures. Cependant, il est toujours bon de tester des combinaisons spécifiques pour s'assurer d'un rendu cohérent.
- Ordre de rendu : L'outline est dessinée en dehors de la bordure (border) d'un élément. Son ordre de rendu est après le contenu et la bordure mais avant les éléments adjacents. Cela peut donner l'impression qu'elle "flotte" autour de l'élément.
- Limites d'usage : Une outline très large peut affecter négativement l'expérience utilisateur, surtout si elle n'est pas associée à un contraste suffisant ou si elle chevauche d'autres contenus. Il est donc recommandé d'utiliser une largeur modérée et de tester son impact visuel.
Dernière mise à jour : Dimanche, le 20 décembre 2015