user-select - Propriété CSS
Résumé des caractéristiques de la propriété user-select
auto
| contain
| text
| all
| none
auto
user-select
passe d'une valeur à l'autre sans transition.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
Syntaxes pour user-select
.
user-select:
;
- user-select: auto;Exemple
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 estall
ounone
, la valeurauto
est équivalente àinherit
. Dans tous les autres cas, la valeurauto
est équivalente à la valeurtext
: possibilité de sélection habituelle.
- Sur les textes ajoutés avec les pseudo-éléments
- 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 :
- 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"
). - 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.
- 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 valeurnone
standard. - 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
- 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;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.
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.
Exemple 1 : Texte dans un bloc non éditable
Exemple 2 : zone de saisie
Exemple 3
Prise en charge par les navigateurs (compatibilité).
user-select
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.