From 258ba7b4be62d8640477a3bd3146d08b00cb70ec Mon Sep 17 00:00:00 2001 From: julieng Date: Fri, 17 Sep 2021 20:59:20 +0200 Subject: convert content to md --- files/fr/web/css/outline/index.md | 160 ++++++++++++++++---------------------- 1 file changed, 69 insertions(+), 91 deletions(-) (limited to 'files/fr/web/css/outline') diff --git a/files/fr/web/css/outline/index.md b/files/fr/web/css/outline/index.md index 7b505019a2..25c76f72da 100644 --- a/files/fr/web/css/outline/index.md +++ b/files/fr/web/css/outline/index.md @@ -7,26 +7,23 @@ tags: - Reference translation_of: Web/CSS/outline --- -
{{CSSRef}}
+{{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")}}.

+La propriété **`outline`** est [une propriété raccourcie](/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies) 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 -

Bordures et contours

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

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

+- Les contours ne prennent pas d'espace et sont dessinés au-dessus du contenu. +- Les contours peuvent avoir une forme qui n'est pas rectangulaire. Ils seront rectangulaires avec Gecko et Firefox mais Opera dessinera une forme autour du contenu (cf. exemples). - +## Syntaxe -

Syntaxe

- -
/* style */
+```css
+/* style */
 outline: solid;
 
 /* couleur | style */
@@ -42,114 +39,95 @@ outline: green solid 3px;
 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.

+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).

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

Valeurs

+### 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")}}.
-
+- `<'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

+### Syntaxe formelle {{csssyntax}} -

Exemples

+## Exemples -

Exemple simple

+### Exemple simple -

HTML

+#### HTML -
<p class="exemple">Je suis entouré de tirets rouges</p>
+```html +

Je suis entouré de tirets rouges

+``` -

CSS

+#### CSS -
.exemple {
+```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

+#### Résultat -

{{EmbedLiveSample("Exemple_simple")}}

+{{EmbedLiveSample("Exemple_simple")}} -

Exemple de contour non rectangulaire

+### Exemple de contour non rectangulaire -

HTML

+#### HTML -
<p class="exemple">
+```html
+

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

+``` -

CSS

+#### CSS -
.exemple {
+```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")}}

+``` + +#### 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 + +- {{cssxref(":focus")}} +- [Comment concevoir des indicateurs de focus utiles et utilisables (en anglais)](https://www.deque.com/blog/give-site-focus-tips-designing-usable-focus-indicators/) +- [_Understanding Success Criterion 2.4.7  | Understanding WCAG 2.0_ (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-focus-visible.html) + +## Spécifications + +| Spécification | Statut | Commentaires | +| -------------------------------------------------------------------------------- | ------------------------------------ | -------------------- | +| {{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