LabEx
EntrerRejoindre

Désactiver la sélection de contenu avec CSS

Beginner

This tutorial is from open-source community. Access the source code

Introduction

Dans ce laboratoire, nous allons plonger dans la programmation CSS et explorer la propriété user-select. Ce laboratoire vise à vous apprendre à désactiver la sélection de certains éléments de votre page web, ce qui peut être utile pour empêcher les utilisateurs de copier le contenu. À la fin de ce laboratoire, vous aurez une meilleure compréhension de la manière d'utiliser la propriété user-select et de son impact sur la conception web.

Ceci est un Guided Lab, qui fournit des instructions étape par étape pour vous aider à apprendre et à pratiquer. Suivez attentivement les instructions pour compléter chaque étape et acquérir une expérience pratique. Les données historiques montrent que c'est un laboratoire de niveau débutant avec un taux de réussite de 88%. Il a reçu un taux d'avis positifs de 100% de la part des apprenants.

Désactiver la sélection

index.html et style.css ont déjà été fournis dans la machine virtuelle.

Pour rendre le contenu d'un élément non sélectionnable, ajoutez la propriété CSS user-select: none au sélecteur. Cependant, cette méthode n'est pas entièrement sécurisée pour empêcher les utilisateurs de copier le contenu.

Exemple :

<p>Vous pouvez me sélectionner.</p>
<p class="unselectable">Vous ne pouvez pas me sélectionner!</p>

.unselectable {
  user-select: none;
}

Veuillez cliquer sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez actualiser l'onglet Web 8080 pour prévisualiser la page web.

Sommaire

Félicitations! Vous avez terminé le laboratoire Désactiver la sélection. Vous pouvez pratiquer d'autres laboratoires dans LabEx pour améliorer vos compétences.