Właściwość user-select w CSS3 pozwala twórcom stron internetowych kontrolować, czy i w jaki sposób użytkownicy mogą zaznaczać tekst na stronie. Jest to przydatne w wielu kontekstach, na przykład gdy chcemy uniemożliwić kopiowanie tekstu lub, przeciwnie, gdy chcemy umożliwić zaznaczenie tekstu dla ułatwienia kopiowania.
Jak działa user-select
Właściwość user-select przyjmuje kilka wartości:
auto: domyślne zachowanie przeglądarki,none: uniemożliwia zaznaczenie tekstu,text: pozwala na zaznaczenie tekstu,all: po jednokrotnym kliknięciu zaznacza cały tekst.
Przykład kodu
W poniższym przykładzie zobaczymy, jak zastosować różne wartości user-select do elementów na stronie. Nie użyjemy JavaScriptu, ponieważ user-select jest właściwością czysto CSS, która nie wymaga skryptów do swojego działania.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Właściwość user-select w CSS3</title>
<style>
.no-select {
user-select: none; /* Nie pozwala na zaznaczenie tekstu */
}
.text-select {
user-select: text; /* Pozwala na zaznaczenie tekstu */
}
.all-select {
user-select: all; /* Zaznacza cały tekst po jednokrotnym kliknięciu */
}
</style>
</head>
<body>
<p class="no-select">Ten tekst nie może być zaznaczony.</p>
<p class="text-select">Ten tekst może być zaznaczony.</p>
<p class="all-select">Kliknij mnie, aby zaznaczyć cały tekst.</p>
</body>
</html>
W powyższym przykładzie mamy trzy paragrafy <p>, każdy z inną klasą CSS, która stosuje różne wartości dla user-select. Dzięki temu można zobaczyć w praktyce, jak różne ustawienia wpływają na możliwość zaznaczania tekstu przez użytkownika.
Podsumowanie
Właściwość user-select w CSS3 daje deweloperom kontrolę nad tym, jak tekst może być zaznaczany na stronach internetowych. Może to być szczególnie przydatne w kontekstach, gdzie chcemy ograniczyć kopiowanie ważnych informacji lub w interfejsach użytkownika, gdzie zaznaczanie tekstu mogłoby zakłócać działanie aplikacji. Jak widać w powyższym przykładzie, implementacja tej właściwości jest prosta, ale może znacząco wpłynąć na użytkowanie strony.