User-select - Propriété CSS

Schéma syntaxique de user-select.

Description de la propriété user-select.

La propriété CSS user-select définit si le contenu de l'élément peut être sélectionné par l'utilisateur. Cette propriété peut être utilisée par exemple pour dissuader le copier-coller du texte d'un élément, ou au contraire pour faciliter la sélection d'un élément en évitant la sélection accidentelle d'autres éléments proches.

Il ne faut pas considérer user-select comme une protection contre la copie, ne serait-ce que parce qu'il est toujours possible de désactiver les feuilles de styles, ce qui rendrait cette protection inefficace. user-select doit au contraire être vu comme un moyen de faciliter les sélections par l'utilisateur, en évitant les sélections accidentelles de contenu sans intérêt.

Il est de toute façon déconseillé de désactiver les sélections sur de grandes plages de texte. Ce serait frustrant pour le lecteur et sans la contrepartie d'un avantage quelconque. Les différents textes de spécification du CSS édités par le W3C sont de bons exemples d'utilisation de user-select : les noms des propriétés sont entourés d'apostrophes, mais ces derniers ne sont pas sélectionnables, ce qui facilite beaucoup le copier-coller pour le lecteur.
Exemple : il est facile de sélectionner le nom ci-dessous sans inclure les apostrophes.

user-select

Quelques cas particuliers.

Le contenu d'une zone de saisie est toujours sélectionnable, quelque soit la valeur donnée à la propriété user-select. Cependant, la plupart des navigateurs traient la sélection dans une zone de saisie de façon séparée : il n'est pas possible de sélectionner à la fois le contenu de la zone et le contenu hors de la zone

A l'inverse, les contenus ajoutés avec les sélecteurs ::before ou ::after ne sont jamais sélectionnables par l'utilisateur. Ceci est susceptible d'évoluer : la spécification n'est pas encore très stable à ce sujet.

Syntaxes pour user-select.

• user-select: auto;

  La valeur auto définit la possibilité de sélection en fonction de la nature de l'élément :

  • Sur les textes ajoutés avec les pseudo-éléments ::before ou ::after, auto est équivalent à none : pas de sélection possible.
  • Si l'élément est un élément éditable, auto est équivalent à contain.
  • Si la valeur de la propriété user-select de l'élément parent est all ou none, la valeur auto est équivalente à inherit. Dans tous les autres cas, la valeur auto est équivalente à la valeur text : possibilité de sélection habituelle.
  Tentez de sélectionner ce texte
• user-select: none;

  Pour faire simple on pourrait dire qu'il n'est pas possible de sélectionner le contenu de l'élément. Mais le comportement des navigateurs différent lorsque la sélection est commencée en dehors de l'élément, et s'étend jusqu'à englober au moins partiellement le contenu de l'élément :

  1. Firefox empêche totalement la sélection du contenu de l'élément, même si cet élément contient du contenu éditable (zone de saisie ou élément avec l'attribut contenteditable="true").
  2. La plupart des autres navigateurs sélectionnent quand même le contenu de l'élément si la sélection l'englobe totalement, c'est à dire si elle s'étend de part et d'autre de l'élément.
  3. De nombreux navigateurs permettent, dans tous les cas, la sélection du contenu dans les éléments éditables.

  Si la propriété user-select est fixée à none alors qu'une sélection a déjà été faite dans le contenu de l'élément, cette sélection n'est pas retirée.

  Remarque : les navigateurs Mozilla reconnaissent encore la valeur -moz-none, mais qui peut maintenant être remplacée par la valeur none standard.

  Tentez de sélectionner ce texte
• user-select: text;

  La sélection du contenu peut se faire de la façon habituelle. Aucune contrainte n'est mise en place.

  Tentez de sélectionner ce texte
• user-select: contain; ⚠

  Les sélections sont possibles à condition qu'elles restent dans le contenu de l'élément. Autrement dit, il n'est pas possible de commencer une sélection à l'extérieur de l'élément et de la terminer à l'intérieur. L'inverse n'est pas possible non plus : commencer la sélection dans l'élément et la terminer à l'extérieur.

  Tentez de sélectionner ce texte
• user-select: all;

  Une sélection du contenu complet de l'élément se fait automatiquement dès que l'utilisateur clique quelque part dans l'élément.

  Tentez de sélectionner ce texte
• user-select: element;

  Lorsqu'une sélection est commencée dans l'élément, elle ne peut pas se poursuivre à l'extérieur de ce dernier.
  valeur spécifique, traitée uniquement par le navigateur Internet Explorer  .

Valeurs communes à toutes les propriétés :

Animation de la propriété user-select.

user-select peut être animée, mais cela ne présente pas d'intérêt visuel puisque l'effet de cette propriété n'est visible que sur une action de l'utilisateur. L'animation se traduit par la possibilité ou non de sélectionner le contenu d'un élément, mais comme rien de visuel ne révèle l'animation, cette possibilité est perçue comme aléatoire par le l'utilisateur.

Exemple interactif avec la propriété user-select.

Choisissez une valeur pour user-select et tentez de sélectionner dans l'élément. Le simulateur applique cette valeur à tous les éléments en bleu dans l'exemple. Observez la différence de comportement entre un clic dans le texte non éditable et un clic dans la zone de saisie.

Remarque : les contenus ajoutés par les pseudo-éléments ::before et ::after obéissent à des règles de sélection particulières, et différentes d'un navigateur à l'autre. La plupart du temps, ces textes ne sont pas sélectionnables.

Prise en charge par les navigateurs (compatibilité).

Remarques :

(1) Supporté avec le préfixe -ms-.

(2) Supporté avec le préfixe -webkit-.

1

Propriété
user-select

Estimation de la prise en charge globale.

96%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Chrome

Edge

Internet Explorer

1

Opéra

Firefox

QQ Browser

Safari

2

Safari sur IOS

2

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

Opéra Mobile

Baidu Browser

KaiOS Browser

UC Browser pour Androïd

Samsung Internet

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Historique de la propriété user-select.

• Module CSS - Interface utilisateur de base - Niveau 4

  Introduction de la propriété user-select.
  

  22 Septembre 2015

  Document de travail.

  

  

  

Voir aussi, au sujet de l'interface utilisateur.

Les spécifications CSS éditées par le W3C sont organisées en modules. La propriété user-select fait partie du module "CSS Basic User Interface Module ". Ces autres propriétés concernent également la personnalisation de l'interface utilisateur :

Propriétés :