Výber používateľa - Triky CSS

user-selectVlastnosť CSS určuje, ako sa text v prvku nemá byť vybraná. Môže sa napríklad použiť na zrušenie výberu textu.

.row-of-icons ( -webkit-user-select: none; /* Chrome all / Safari all */ -moz-user-select: none; /* Firefox all */ -ms-user-select: none; /* IE 10+ */ user-select: none; /* Likely future */ )

Je to užitočné v situáciách, keď chcete používateľom poskytnúť jednoduchšie a čistejšie prostredie na kopírovanie a vkladanie (nechcete, aby im náhodne vybrali zbytočné veci, ako napríklad ikony alebo obrázky, výber textu). Je to však trochu chybné. Firefox presadzuje skutočnosť, že žiadny text, ktorý sa zhoduje s týmto selektorom, nemožno kopírovať. WebKit stále umožňuje kopírovanie textu, ak vyberiete prvky okolo neho.

Môžete to tiež použiť na vynútenie toho, že celý prvok dostane výber:

.force-select ( -webkit-user-select: all; /* Chrome 49+ */ -moz-user-select: all; /* Firefox 43+ */ -ms-user-select: all; /* No support yet */ user-select: all; /* Likely future */ )

Tu je niekoľko ukážok z nich:

Prezrite si ukážku pera vybratú používateľom Chrisa Coyiera (@chriscoyier) na stránke CodePen.

Už dlho neexistovali žiadne špecifikácie tejto vlastnosti, ale teraz je pokrytá modulom základného používateľského rozhrania CSS úrovne 4.

Predvolená hodnota je auto, vďaka čomu sa výber uskutoční podľa vašich očakávaní. „Normálne“ je trochu komplikované. Stojí za to citovať zo špecifikácie tu:

Na pseudoprvkoch :: before a :: after je vypočítaná hodnota none

Ak je prvok upraviteľný , vypočítaná hodnota jecontain

V opačnom prípade, ak je vypočítaná hodnota výberu používateľa na rodiči tohto prvku all, vypočítaná hodnota jeall

V opačnom prípade, ak je vypočítaná hodnota výberu používateľa na rodiči tohto prvku none, vypočítaná hodnota jenone

V opačnom prípade je vypočítaná hodnota text

Inými slovami, inteligentne kaskádovito postupuje do zmyselného stavu. Vyzerá to, že by možno táto funkcia mohla byť použitá na výber pseudo prvkov, zatiaľ však nie je k dispozícii nijaké konečné slovo.

Staršie / vlastnícke

Podporuje Firefox -moz-none, ktorý je ako žiadny, okrem toho, že to znamená, že čiastkové prvky môžu prepísať kaskádu a znova ich zvoliť pomocou -moz-user-select: text;Od verzie Firefox 21 sa nikto nespráva ako -moz-none.

Internet Explorer podporuje aj doteraz chránenú hodnotu, elementv ktorej môžete vybrať text vo vnútri prvku, ale výber sa zastaví na hranici tohto prvku.

Viac informácií

Dokumenty MDN
Interoperabilita výberu používateľov

Podpora prehľadávača

Toto je špeciálne pre -*-user-select: none;

Údaje o podpore tohto prehľadávača sú od spoločnosti Caniuse, ktorá obsahuje viac podrobností. Číslo označuje, že prehliadač podporuje túto funkciu v danej verzii alebo vyššej.