Outline-width - Propriété CSS
Résumé des caractéristiques de la propriété outline-width
medium | thick | thinmediumoutline-width passe progressivement d'une valeur à une autre.Schéma syntaxique de outline-width.
outline-widthLes liens du schéma donnent accès à plus de détails
Description des termes utilisés sur le schéma :
lengthest une valeur numérique suivie d'une unité de dimension.
Description.
La propriété outline-width définit l'épaisseur du contour d'un élément.
Pensez aussi à définir la propriété outline-style pour que le contour soit effectivement affiché.
Certains styles de trait (double, effets de relief) nécessitent une épaisseur minimale de 2 ou 3 pixels pour être correctement rendus.
Pour une présentation générale des contours, et en particulier de la différence entre les contours et les bordures,
reportez-vous à la propriété résumée outline.
Syntaxes pour outline-width.
- outline-width: medium;
Contour d'épaisseur moyenne : 3 pixels environ.
- outline-width: thin;
Contour fin : 1 pixel environ.
- outline-width: thick;
Contour épais : environ 5 pixels.
- outline-width: 7px;
L'épaisseur du contour est déterminée par la valeur indiquée. Celle-ci doit être positive ou nulle, suivie d'une unité de dimension (voir les unités CSS de dimension).
Les pourcentages ne sont pas acceptés pour définir l'épaisseur des contours.
Valeurs communes à toutes les propriétés :
outline-width: initial (medium)
outline-width: inherit
outline-width: revert
outline-width: revertLayer
outline-width: unset
Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, unset.
Animation de la propriété outline-width.
L'animation de outline-width est sans surprise : c'est une valeur numérique qui évolue progressivement depuis la valeur
de départ définie dans l'animation jusqu'à la valeur de fin.
Bien entendu, puisqu'il s'agit d'un contour (et non pas d'une bordure) aucun élément n'est redimensionné ou déplacé pendant l'animation.
Manipulation de la propriété outline-width par programme.
Modifier la valeur de outline-width en Javascript.
En Javascript, voici comment modifier la valeur de outline-width.
On voit sur les deux exemples de code ci-dessous que Javascript propose une syntaxe avec la notation typique de CSS, en kebab-case, et une autre syntaxe avec
la notation en camel-case.
let el = document.getElementById('id');
el.style['outline-width'] = '0.5ex';
// ou
let el = document.getElementById('id');
el.style.outlineWidth = '0.5ex';
Lire la valeur de outline-width avec Javascript.
La propriété doit avoir été affectée directement à l'élément lui-même par son attribut style et pas en passant par un sélecteur.
La valeur est renvoyée telle qu'elle a été définie, avec la même unité.
let el = document.getElementById('id');
let value = el.style['outline-width'];
// ou
let el = document.getElementById('id');
let value = el.style.outlineWidth;
Lire la valeur calculée de outline-width avec Javascript.
La valeur calculée est celle qui résulte de l'évaluation des unités relatives, et de la prise en compte éventuelle des valeurs héritées. A défaut, la valeur calculée
est la valeur initiale de la propriété : medium dans le cas de outline-width.
La valeur est retournée en pixels, quelque soit l'unité utilisée pour la définir.
let el = document.getElementById('id');
let value = window.getComputedStyle(el).getPropertyValue('outline-width');
Modifier la valeur de outline-width avec JQuery.
$('#id').css('outline-width', '0.5ex');
Lire la valeur calculée de outline-width avec JQuery.
let value = $('#id').css('outline-width');
Simulateur.
Le simulateur applique un contour sur un élément du type block (balise div) et sur un élément
du type inline (span). Mais pour ce qui est de l'épaisseur du contour, cela ne fait pas beaucoup de différence.
sur une portion de texte (élément
inline)
Prise en charge par les navigateurs (compatibilité).
La propriété outline-width est bien reconnue par tous les navigateurs : pas de problème de compatibilité à signaler.
outline-width.
des contours
outline-widthNavigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Baidu Browser
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
KaiOS Browser
Opéra
Opéra Mobile
QQ Browser
Safari
Safari sur IOS
Samsung Internet
UC Browser pour Androïd
Opéra mini
Historique de la propriété outline-width.
-
CSS 2.1 - Spécification concernant les feuilles de styles en cascade - Révision 1
Description initiale de la propriétéoutline-styledans la spécification niveau 2 de CSS.
04 Novembre 1997Document de travail.
24 Mars 1998Proposé à la recommandation.
11 Mai 1998Recommandation. -
Module CSS - Interface utilisateur de base - Niveau 3
Pas de changement concernant la propriétéoutline-style.02 Août 2002Document de travail.
07 Juillet 2015Candidat à la recommandation.14 Décembre 2017Proposé à la recommandation.21 Juin 2018Recommandation. -
Module CSS - Interface utilisateur de base - Niveau 4
Pas de changement concernant la propriétéoutline-style.22 Septembre 2015Document de travail.
Voir aussi, au sujet de l'interface utilisateur.
Les spécifications CSS éditées par le W3C sont organisées en modules. La propriété outline-width fait partie de CSS Basic User Interface Module .
Les propriétés suivantes sont également décrites dans ce même module.