From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/fr/web/css/outline/index.html | 159 ++++++++++++++++++++++++++++++++++++ 1 file changed, 159 insertions(+) create mode 100644 files/fr/web/css/outline/index.html (limited to 'files/fr/web/css/outline') diff --git a/files/fr/web/css/outline/index.html b/files/fr/web/css/outline/index.html new file mode 100644 index 0000000000..11148a26fa --- /dev/null +++ b/files/fr/web/css/outline/index.html @@ -0,0 +1,159 @@ +--- +title: outline +slug: Web/CSS/outline +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/outline +--- +
{{CSSRef}}
+ +

La propriété outline est une propriété raccourcie qui permet de définir, dans une seule déclaration, une ou plusieurs des propriétés parmi {{cssxref("outline-style")}}, {{cssxref("outline-width")}} et {{cssxref("outline-color")}}.

+ +
{{EmbedInteractiveExample("pages/css/outline.html")}}
+ + + +

À l'instar des autres propriétés raccourcies, toutes les valeurs qui ne sont pas explicitement utilisées dans la déclaration sont réinitialisées avec leur valeur initiale.

+ +

Bordures et contours

+ +

Les contours (outline) diffèrent des bordures, notamment sur les points suivants :

+ + + +

Syntaxe

+ +
/* style */
+outline: solid;
+
+/* couleur | style */
+outline: #f66 dashed;
+
+/* style | épaisseur */
+outline: inset thick;
+
+/* couleur | style | épaisseur */
+outline: green solid 3px;
+
+/* Valeurs globales */
+outline: inherit;
+outline: initial;
+outline: unset;
+
+ +

La propriété outline peut être définie avec une, deux ou trois valeurs parmi celles listées ci-après. L'ordre de ces valeurs n'a pas d'importance.

+ +
+

Note : Si aucun style n'est défini, le contour sera invisible (car le style par défaut vaut none).

+
+ +

Valeurs

+ +
+
<'outline-width'>
+
Voir {{cssxref("outline-width")}}.
+
<'outline-style'>
+
Voir {{cssxref("outline-style")}}.
+
<'outline-color'>
+
Depuis Gecko 1.9 (Firefox 3), la valeur de la propriété {{cssxref("color")}} de l'élément est utilisée. Voir {{cssxref("outline-color")}}.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

Exemple simple

+ +

HTML

+ +
<p class="exemple">Je suis entouré de tirets rouges</p>
+ +

CSS

+ +
.exemple {
+  outline: dashed red 2px;
+  /* on aurait pu utiliser          */
+  /* les trois propriétés unitaires */
+  /* et avoir le même résultat      */
+}
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemple_simple")}}

+ +

Exemple de contour non rectangulaire

+ +

HTML

+ +
<p class="exemple">
+  petit texte
+    <span class=grand>Grand Texte</span>
+  petit texte
+</p>
+ +

CSS

+ +
.exemple {
+  outline: dotted orange 1px;
+}
+
+.grand {
+  font-size:xx-large;
+}
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemple_de_contour_non_rectangulaire")}}

+ +

Accessibilité

+ +

Utiliser la propriété outline avec une valeur 0 ou none supprimera le style par défaut du navigateur pour le focus. Lorsqu'on interagit avec un élément, celui-ci doit avoir un indicateur visible. Aussi, veillez à fournir un tel indicateur si vous retirez le style par défaut pour le focus

+ + + +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('CSS3 Basic UI', '#outline', 'outline')}}{{Spec2('CSS3 Basic UI')}}Aucun changement.
{{SpecName('CSS2.1', 'ui.html#propdef-outline', 'outline')}}{{Spec2('CSS2.1')}}Définition initiale.
+ +
{{cssinfo}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.outline")}}

-- cgit v1.2.3-54-g00ecf