OUJOOD.COM
Tutoriel sur la propriété CSS user-select
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.
Syntaxe générale de la propriété CSS user-select
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" |
Valeurs possibles de la propriété CSS user-select
Les valeurs possibles pour la propriété user-select sont :
- none : empêche la sélection de texte sur l'élément.
- text : autorise la sélection de texte sur l'élément.
- auto : laisse le comportement de sélection par défaut du navigateur.
- all : la sélection du texte se fait en un seul clic au lieu d'un double-clic
Exemples pratiques d'utilisation de la propriété CSS user-select
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.
Autre exemple
<!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>
Astuces et conseils d'utilisation de la propriété CSS user-select
- Utilisez la valeur none pour empêcher la copie de texte dans certains éléments sensibles, comme les boutons ou les en-têtes.
- Évitez d'utiliser la désactivation de la sélection de texte de manière abusive, car cela peut perturber l'expérience de l'utilisateur.
- La valeur par défaut de user-select est généralement text, il est donc rarement nécessaire de spécifier explicitement cette valeur.
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.
Prise en charge de la propriété dans les navigateurs
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- |