1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
|
---
title: outline
slug: Web/CSS/outline
tags:
- CSS
- Propriété
- Reference
translation_of: Web/CSS/outline
---
<div>{{CSSRef}}</div>
<p>La propriété <strong><code>outline</code></strong> est <a href="/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies">une propriété raccourcie</a> 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")}}.</p>
<div>{{EmbedInteractiveExample("pages/css/outline.html")}}</div
<p>À 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 <a href="/fr/docs/Web/CSS/Valeur_initiale">leur valeur initiale</a>.</p>
<h3 id="Bordures_et_contours">Bordures et contours</h3>
<p>Les contours (<em>outline</em>) diffèrent des bordures, notamment sur les points suivants :</p>
<ul>
<li>Les contours ne prennent pas d'espace et sont dessinés au-dessus du contenu.</li>
<li>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).</li>
</ul>
<h2 id="Syntaxe">Syntaxe</h2>
<pre class="brush: css no-line-numbers">/* 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;
</pre>
<p>La propriété <code>outline</code> 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.</p>
<div class="note">
<p><strong>Note :</strong> Si aucun style n'est défini, le contour sera invisible (car le style par défaut vaut <code>none</code>).</p>
</div>
<h3 id="Valeurs">Valeurs</h3>
<dl>
<dt><code><'outline-width'></code></dt>
<dd>Voir {{cssxref("outline-width")}}.</dd>
<dt><code><'outline-style'></code></dt>
<dd>Voir {{cssxref("outline-style")}}.</dd>
<dt><code><'outline-color'></code></dt>
<dd>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")}}.</dd>
</dl>
<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
{{csssyntax}}
<h2 id="Exemples">Exemples</h2>
<h3 id="Exemple_simple">Exemple simple</h3>
<h4 id="HTML">HTML</h4>
<pre class="brush: html"><p class="exemple">Je suis entouré de tirets rouges</p></pre>
<h4 id="CSS">CSS</h4>
<pre class="brush: css">.exemple {
outline: dashed red 2px;
/* on aurait pu utiliser */
/* les trois propriétés unitaires */
/* et avoir le même résultat */
}
</pre>
<h4 id="Résultat">Résultat</h4>
<p>{{EmbedLiveSample("Exemple_simple")}}</p>
<h3 id="Exemple_de_contour_non_rectangulaire">Exemple de contour non rectangulaire</h3>
<h4 id="HTML_2">HTML</h4>
<pre class="brush: html"><p class="exemple">
petit texte
<span class=grand>Grand Texte</span>
petit texte
</p></pre>
<h4 id="CSS_2">CSS</h4>
<pre class="brush: css">.exemple {
outline: dotted orange 1px;
}
.grand {
font-size:xx-large;
}
</pre>
<h4 id="Résultat_2">Résultat</h4>
<p>{{EmbedLiveSample("Exemple_de_contour_non_rectangulaire")}}</p>
<h2 id="Accessibilité">Accessibilité</h2>
<p>Utiliser la propriété <code>outline</code> avec une valeur <code>0</code> ou <code>none</code> 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</p>
<ul>
<li>{{cssxref(":focus")}}</li>
<li><a href="https://www.deque.com/blog/give-site-focus-tips-designing-usable-focus-indicators/">Comment concevoir des indicateurs de focus utiles et utilisables (en anglais)</a></li>
<li>
<p><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-focus-visible.html"><em>Understanding Success Criterion 2.4.7 | Understanding WCAG 2.0</em> (en anglais)</a></p>
</li>
</ul>
<h2 id="Spécifications">Spécifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Spécification</th>
<th scope="col">Statut</th>
<th scope="col">Commentaires</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Basic UI', '#outline', 'outline')}}</td>
<td>{{Spec2('CSS3 Basic UI')}}</td>
<td>Aucun changement.</td>
</tr>
<tr>
<td>{{SpecName('CSS2.1', 'ui.html#propdef-outline', 'outline')}}</td>
<td>{{Spec2('CSS2.1')}}</td>
<td>Définition initiale.</td>
</tr>
</tbody>
</table>
<div>{{cssinfo}}</div>
<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<p>{{Compat("css.properties.outline")}}</p>
|
