Brugervalg - CSS-tricks

Anonim

Den user-selectejendom i CSS styrer, hvordan teksten i et element får lov til at blive valgt. For eksempel kan den bruges til at gøre tekst umulig.

.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 nyttigt i situationer, hvor du vil give brugerne en nemmere / renere kopipasta-oplevelse (ikke få dem ved et uheld til at markere ubrugelige ting som f.eks. Ikoner eller billeder). Men det er lidt buggy. Firefox håndhæver det faktum, at enhver tekst, der matcher denne vælger, ikke kan kopieres. WebKit tillader stadig, at teksten kopieres, hvis du vælger elementer omkring den.

Du kan også bruge dette til at håndhæve, 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 nogle demoer af dem:

Se demo-bruger-vælg demo af Chris Coyier (@chriscoyier) på CodePen.

Der var ingen spec for denne egenskab i et stykke tid, men er nu dækket af CSS Basic User Interface Module Level 4.

Standardværdien er auto, hvilket får valget til at ske normalt, som du forventer. ”Normalt” er lidt kompliceret. Det er værd at citere fra spec her:

  • På :: før og :: efter pseudo-elementer er den beregnede værdi none
  • Hvis elementet er et redigerbart element , er den beregnede værdicontain
  • Ellers er den beregnede værdi, hvis den beregnede værdi af brugervalg på forælderen til dette element allerall
  • Ellers er den beregnede værdi, hvis den beregnede værdi af brugervalg på forælderen til dette element noneernone
  • Ellers er den beregnede værdi text

Med andre ord kaskaderer den intelligent og nulstilles til en sensisk tilstand. Det ser ud til, at denne funktion måske kunne bruges til at gøre pseudo-elementer valgbare, men intet sidste ord endnu.

Ældre / proprietær

Firefox understøtter -moz-none, hvilket er ligesom ingen, bortset fra at det betyder, at underelementer kan tilsidesætte kaskaden og blive valgbare igen med -moz-user-select: text;Fra og med Firefox 21 opfører ingen sig som -moz-none.

Internet Explorer understøtter også en så langt proprietær værdi, elementhvor du kan vælge tekst inde i elementet, men markeringen stopper ved grænsen for dette element.

Mere information

  • MDN Docs
  • Bruger Vælg interoperabilitet

Browsersupport

Dette er specifikt til -*-user-select: none;

Denne browsersupportdata er fra Caniuse, som har flere detaljer. Et tal angiver, at browseren understøtter funktionen i den version og opefter.

Desktop

Chrome Firefox IE Edge Safari
4 * 2 * 10 * 12 * 3.1 *

Mobil / tablet

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