Vartotojo pasirinkimas - CSS-gudrybės

user-selectCSS nuosavybė kontroliuoja, kaip į elemento tekstas leidžiama būti pasirinktas. Pavyzdžiui, jis gali būti naudojamas, kad tekstas būtų nepasirenkamas.

.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 */ )

Tai naudinga tais atvejais, kai norite suteikti vartotojams lengvesnę / švaresnę kopijavimo ir įklijavimo patirtį (neturėkite, kad jie netyčia pasirinktų nenaudingus dalykus, pvz., Piktogramas ar vaizdus). Tačiau tai šiek tiek klaidinga. „Firefox“ taiko, kad negalima nukopijuoti bet kokio teksto, atitinkančio šį selektorių. „WebKit“ vis tiek leidžia nukopijuoti tekstą, jei pasirenkate aplink jį esančius elementus.

Taip pat galite tai naudoti norėdami priversti pasirinkti visą elementą:

.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 */ )

Štai keletas jų demonstracinių versijų:

Peržiūrėkite Chriso Coyier'io (@chriscoyier) „Pen“ vartotojo pasirinktą demonstracinę versiją „CodePen“.

Kurį laiką nebuvo jokių šios ypatybės specifikacijų, tačiau dabar ji taikoma CSS pagrindinio vartotojo sąsajos modulio 4 lygiui.

Numatytoji reikšmė yra auto, todėl pasirinkimas vyksta paprastai, kaip jūs tikitės. „Paprastai“ yra šiek tiek sudėtinga. Čia verta pacituoti iš specifikacijos:

Pseudo elementuose :: before ir :: after apskaičiuota vertė yra none

Jei elementas yra redaguojamas elementas , apskaičiuota vertė yracontain

Kitu atveju, jei šio elemento pagrindinėje dalyje yra „user-select all“ apskaičiuota vertė, apskaičiuota vertė yraall

Kitu atveju, jei šio elemento pagrindinėje dalyje yra „user-select none“ apskaičiuota vertė, apskaičiuota vertė yranone

Priešingu atveju apskaičiuota vertė yra text

Kitaip tariant, jis protingai pakyla ir grįžta į jausmingą būseną. Panašu, kad galbūt šią funkciją būtų galima naudoti pseudo elementų pasirinkimui, tačiau dar nėra galutinio žodžio.

Vyresnis / nuosavybės teise

„Firefox“ palaiko -moz-none, o tai yra niekas, išskyrus tai, kad tai reiškia, kad subelementai gali nepaisyti kaskados ir vėl būti pasirenkami naudojant -moz-user-select: text;„Firefox 21“ -moz-none.

„Internet Explorer“ taip pat palaiko iki šiol nuosavybės teise priklausančią vertę, elementkurioje galite pasirinkti tekstą elemento viduje, tačiau pasirinkimas sustos ties tuo elementu.

Daugiau informacijos

MDN dokumentai
„User Select“ sąveika

Naršyklės palaikymas

Tai specialiai skirta -*-user-select: none;

Šie naršyklės palaikymo duomenys yra iš „Caniuse“, kuri turi daugiau informacijos. Skaičius rodo, kad naršyklė palaiko šios ir naujesnės versijos funkciją.