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
|
---
title: user-select
slug: Web/CSS/user-select
tags:
- CSS
- Propriété
- Reference
translation_of: Web/CSS/user-select
---
<div>{{CSSRef}}</div>
<p>La propriété <code><strong>user-select</strong></code> permet de contrôler l'opération de <a href="/fr/docs/Web/API/Selection">sélection</a>. Cela n'a aucun effet sur le contenu qui est chargé dans les éléments de l'interface ({{Glossary("Chrome", "chrome")}}), sauf pour les boîtes de texte.</p>
<pre class="brush:css">/* Valeurs avec un mot-clé */
user-select: none;
user-select: auto;
user-select: text;
user-select: contain;
user-select: all;
/* Valeurs globales */
user-select: inherit;
user-select: initial;
user-select: unset;
/* Valeurs spécifiques à Mozilla */
-moz-user-select: none;
-moz-user-select: text;
-moz-user-select: all;
/* Valeurs spécifiques à WebKit */
-webkit-user-select: none;
-webkit-user-select: text;
-webkit-user-select: all; /* Ne fonctionne pas pour Safari */
/* Valeurs spécifiques à Microsoft */
-ms-user-select: none;
-ms-user-select: text;
-ms-user-select: element;
</pre>
<h2 id="Syntaxe">Syntaxe</h2>
<dl>
<dt><code>none</code></dt>
<dd>On ne pourra pas sélectionner le texte de l'élément et celui de ses descendants. Toutefois, l'objet {{domxref("Selection")}} pourra contenir ces éléments. À partir de Firefox 21, <code>none</code> se comporte comme <code>-moz-none</code> et la sélection peut donc être réactivée sur les éléments fils avec <code>-moz-user-select:text</code>.</dd>
<dt><code>auto</code></dt>
<dd>
<p>Le texte sera sélectionné avec les propriétés par défaut appliquées par l'agent utilisateur. La valeur calculée est déterminée de la façon suivante :</p>
<ul>
<li>Pour les pseudo-éléments <code>::before</code> et <code>::after</code>, la valeur calculée sera <code>none</code></li>
<li>Si l'élément est un élément éditable, la valeur calculée est <code>contain</code></li>
<li>Sinon, si la valeur calculée de <code>user-select</code> pour l'élément parent est <code>all</code>, la valeur calculée sera <code>all</code></li>
<li>Sinon, si la valeur calculée de <code>user-select</code> pour l'élément parent est <code>all</code>, la valeur calculée sera <code>none</code></li>
<li>Sinon, la valeur calculée est <code>text</code></li>
</ul>
</dd>
<dt><code>text</code></dt>
<dd>Le texte peut être sélectionné par l'utilisateur<code>.</code></dd>
<dt><code>all</code></dt>
<dd>Dans un éditeur HTML, si un double clic ou si un clic contextuel se produit sur les éléments fils, c'est la valeur de l'ancêtre le plus haut qui sera sélectionnée.</dd>
<dt><code>contain</code></dt>
<dt><code>element</code> {{non-standard_inline}} (alias spécifique à IE)</dt>
<dd>Uniquement supporté par Internet Explorer. Cela permet d'activer la sélection au sein de l'élément, celle-ci ne pourra pas « sortir » de cet élément.</dd>
</dl>
<div class="note">
<p id="Formal_syntax"><strong>Note :</strong> CSS UI 4 <a href="https://github.com/w3c/csswg-drafts/commit/3f1d9db96fad8d9fc787d3ed66e2d5ad8cfadd05">a renommé <code>user-select: element</code> en <code>contain</code></a>.</p>
</div>
<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
{{csssyntax}}
<h2 id="Exemples">Exemples</h2>
<h3 id="CSS">CSS</h3>
<pre class="brush: css">.unselectable {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
.all {
-moz-user-select: all;
-webkit-user-select: all;
-ms-user-select: all;
user-select: all;
}
</pre>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><p>Vous devriez pouvoir sélectionner ce texte.</p>
<p class="unselectable">Hop, vous ne pouvez pas sélectionner ce texte !</p>
<p class="all">Cliquer une fois permettra de sélectionner l'ensemble du texte.</p>
</pre>
<h3 id="Résultat">Résultat</h3>
<p>{{EmbedLiveSample("Exemples")}}</p>
<h2 id="Spécifications">Spécifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Spécification</th>
<th scope="col">État</th>
<th scope="col">Commentaires</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS4 UI', '#propdef-user-select', 'user-select')}}</td>
<td>{{Spec2('CSS4 UI')}}</td>
<td>Définition initiale. <code>-webkit-user-select</code> est indiqué comme étant un alias déprécié de <code>user-select</code>.</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
<p>{{Compat("css.properties.user-select")}}</p>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li>{{cssxref("::selection")}}</li>
<li>L'objet JavaScript {{domxref("Selection")}}.</li>
<li><code><a href="https://www.w3.org/TR/css-ui-4/#propdef-user-select">user-select</a></code> dans <a href="https://www.w3.org/TR/css-ui-4/">CSS Basic User Interface Module Level 4</a>.</li>
</ul>
|
