CSS user-select – blokowanie zaznaczania tekstu lub mediów

Krzysiek Furtak CSS/SCSS 0 Comments

Blokowanie zaznaczania tekstu to często ważny element UI naszej strony. Jest wiele elementów naszych witryn lub aplikacji, które w interakcji z użytkownikiem nie powinny się zaznaczać. Prostym przykładem są przyciski, w wielu przypadkach elementy menu, ikonki serwowane w postaci czcionki itp.

CSS daje nam bardzo prosty sposób na zablokowanie takiego, często przypadkowego, zaznaczania elementów lub tekstów znajdujących się w tym elemencie. Z pomocą przychodzi nam właściwość user-select.

.some-class {
-moz-user-select: none; /* nie pozwól na zaznaczenia */
user-select: none; /* nie pozwól na zaznaczenia */
}

Ten kawałek kodu powie przeglądarce, że wszystko co się znajduje w elemencie oznaczonym daną klasą, nie powinno być zaznaczane przez użytkownika.

Jednak blokowanie zaznaczania tekstu to nie wszystko na co pozwala nam ta właściwość:

.control-select {
user-select: none; /* brak zaznaczenia */
user-select: auto; /* do decyzji przeglądarki */
user-select: all; /* zaznacz wszystko */
user-select: text; /* zaznacz tylko tekst */
user-select: contain; /* zaznaczenie tylko wewnątrz kontenera */
}

Jak widać powyżej blokowanie zaznaczania tekstu to nie jedyna opcja jaką daje nam ta właściwość. Za jego pomocą możemy także ograniczać możliwość zaznaczania wyłącznie do tekstu lub danego obszaru naszej strony lub aplikacji.

Sam dość często korzystam z opcji jakie daje właściwość user-select. Jeśli trafiliście na jakieś ciekawe przypadki użycia tej właściwości to dajcie znać w komentarzach 🙂