Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

user-select - Propriété CSS

user-select

Résumé des caractéristiques de la propriété user-select

Description rapide
Définit si le contenu d'un élément est sélectionnable par l'utilisateur ou non.
Statut
Standard
Valeurs prédéfinies
auto | contain | text | all | none
Pourcentages
Ne s'appliquent pas.
Valeur initiale
auto
Héritée par défaut
Non
Type d'animation
Discrète : lors d'une animation, la propriété user-select passe d'une valeur à l'autre sans transition.
Module W3C
Module CSS - Interface utilisateur de base
Références (W3C)
Statut du document:: WD (document de travail)

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.

Remarque. Cette propriété est différemment traitée par les navigateurs, des différences de comportement sont à noter. Par exemple Firefox n'inclut pas les zones de saisie ( input ) dans la sélection, alors que d'autres navigateurs le font.

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

Syntaxes pour user-select.

user-select:
 auto auto text text none none contain contain all all
;
  • user-select: auto;
    Exemple

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

    1. Sur les textes ajoutés avec les pseudo-éléments ::before ou ::after, auto est équivalent à none : pas de sélection possible.
    2. Si l'élément est un élément éditable, auto est équivalent à contain.
    3. 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.
  • user-select: none;
    Exemple

    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.

  • user-select: text;
    Exemple

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

  • user-select: contain;
    Exemple

    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.

  • user-select: all;
    Exemple

    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.

  • user-select: element; Spécificité Internet Explorer
    Exemple

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

  • user-select: initial; user-select: inherit; user-select: revert; user-select: revert-layer; user-select: unset;

    La valeur initiale est : auto.

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.

Tentez de sélectionner ce texte

Simulateur.

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.

user-select :

Exemple 1 : Texte dans un bloc non éditable

Exemple 2 : zone de saisie

  Exemple 3  

Prise en charge par les navigateurs (compatibilité).

1
user-select
Estimation de la prise en charge en pourcentage du parc actuel.
95%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Androïd Brower

Chrome

Chrome pour Androïd

Edge

Firefox

Firefox pour Androïd

Internet Explorer

Opéra

Opéra Mobile

Safari

Safari sur IOS

Samsung Internet

Voir aussi, dans le même module de standardisation que user-select.

Les spécifications CSS éditées par le W3C sont organisées en modules. user-select fait partie du Module CSS - Interface utilisateur de base (CSS Basic User Interface Module ). Les définitions suivantes sont également décrites dans ce même module.

Propriétés.

Définit la couleur des élément actifs, cochés.
Définit toutes les propriétés nécessaires pour qu'un élément soit affiché comme un bouton, un menu, etc.
Définit la couleur et la forme du marqueur de texte.
Choisit la couleur du marqueur de texte (curseur clignotant).
Définit la forme du curseur de texte.
Définit la forme du curseur de la souris.
Définit l'accessibilité d'une zone de saisie.
Résumé des caractéristiques d'encadrement.
Définit la couleur de l'encadrement (outline).
Définit l'espacement entre le contour et l'élément.
Définit le type de trait des contours (simple, double, pointillé...).
Définit l'épaisseur du trait d'encadrement.
Autorise ou empêche le dimensionnement de l'élément. par l'utilisateur.