outline

Résumé

La propriété CSS outline est une fonction raccourci pour définir une ou plusieurs des propriétés outline-style, outline-width et outline-color dans une seule règle. Dans la plupart des cas, l'usage de ce raccourci est préférable et plus pratique.

Les points suivants montrent les différences entre les contours et les bordures :

  • Les contours ne prennent pas d'espace supplémentaire, elles sont dessinées au-dessus du contenu.
  • Les contours peuvent ne pas avoir une forme rectangulaire. Ils sont rectangulaires dans Gecko/Firefox. Mais, par exemple, Opera dessine une forme non-rectangulaire autour d'éléments comme le suivant :
    TEXTTEXTTEXT
  • Valeur initiale La concaténation des valeurs initiales des propriétés associées :
    • outline-color: invert, pour les navigateurs le supportant, currentColor pour les autres
    • outline-width: medium
    • outline-style: none
  • S'applique à tous les éléments
  • Héritée non
  • Pourcentages
  • Média visual, interactive
  • Valeur calculée comme chacune des propriétés du raccourci:
    • outline-color: For the keyword invert, the computed value is invert. For the color value, if the value is translucent, the computed value will be the rgba() corresponding one. If it isn't, it will be the rgb() corresponding one. The transparent keyword maps to rgb(0,0,0).
    • outline-width: an absolute length; if the keyword none is specified, the computed value is 0
    • outline-style: comme spécifié
  • Animable pour chaque propriété individuelle de la propriété raccourcie :
    • outline-color: oui, comme une couleur
    • outline-width: oui, comme une longueur
    • outline-style: non
  • Ordre canonique l'ordre d'apparition dans la grammaire formelle des valeurs

Syntaxe

Syntaxe formelle : <'outline-color'> || <'outline-width'> || <'outline-style'>

Valeurs

Une, deux ou trois valeurs, données dans n’importe quel ordre :

outline-width
Optionnel, la valeur par défaut est medium. Voir outline-width.
outline-style
Requis, la valeur par défaut est none. Voir outline-style.
outline-color
Optionnel, la valeur par défaut est invert. Depuis Gecko 1.9 (Firefox 3), la valeur de la propriété color de l'élément (couleur de premier-plan ou de police). Voir outline-color.

Exemples

 outline: solid; | outline: dashed red; | outline: dotted 1px; | outline: ridge thick violet; | outline: custom 5px;
/* deux déclarations identiques */

:link:hover { outline: 1px solid #000 }
:link:hover { outline: solid black 1px }

Spécifications

Spécification Statut Commentaire
CSS Basic User Interface Module Level 3 Working Draft Pas de changement.
CSS Level 2 (Revision 1) Recommendation  

Compatibilité des navigateurs

Fonction Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Support de base 1.0 1.5 (1.8) 8.0 7.0 1.2 (125)
Fonction Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Support de base 1.0 1.0 (1.8) 8.0 6.0 3.1

Dans les navigateurs utilisant une version Gecko 1.8 ou inférieure (Firefox 1.5), un effet similaire peut être réalisé en utilisant la propriété préfixée -moz-outline.

Voir également

Étiquettes et contributeurs liés au document

Contributeurs à cette page : teoli, wakka27, FredB, Blackhole, Kyodev, Fredchat
Dernière mise à jour par : teoli,
Masquer la barre latérale