La user-selectpropriété en CSS contrôle la manière dont le texte d'un élément peut être sélectionné. Par exemple, il peut être utilisé pour rendre le texte non sélectionnable.
.row-of-icons ( -webkit-user-select: none; /* Chrome all / Safari all */ -moz-user-select: none; /* Firefox all */ -ms-user-select: none; /* IE 10+ */ user-select: none; /* Likely future */ )Ceci est utile dans les situations où vous souhaitez offrir une expérience de copier-coller plus facile / plus propre aux utilisateurs (ne pas leur demander de sélectionner accidentellement des éléments inutiles, comme des icônes ou des images). Cependant, c'est un peu bogué. Firefox impose le fait que tout texte correspondant à ce sélecteur ne peut pas être copié. WebKit permet toujours de copier le texte si vous sélectionnez des éléments autour de lui.
Vous pouvez également l'utiliser pour garantir qu'un élément entier soit sélectionné:
.force-select ( -webkit-user-select: all; /* Chrome 49+ */ -moz-user-select: all; /* Firefox 43+ */ -ms-user-select: all; /* No support yet */ user-select: all; /* Likely future */ )Voici quelques démos de ceux-ci:
Voir la démonstration de sélection de l'utilisateur Pen par Chris Coyier (@chriscoyier) sur CodePen.
Il n'y avait pas de spécification pour cette propriété pendant un certain temps, mais elle est maintenant couverte par le module d'interface utilisateur de base CSS niveau 4.
La valeur par défaut est auto, ce qui fait que la sélection se déroule normalement comme prévu. «Normalement» est un peu compliqué. Cela vaut la peine de citer les spécifications ici:
- Sur les pseudo éléments :: before et :: after, la valeur calculée est
none- Si l'élément est un élément modifiable , la valeur calculée est
contain- Sinon, si la valeur calculée de user-select sur le parent de cet élément est
all, la valeur calculée estall- Sinon, si la valeur calculée de user-select sur le parent de cet élément est
none, la valeur calculée estnone- Sinon, la valeur calculée est
text
En d'autres termes, il cascades et réinitialise intelligemment à un état sensible. Il semble que cette fonctionnalité pourrait être utilisée pour rendre les pseudo éléments sélectionnables, mais pas encore le dernier mot.
Ancien / propriétaire
Firefox prend en charge -moz-none, ce qui ne ressemble à aucun sauf que cela signifie que les sous-éléments peuvent remplacer la cascade et redevenir sélectionnables avec -moz-user-select: text;Firefox 21, aucun ne se comporte comme -moz-none.
Internet Explorer prend également en charge une valeur propriétaire jusqu'à présent element, dans laquelle vous pouvez sélectionner du texte à l'intérieur de l'élément, mais la sélection s'arrêtera aux limites de cet élément.
Plus d'information
- Documents MDN
- Interopérabilité de sélection par l'utilisateur
Prise en charge du navigateur
Ceci est spécifiquement pour -*-user-select: none;
Ces données de support de navigateur proviennent de Caniuse, qui contient plus de détails. Un nombre indique que le navigateur prend en charge la fonctionnalité dans cette version et plus.
Bureau
| Chrome | Firefox | C'EST À DIRE | Bord | Safari |
|---|---|---|---|---|
| 4 * | 2 * | dix* | 12 * | 3,1 * |
Mobile / tablette
| Chrome Android | Android Firefox | Android | Safari sur iOS |
|---|---|---|---|
| 88 | 85 | 2,1 * | 3,2 * |