Właściwość user-select kontroluje możliwość kopiowania tekstu i wyboru obiektu przez użytkownika. Z pomocą tej właściwości można np. zablokować możliwość kopiowania treści ze strony internetowej. Właściwość ta może okazać się przydatna kiedy nie chcemy np. by ktoś kopiował treści z naszej strony.
Co znajdziesz w tym wpisie
Przyjmowane wartości
Właściwość user-select może przyjąć wartości:
- auto – domyślna wartość, zezwala na wszystko
- none – blokuje możliwość wyboru elementu np. nie można kopiować tekstu
- text – tekst można kopiować
- all – zamienia podwójne kliknięcie w obiekt na pojedyncze (nie musimy wykonywać dwu kliku by zaznaczyć fragmęt)
Przykłady działania
See the Pen bGBVLZN by Aura (@Julka85) on CodePen.dark
Interpretacja przez przeglądarki
| Właściwość | Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| user-select | 54.0 6.0 -webkit- | 10.0 -ms- | 2.0 -moz- | 3.1 -webkit- | 41.0 15.0 -webkit- |
zdarzenia myszki pointer events-css
źródła:
- https://www.w3schools.com/cssref/css3_pr_user-select.asp
- https://css-tricks.com/almanac/properties/u/user-select/
W branży IT jestem już od 2007 roku. W tym czasie zajmowałam się głównie tematyką pozycjonowania i budowy stron internetowych. Hobbistycznie zajmuje się fotografią, podróżami (głównie tymi mikro). Interesuje się mitologią (Nordycką, Grecką i Rzymską) i historią.