Når er det OK å deaktivere tekstvalg?

Ved å bruke CSS er det mulig å hindre brukere i å velge tekst i et element ved å bruke user-select: none. Nå er det forståelig hvorfor å gjøre det kan betraktes som "kontroversielt". Jeg mener, bør vi deaktiverer standard brukeratferd? Generelt sett, nei, vi burde ikke gjøre det. Men har deaktivering av tekstvalg noen legitime (om enn sjeldne) brukstilfeller? Jeg tror det.

I denne artikkelen skal vi utforske disse brukstilfellene og ta en titt på hvordan vi kan bruke user-select: none å forbedre (ikke hindre) brukeropplevelser. Det er heller ingenting verdt at user-select eiendom har andre verdier i tillegg none som kan brukes til å endre oppførselen til tekstvalg i stedet for å deaktivere det helt, og en annen verdi som til og med håndhever tekstvalg, så vi skal også ta en titt på dem.

Mulig user-select verdier

La oss sette i gang ting ved å gå gjennom de forskjellige user-select verdier og hva de gjør.

påføring user-select: none; til et element betyr at dets tekstinnhold og nestede tekstinnhold ikke vil være funksjonelt valgbart eller visuelt valgbart (dvs. ::selection vil ikke fungere). Hvis du skulle gjøre et utvalg som inneholdt noe ikke-valgbart innhold, ville det ikke-valgbare innholdet bli utelatt fra utvalget, så det er ganske godt implementert. Og støtten er stor.

Ugunstig, user-select: text gjør innholdet valgbart. Du vil bruke denne verdien til å overskrive user-select: none.

user-select: contain er en interessant en. Å bruke det betyr at hvis et utvalg begynner i elementet, må det også slutte i det, inneholde det. Dette gjelder merkelig nok ikke når utvalget begynner før du elementet, men det er sannsynligvis grunnen til at ingen nettlesere for øyeblikket støtter det. (Internet Explorer og tidligere versjoner av Microsoft Edge støttet det tidligere under dekke av user-select: element.)

Med user-select: all, valg av en del av elementets innhold resulterer i at alt blir valgt automatisk. Det er alt eller ingenting, noe som er veldig kompromissløst, men nyttig i omstendigheter der brukere er mer sannsynlig å kopiere innhold til utklippstavlen (f.eks. deling og innbygging av lenker, kodebiter, etc.). I stedet for å dobbeltklikke, trenger brukere bare å klikke én gang for at innholdet skal velges automatisk.

Vær imidlertid forsiktig, siden dette ikke alltid er funksjonen du tror det er. Hva om brukere bare vil velge del av innholdet (f.eks. bare skriftnavndelen av en Google Fonts-kodebit eller én del av en kodebit)? Det er fortsatt bedre å håndtere”kopiere til utklippstavle" ved å bruke JavaScript i mange scenarier.

En bedre anvendelse av user-select: all er å sikre at sitater kopieres fullstendig og nøyaktig.

Oppførselen til user-select: auto (startverdien av user-select) avhenger av elementet og hvordan det brukes. Du kan finne ut mer om dette i almanakken vår.

La oss nå gå til å utforske brukstilfeller for user-select: none...

Fjerner ikke-tekst fra utvalget

Når du kopierer innhold fra en nettside, er det sannsynligvis fra en artikkel eller en annen type langformatinnhold, ikke sant? Du vil sannsynligvis ikke at utvalget ditt skal inkludere bilder, emoji (som noen ganger kan kopieres som tekst, f.eks. ":tenkende ansikt:") og andre ting du kan forvente å finne pakket inn i en <aside> element (f.eks. handlingsoppfordringer i artikkel, annonser eller noe annet som ikke er en del av hovedinnholdet).

For å forhindre at noe blir inkludert i valg, må du sørge for at det er pakket inn i et HTML-element og deretter bruke user-select: none til det:

<p>lorem <span style="user-select: none">🤔</span> ipsum</p>

<aside style="user-select: none">
  <h1>Heading</h1>
  <p>Paragraph</p>
  <a>Call to action</a>
</aside>

I scenarier som dette deaktiverer vi ikke valg, men snarere optimalisere den. Det er også verdt å nevne at valg ikke nødvendigvis betyr kopiering – mange lesere (inkludert meg selv) liker å velge innhold mens de leser det slik at de kan huske hvor de er (som et bokmerke), en annen grunn til å optimalisere i stedet for å deaktivere det fullstendig.

Forhindrer utilsiktet valg

Påfør user-select: none til lenker som ser ut som knapper (f.eks <a href="/no/whatever" class="button">Click Me!</a>).

Det er ikke mulig å velge tekstinnholdet i en <button> or <input type="submit"> fordi, vel, hvorfor skulle du det? Denne oppførselen gjelder imidlertid ikke for koblinger fordi de tradisjonelt sett utgjør en del av et avsnitt som skal kunne velges.

Greit nok.

Det kan vi argumentere for å få lenker til å se ut som knapper er et antimønster, men uansett. Det ødelegger ikke internett, er det? Det skipet har seilt uansett, så hvis du bruker lenker designet for å se ut som knapper, bør de etterligne oppførselen til knapper, ikke bare for konsistens, men for å forhindre at brukere ved et uhell velger innholdet i stedet for å utløse interaksjonen.

Jeg er absolutt tilbøyelig til å velge ting ved et uhell siden jeg bruker den bærbare datamaskinen i sengen mer enn jeg vil innrømme. I tillegg er det flere medisinske tilstander som kan påvirke kontroll og koordinering, og gjøre et tiltenkt klikk til et utilsiktet dra/valg, så det er tilgjengelighetsproblemer som kan løses med user-select også.

Interaksjoner som krever å dra (med vilje) eksisterer selvfølgelig også (f.eks. i nettleserspill), men disse er uvanlige. Likevel viser det bare det user-select har faktisk ganske mange bruksområder.

Unngå tyveri av innhold med betalingsmur

Innhold med betalingsmur får mye hat, men hvis du føler at du trenger å beskytte innholdet ditt, er det innholdet ditt – ingen har rett til å stjele det bare fordi de ikke tror de skal betale for det.

Hvis du ønsker å gå denne veien, er det mange måter å gjøre det vanskeligere for brukere å omgå betalingsmurer (eller på lignende måte kopiere opphavsrettsbeskyttet innhold som andres publiserte arbeid).

Uskarp innhold med CSS:

article { filter: blur(<radius>); }

Deaktivering av hurtigtastene for DevTools:

document.addEventListener("keydown", function (e) {
  if (e.keyCode == 123) e.preventDefault();
  else if ((e.ctrlKey || e.metaKey) && e.altKey && e.keyCode == 73) e.preventDefault();
  else if ((e.ctrlKey || e.metaKey) && e.altKey && e.keyCode == 74) e.preventDefault();
  else if ((e.ctrlKey || e.metaKey) && e.altKey && e.keyCode == 85) e.preventDefault();
});

Deaktivering av tilgang til DevTools via kontekstmenyen ved å deaktivere selve kontekstmenyen:

document.addEventListener("contextmenu", e => e.preventDefault())

Og selvfølgelig for å hindre brukere i å kopiere innholdet når de ikke har lov til å lese det ved kilden, ved å søke user-select: none:

<article style="user-select: none">

Noen andre brukstilfeller?

Det er de tre brukstilfellene jeg kunne tenke meg for å forhindre tekstvalg. Flere andre gikk i tankene mine, men de virket som en strekk. Men hva med deg? Har du måttet deaktivere tekstvalg på noe? Jeg skulle likt å vite!