Brukervalg - CSS-triks

Anonim

Den user-selecteiendom i CSS styrer hvordan teksten i et element er lov til å bli valgt. For eksempel kan den brukes til å gjøre tekst umulig å velge.

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

Dette er nyttig i situasjoner der du vil gi brukere en enklere / renere kopi-lim-opplevelse (ikke la dem ved et uhell tekstvelge ubrukelige ting, som ikoner eller bilder). Men det er litt buggy. Firefox håndhever det faktum at tekst som samsvarer med velgeren ikke kan kopieres. WebKit lar fremdeles kopiere teksten hvis du velger elementer rundt den.

Du kan også bruke dette for å håndheve at et helt element får valg:

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

Her er noen demoer av dem:

Se pennens brukervalg-demo av Chris Coyier (@chriscoyier) på CodePen.

Det var ingen spesifikasjoner for denne egenskapen på en god stund, men er nå dekket under CSS Basic User Interface Module Level 4.

Standardverdien er auto, noe som gjør at valget skjer normalt slik du forventer. "Normalt" er litt komplisert. Det er verdt å sitere fra spesifikasjonen her:

  • På :: før og :: etter pseudoelementer er den beregnede verdien none
  • Hvis elementet er et redigerbart element , er den beregnede verdiencontain
  • Ellers, hvis den beregnede verdien av brukervalg på overordnet til dette elementet er all, er den beregnede verdienall
  • Ellers, hvis den beregnede verdien av brukervalg på overordnet til dette elementet er none, er den beregnede verdiennone
  • Ellers er den beregnede verdien text

Med andre ord kaskaderer den intelligent og tilbakestilles til en sensuell tilstand. Det ser ut til at denne funksjonen kanskje kan brukes til å gjøre pseudoelementer valgbare, men ingen siste ord ennå.

Eldre / proprietær

Firefox støtter -moz-none, som er akkurat som ingen, bortsett fra at det betyr at underelementer kan overstyre kaskaden og bli valgbar igjen med -moz-user-select: text;fra og med Firefox 21, oppfører ingen seg som -moz-none.

Internet Explorer støtter også en så langt proprietær verdi, elementder du kan velge tekst inne i elementet, men utvalget stopper ved grensene til det elementet.

Mer informasjon

  • MDN Docs
  • Brukervalg interoperabilitet

Nettleserstøtte

Dette er spesielt for -*-user-select: none;

Disse nettleserstøttedataene er fra Caniuse, som har flere detaljer. Et tall indikerer at nettleseren støtter funksjonen i den versjonen og oppover.

Desktop

Chrome Firefox DVS Kant Safari
4 * 2 * 10 * 12 * 3,1 *

Mobil / nettbrett

Android Chrome Android Firefox Android iOS Safari
88 85 2,1 * 3,2 *