Envoyer des mails
Apprenez comment utiliser la propriété user-select en CSS pour définir si le texte peut être sélectionné par les utilisateurs sur votre site web. Suivez notre guide complet pour une maîtrise totale.
Propriété CSS user-select : Contrôlez l'interaction de l'utilisateur avec le texte sur votre site
La propriété CSS user-select permet de contrôler la sélection de texte sur une page web. Elle définit si le texte peut être sélectionné par l'utilisateur ou non.
La syntaxe générale de la propriété user-select est la suivante :
selector { user-select: value; }
Le selector représente l'élément HTML auquel la propriété est appliquée, et value est la valeur spécifiée pour user-select.
Valeurs par défaut | auto |
---|---|
Inherited: | non |
Animable : | non En savoir plus sur l'animable |
Version: | CSS3 |
Syntaxe JavaScript: | object.style.userSelect="none" |
Les valeurs possibles pour la propriété user-select sont :
Voici quelques exemples pratiques d'utilisation de la propriété user-select:
/* Empêche la sélection de texte */ .no-select { user-select: none; } /* Autorise la sélection de texte */ .selectable { user-select: text; }
Dans cet exemple, la classe CSS .no-select empêche la sélection de texte sur l'élément auquel elle est appliquée, tandis que la classe CSS .selectable autorise la sélection de texte.
Exemple : Copier le code
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Tutoriel sur la propriété css user-select </title> <style> div { padding: 20px; margin: 20px; background: #eee; } .no-copy p { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .all-copy p { -webkit-user-select: all; -moz-user-select: all; -ms-user-select: all; user-select: all; } </style> </head> <body> <h2>Utilisation de la propriété user-select</h2> <div class="no-copy"> <p>Vous ne pouvez pas me copier.</p> </div> <div class="no-copy"> . <p>vous pouvez me copier accidentellement </p> . </div> <div class="all-copy"> <p>Un seul clic permet de sélectionner tout ceci.</p> </div> </body></html>
En conclusion, la propriété CSS user-select permet de contrôler la sélection de texte sur une page web. En utilisant les valeurs none, text ou auto, vous pouvez définir si le texte peut être sélectionné par l'utilisateur ou non. Veillez à utiliser cette propriété de manière judicieuse pour offrir une expérience utilisateur cohérente et conviviale.
Nous espérons que ce tutoriel vous a été utile pour comprendre la propriété CSS user-select. Avec cette connaissance, vous pouvez désormais contrôler la sélection de texte sur vos pages web, en empêchant ou en autorisant la sélection selon vos besoins. N'hésitez pas à expérimenter et à trouver les meilleures configurations pour offrir une expérience utilisateur optimale.
Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.
Les numéros suivis de -webkit- indiquent la première version qui fonctionne avec un préfixe.
Explorateur | |||||
---|---|---|---|---|---|
Verssion | 54.0 6.0 -webkit- | 79.0 10.0 -ms- | 69.0 2.0 -moz- | 3.1 -webkit- | 41.0 15.0 -webkit- |