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/user-select/index.md | 128 +++++++++++++++------------------- 1 file changed, 56 insertions(+), 72 deletions(-) (limited to 'files/fr/web/css/user-select') diff --git a/files/fr/web/css/user-select/index.md b/files/fr/web/css/user-select/index.md index 6415ba1753..df5a54f37b 100644 --- a/files/fr/web/css/user-select/index.md +++ b/files/fr/web/css/user-select/index.md @@ -7,11 +7,12 @@ tags: - Reference translation_of: Web/CSS/user-select --- -
{{CSSRef}}
+{{CSSRef}} -

La propriété user-select permet de contrôler l'opération de sélection. 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.

+La propriété **`user-select`** permet de contrôler l'opération de [sélection](/fr/docs/Web/API/Selection). 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. -
/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 user-select: none;
 user-select: auto;
 user-select: text;
@@ -37,47 +38,44 @@ user-select: unset;
 -ms-user-select: none;
 -ms-user-select: text;
 -ms-user-select: element;
-
- -

Syntaxe

- -
-
none
-
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, none se comporte comme -moz-none et la sélection peut donc être réactivée sur les éléments fils avec -moz-user-select:text.
-
auto
-
-

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 :

- -
    -
  • Pour les pseudo-éléments ::before et ::after, la valeur calculée sera none
    • -
  • Si l'élément est un élément éditable, la valeur calculée est contain
    • -
  • Sinon, si la valeur calculée de  user-select pour l'élément parent est all, la valeur calculée sera all
    • -
  • Sinon, si la valeur calculée de  user-select pour l'élément parent est all, la valeur calculée sera none
    • -
  • Sinon, la valeur calculée est text
    • -
-
-
text
-
Le texte peut être sélectionné par l'utilisateur.
-
all
-
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.
-
contain
-
element {{non-standard_inline}} (alias spécifique à IE)
-
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.
-
- -
-

Note : CSS UI 4 a renommé user-select: element en contain.

-
- -

Syntaxe formelle

+``` + +## Syntaxe + +- `none` + - : 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, `none` se comporte comme `-moz-none` et la sélection peut donc être réactivée sur les éléments fils avec `-moz-user-select:text`. +- `auto` + + - : 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 : + + - Pour les pseudo-éléments `::before` et `::after`, la valeur calculée sera `none` + - Si l'élément est un élément éditable, la valeur calculée est `contain` + - Sinon, si la valeur calculée de  `user-select` pour l'élément parent est `all`, la valeur calculée sera `all` + - Sinon, si la valeur calculée de  `user-select` pour l'élément parent est `all`, la valeur calculée sera `none` + - Sinon, la valeur calculée est `text` + +- `text` + - : Le texte peut être sélectionné par l'utilisateur`.` +- `all` + - : 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. +- `contain` + + `element` {{non-standard_inline}} (alias spécifique à IE) + + - : 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. + +> **Note :** CSS UI 4 [a renommé `user-select: element` en `contain`](https://github.com/w3c/csswg-drafts/commit/3f1d9db96fad8d9fc787d3ed66e2d5ad8cfadd05). + +### Syntaxe formelle {{csssyntax}} -

Exemples

+## Exemples -

CSS

+### CSS -
.unselectable {
+```css
+.unselectable {
   -moz-user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none;
@@ -90,46 +88,32 @@ user-select: unset;
   -ms-user-select: all;
   user-select: all;
 }
-
+``` -

HTML

+### 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>
-
+```html +

Vous devriez pouvoir sélectionner ce texte.

+

Hop, vous ne pouvez pas sélectionner ce texte !

+

Cliquer une fois permettra de sélectionner l'ensemble du texte.

+``` -

Résultat

+### Résultat -

{{EmbedLiveSample("Exemples")}}

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

Spécifications

+## Spécifications - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS4 UI', '#propdef-user-select', 'user-select')}}{{Spec2('CSS4 UI')}}Définition initiale. -webkit-user-select est indiqué comme étant un alias déprécié de user-select.
+| Spécification | État | Commentaires | +| ------------------------------------------------------------------------------------ | ---------------------------- | ------------------------------------------------------------------------------------------------------ | +| {{SpecName('CSS4 UI', '#propdef-user-select', 'user-select')}} | {{Spec2('CSS4 UI')}} | Définition initiale. `-webkit-user-select` est indiqué comme étant un alias déprécié de `user-select`. | -

Compatibilité des navigateurs

+## Compatibilité des navigateurs -

{{Compat("css.properties.user-select")}}

+{{Compat("css.properties.user-select")}} -

Voir aussi

+## Voir aussi - +- {{cssxref("::selection")}} +- L'objet JavaScript {{domxref("Selection")}}. +- [`user-select`](https://www.w3.org/TR/css-ui-4/#propdef-user-select) dans [CSS Basic User Interface Module Level 4](https://www.w3.org/TR/css-ui-4/). -- cgit v1.2.3-54-g00ecf