Met behulp van CSS is het mogelijk om te voorkomen dat gebruikers tekst binnen een element selecteren met behulp van user-select: none. Nu is het begrijpelijk waarom dit als "controversieel" kan worden beschouwd. Ik bedoel, moet we standaard gebruikersgedrag uitschakelen? In het algemeen, nee, dat zouden we niet moeten doen. Maar heeft het uitschakelen van tekstselectie enkele legitieme (zij het zeldzame) use-cases? Ik denk het wel.
In dit artikel zullen we deze use-cases onderzoeken en bekijken hoe we deze kunnen gebruiken user-select: none om gebruikerservaringen te verbeteren (niet te hinderen). Het is ook niets waard dat de user-select eigenschap heeft naast andere waarden none die kan worden gebruikt om het gedrag van tekstselectie te wijzigen in plaats van deze volledig uit te schakelen, en een andere waarde die zelfs handhaaft tekstselectie, dus daar gaan we ook naar kijken.
Mogelijk user-select waarden
Laten we beginnen met het doorlopen van de verschillende user-select waarden en wat ze doen.
Het toepassen van user-select: none; naar een element betekent dat de tekstinhoud en geneste tekstinhoud niet functioneel of visueel selecteerbaar zijn (bijv ::selection zal niet werken). Als je een selectie zou maken die niet-selecteerbare inhoud bevat, zou de niet-selecteerbare inhoud uit de selectie worden weggelaten, dus het is redelijk goed geïmplementeerd. En de steun is geweldig.
Deze browserondersteuningsgegevens zijn van: Kan ik gebruiken, die meer details heeft. Een getal geeft aan dat de browser de functie vanaf die versie ondersteunt.
Desktop
| Chrome | Firefox | IE | rand | Safari |
|---|---|---|---|---|
| 4* | 2* | 10 * | 12 * | 3.1 * |
Mobiel / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 105 | 104 | 2.1 * | 3.2 * |
nadelig, user-select: text maakt de inhoud selecteerbaar. Je zou deze waarde gebruiken om te overschrijven user-select: none.
user-select: contain is een interessante. Het toepassen ervan betekent dat als een selectie binnen het element begint, deze ook binnen het element moet eindigen, inclusief het. Dit is vreemd genoeg niet van toepassing wanneer de selectie begint vaardigheden het element, wat waarschijnlijk de reden is waarom geen enkele browser het momenteel ondersteunt. (Internet Explorer en eerdere versies van Microsoft Edge ondersteunden het eerder onder het mom van user-select: element.)
met user-select: allAls u een deel van de inhoud van het element selecteert, wordt alles automatisch geselecteerd. Het is alles of niets, wat zeer compromisloos is, maar nuttig in omstandigheden waarin gebruikers eerder inhoud naar hun klembord kopiëren (bijvoorbeeld het delen en insluiten van links, codefragmenten, enz.). In plaats van te dubbelklikken, hoeven gebruikers maar één keer te klikken om de inhoud automatisch te selecteren.
Wees echter voorzichtig, want dit is niet altijd de functie die u denkt dat het is. Wat als gebruikers alleen willen selecteren? deel van de inhoud (bijvoorbeeld alleen het lettertypenaamgedeelte van een Google Fonts-fragment of een deel van een codefragment)? Het is nog steeds beter te hanteren”Kopieer naar klembord” JavaScript in veel scenario's gebruiken.
Een betere toepassing van user-select: all is ervoor te zorgen dat offertes volledig en nauwkeurig worden gekopieerd.
Het gedrag van user-select: auto (de beginwaarde van user-select) hangt af van het element en hoe het wordt gebruikt. Meer hierover lees je in onze almanak.
Laten we nu eens kijken naar gebruiksscenario's voor: user-select: none...
Niet-tekst uit de selectie verwijderen
Wanneer u inhoud van een webpagina kopieert, komt dit waarschijnlijk uit een artikel of een ander type lange inhoud, toch? U wilt waarschijnlijk niet dat uw selectie afbeeldingen, emoji (die soms als tekst kan worden gekopieerd, bijv. ":thinkingface:") en andere dingen die u zou verwachten te vinden verpakt in een <aside> element (bijvoorbeeld in-article calls-to-action, advertenties of iets anders dat geen deel uitmaakt van de hoofdinhoud).
Om te voorkomen dat iets in selecties wordt opgenomen, moet u ervoor zorgen dat het is ingepakt in een HTML-element en vervolgens toepassen user-select: none naar het:
<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>In dit soort scenario's schakelen we selectie niet uit, maar eerder: optimaliseren het. Het is ook vermeldenswaard dat selecteren niet noodzakelijkerwijs kopiëren betekent - veel lezers (inclusief ikzelf) selecteren graag inhoud terwijl ze het lezen, zodat ze kunnen onthouden waar ze zijn (zoals een bladwijzer), nog een reden om te optimaliseren in plaats van volledig uit te schakelen.
Per ongeluk selecteren voorkomen
Solliciteer user-select: none naar links die eruitzien als knoppen (bijv <a href="/nl/whatever" class="button">Click Me!</a>).
Het is niet mogelijk om de tekstinhoud van a . te selecteren <button> or <input type="submit"> want, nou, waarom zou je? Dit gedrag is echter niet van toepassing op links, omdat ze traditioneel deel uitmaken van een alinea die selecteerbaar zou moeten zijn.
Eerlijk genoeg.
We zouden kunnen beweren dat links laten lijken op knoppen is een anti-patroon, maar wat maakt het uit. Het verbreekt het internet niet, toch? Dat schip is hoe dan ook gevaren, dus als je links gebruikt die zijn ontworpen om op knoppen te lijken, moeten ze het gedrag van knoppen nabootsen, niet alleen voor de consistentie, maar om te voorkomen dat gebruikers per ongeluk de inhoud selecteren in plaats van de interactie te activeren.
Ik ben zeker geneigd dingen per ongeluk te selecteren, omdat ik mijn laptop meer in bed gebruik dan ik wil toegeven. Bovendien zijn er verschillende medische aandoeningen die de controle en coördinatie kunnen beïnvloeden, waardoor een bedoelde klik verandert in een onbedoeld slepen/selecteren, dus er zijn toegankelijkheidsproblemen die kunnen worden verholpen met user-select ook.
Interacties die (opzettelijk) moeten worden gesleept, bestaan natuurlijk ook (bijvoorbeeld in browsergames), maar deze zijn zeldzaam. Toch laat het dat gewoon zien user-select heeft in feite nogal wat use-cases.
Diefstal van inhoud via een betaalmuur vermijden
Content met een betaalmuur krijgt veel haat, maar als je denkt dat je je content moet beschermen, is het jouw content - niemand heeft het recht om het te stelen alleen omdat ze niet vinden dat ze ervoor moeten betalen.
Als je deze route toch wilt volgen, zijn er veel manieren om het voor gebruikers moeilijker te maken om paywalls te omzeilen (of op vergelijkbare wijze auteursrechtelijk beschermde inhoud te kopiëren, zoals het gepubliceerde werk van anderen).
De inhoud vervagen met CSS:
article { filter: blur(<radius>); }De sneltoetsen voor DevTools uitschakelen:
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();
});Toegang tot DevTools via het contextmenu uitschakelen door het contextmenu zelf uit te schakelen:
document.addEventListener("contextmenu", e => e.preventDefault())En natuurlijk, om te voorkomen dat gebruikers de inhoud kopiëren wanneer ze deze niet bij de bron mogen lezen, is het van toepassing user-select: none:
<article style="user-select: none">Nog andere use-cases?
Dat zijn de drie use-cases die ik kon bedenken om tekstselectie te voorkomen. Verschillende anderen kwamen in me op, maar ze leken allemaal een stuk. En jij dan? Heb je tekstselectie op iets moeten uitschakelen? Ik wil graag weten!
