diff options
Diffstat (limited to 'files/fr/web/css/user-select/index.html')
| -rw-r--r-- | files/fr/web/css/user-select/index.html | 137 |
1 files changed, 137 insertions, 0 deletions
diff --git a/files/fr/web/css/user-select/index.html b/files/fr/web/css/user-select/index.html new file mode 100644 index 0000000000..1024770ab4 --- /dev/null +++ b/files/fr/web/css/user-select/index.html @@ -0,0 +1,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> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<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> |