Quand est-il acceptable de désactiver la sélection de texte ?

En utilisant CSS, il est possible d'empêcher les utilisateurs de sélectionner du texte dans un élément en utilisant user-select: none. Maintenant, il est compréhensible que cela puisse être considéré comme «controversé». Je veux dire, devrait nous désactivons les comportements d'utilisateur standard ? D'une manière générale, non, on ne devrait pas faire ça. Mais la désactivation de la sélection de texte a-t-elle des cas d'utilisation légitimes (bien que rares) ? Je pense que oui.

Dans cet article, nous allons explorer ces cas d'utilisation et voir comment nous pouvons utiliser user-select: none pour améliorer (et non entraver) les expériences des utilisateurs. Cela ne vaut rien non plus que le user-select la propriété a d'autres valeurs que none qui peut être utilisé pour modifier le comportement de la sélection de texte plutôt que de le désactiver complètement, et une autre valeur qui même applique sélection de texte, nous allons donc également les examiner.

Possible user-select valeurs

Commençons par parcourir les différents user-select valeurs et ce qu'ils font.

Application user-select: none; à un élément signifie que son contenu textuel et le contenu textuel imbriqué ne seront pas fonctionnellement sélectionnables ou visuellement sélectionnables (c'est-à-dire ::selection ne fonctionnera pas). Si vous deviez faire une sélection contenant du contenu non sélectionnable, le contenu non sélectionnable serait omis de la sélection, il est donc assez bien implémenté. Et le soutien est super.

A l'inverse, user-select: text rend le contenu sélectionnable. Vous utiliseriez cette valeur pour écraser user-select: none.

user-select: contain est intéressant. L'appliquer signifie que si une sélection commence à l'intérieur de l'élément, elle doit également se terminer à l'intérieur de celui-ci, le contenant. Curieusement, cela ne s'applique pas lorsque la sélection commence before l'élément, cependant, ce qui explique probablement pourquoi aucun navigateur ne le prend actuellement en charge. (Internet Explorer et les versions antérieures de Microsoft Edge le prenaient auparavant en charge sous le couvert de user-select: element.)

Avec user-select: all, la sélection d'une partie du contenu de l'élément entraîne la sélection automatique de la totalité de celui-ci. C'est tout ou rien, ce qui est très intransigeant mais utile dans des circonstances où les utilisateurs sont plus susceptibles de copier du contenu dans leur presse-papiers (par exemple, partager et intégrer des liens, des extraits de code, etc.). Au lieu de double-cliquer, les utilisateurs n'auront qu'à cliquer une fois pour que le contenu soit automatiquement sélectionné.

Soyez prudent, cependant, car ce n'est pas toujours la fonctionnalité que vous pensez. Que se passe-t-il si les utilisateurs souhaitent uniquement sélectionner partie du contenu (par exemple, uniquement la partie nom de la police d'un extrait Google Fonts ou une partie d'un extrait de code) ? C'est quand même mieux à gérer »copier dans le presse-papier” en utilisant JavaScript dans de nombreux scénarios.

Une meilleure application de user-select: all est de s'assurer que les citations sont copiées entièrement et avec exactitude.

Le comportement de user-select: auto (la valeur initiale de user-select) dépend de l'élément et de son utilisation. Vous pouvez en savoir plus à ce sujet dans notre almanach.

Passons maintenant à l'exploration des cas d'utilisation de user-select: none...

Suppression du non-texte de la sélection

Lorsque vous copiez le contenu d'une page Web, il s'agit probablement d'un article ou d'un autre type de contenu long, n'est-ce pas ? Vous ne voulez probablement pas que votre sélection inclue des images, des emoji (qui peuvent parfois être copiés sous forme de texte, par exemple ":thinkingface:"), et d'autres choses que vous pourriez vous attendre à trouver enveloppées dans un <aside> élément (par exemple, des appels à l'action dans l'article, des publicités ou autre chose qui ne fait pas partie du contenu principal).

Pour empêcher quelque chose d'être inclus dans les sélections, assurez-vous qu'il est enveloppé dans un élément HTML, puis appliquez user-select: none à lui:

<p>lorem <span style="user-select: none">🤔</span> ipsum</p>

<aside style="user-select: none">
  <h1>Heading</h1>
  <p>Paragraph</p>
  <a>Call to action</a>
</aside>

Dans des scénarios comme celui-ci, nous ne désactivons pas la sélection, mais plutôt l'optimisation ce. Il convient également de mentionner que sélectionner ne signifie pas nécessairement copier - de nombreux lecteurs (y compris moi-même) aiment sélectionner le contenu au fur et à mesure qu'ils le lisent afin qu'ils puissent se rappeler où ils se trouvent (comme un signet), une autre raison d'optimiser plutôt que de désactiver complètement.

Empêcher la sélection accidentelle

Appliquer user-select: none aux liens qui ressemblent à des boutons (par exemple <a href="/fr/whatever" class="button">Click Me!</a>).

Il n'est pas possible de sélectionner le contenu textuel d'un <button> or <input type="submit"> parce que, eh bien, pourquoi le feriez-vous? Cependant, ce comportement ne s'applique pas aux liens car ils font traditionnellement partie d'un paragraphe qui doit être sélectionnable.

C'est suffisant.

On pourrait argumenter que faire ressembler les liens à des boutons est un anti-modèle, mais peu importe. Ça ne casse pas Internet, n'est-ce pas ? Ce navire a de toute façon navigué, donc si vous utilisez des liens conçus pour ressembler à des boutons, ils doivent imiter le comportement des boutons, non seulement pour des raisons de cohérence, mais aussi pour empêcher les utilisateurs de sélectionner accidentellement le contenu au lieu de déclencher l'interaction.

Je suis certainement enclin à sélectionner des choses accidentellement puisque j'utilise mon ordinateur portable au lit plus que je ne veux l'admettre. De plus, il existe plusieurs conditions médicales qui peuvent affecter le contrôle et la coordination, transformant un clic intentionnel en un glissement/sélection involontaire, il y a donc des problèmes d'accessibilité qui peuvent être résolus avec user-select trop.

Les interactions qui nécessitent de faire glisser (intentionnellement) existent aussi bien sûr (par exemple dans les jeux par navigateur), mais elles sont rares. Pourtant, cela montre simplement que user-select a en fait pas mal de cas d'utilisation.

Éviter le vol de contenu payant

Le contenu payant reçoit beaucoup de haine, mais si vous sentez que vous devez protéger votre contenu, c'est votre contenu - personne n'a le droit de le voler simplement parce qu'il ne croit pas qu'il devrait payer pour cela.

Si vous souhaitez emprunter cette voie, il existe de nombreuses façons de rendre plus difficile pour les utilisateurs de contourner les paywalls (ou de manière similaire, de copier du contenu protégé par le droit d'auteur tel que le travail publié d'autrui).

Brouiller le contenu avec CSS :

article { filter: blur(<radius>); }

Désactivation des raccourcis clavier pour DevTools :

document.addEventListener("keydown", function (e) {
  if (e.keyCode == 123) e.preventDefault();
  else if ((e.ctrlKey || e.metaKey) && e.altKey && e.keyCode == 73) e.preventDefault();
  else if ((e.ctrlKey || e.metaKey) && e.altKey && e.keyCode == 74) e.preventDefault();
  else if ((e.ctrlKey || e.metaKey) && e.altKey && e.keyCode == 85) e.preventDefault();
});

Désactivation de l'accès à DevTools via le menu contextuel en désactivant le menu contextuel lui-même :

document.addEventListener("contextmenu", e => e.preventDefault())

Et bien sûr, pour empêcher les utilisateurs de copier le contenu lorsqu'ils ne sont pas autorisés à le lire à la source, appliquez user-select: none:

<article style="user-select: none">

D'autres cas d'utilisation ?

Ce sont les trois cas d'utilisation auxquels je pourrais penser pour empêcher la sélection de texte. Plusieurs autres m'ont traversé l'esprit, mais ils semblaient tous exagérés. Mais qu'en est-il de vous ? Avez-vous dû désactiver la sélection de texte sur quoi que ce soit ? J'aimerais savoir!