Quando è possibile disabilitare la selezione del testo?

Utilizzando i CSS, è possibile impedire agli utenti di selezionare il testo all'interno di un elemento utilizzando user-select: none. Ora, è comprensibile il motivo per cui farlo potrebbe essere considerato “controverso”. Intendo, dovrebbero disabiliteremo i comportamenti standard degli utenti? In generale no non dovremmo farlo. Ma la disabilitazione della selezione del testo ha alcuni casi d'uso legittimi (anche se rari)? Credo di si.

In questo articolo esploreremo questi casi d'uso e daremo un'occhiata a come possiamo utilizzarli user-select: none per migliorare (non ostacolare) l'esperienza dell'utente. Inoltre, non vale nulla che il user-select la proprietà ha anche altri valori none che può essere utilizzato per alterare il comportamento della selezione del testo anziché disabilitarlo completamente, e un altro valore che anche fa rispettare selezione del testo, quindi daremo un'occhiata anche a quelli.

Possibile user-select valori

Diamo il via alle cose esaminando le differenze user-select valori e cosa fanno.

AMMISSIONE user-select: none; a un elemento significa che il suo contenuto testuale e il contenuto testuale nidificato non saranno selezionabili funzionalmente o visivamente (ad es. ::selection non funzionerà). Se dovessi effettuare una selezione che contenesse del contenuto non selezionabile, il contenuto non selezionabile verrebbe omesso dalla selezione, quindi è abbastanza ben implementato. E il supporto è fantastico.

Al contrario, user-select: text rende il contenuto selezionabile. Utilizzeresti questo valore per sovrascrivere user-select: none.

user-select: contain è interessante. Applicarlo significa che se una selezione inizia all'interno dell'elemento allora deve terminare anche al suo interno, contenendolo. Questo stranamente non si applica quando inizia la selezione prima l'elemento, tuttavia, motivo per cui probabilmente nessun browser attualmente lo supporta. (Internet Explorer e le versioni precedenti di Microsoft Edge lo supportavano in precedenza con il pretesto di user-select: element.)

Con user-select: all, selezionando parte del contenuto dell'elemento, l'intero contenuto verrà selezionato automaticamente. È tutto o niente, il che è molto intransigente ma utile in circostanze in cui è più probabile che gli utenti copino i contenuti negli appunti (ad esempio condividendo e incorporando collegamenti, snippet di codice, ecc.). Invece di fare doppio clic, gli utenti dovranno fare clic solo una volta affinché il contenuto venga selezionato automaticamente.

Fai attenzione, però, poiché questa non è sempre la caratteristica che pensi che sia. Cosa succede se gli utenti desiderano solo selezionare? parte del contenuto (ad esempio solo il nome del carattere, parte di uno snippet di Google Fonts o una parte di uno snippet di codice)? E’ comunque meglio gestire”copia negli appunti"utilizzando JavaScript in molti scenari.

Una migliore applicazione di user-select: all è garantire che le citazioni vengano copiate integralmente e accuratamente.

Il comportamento di user-select: auto (il valore iniziale di user-select) dipende dall'elemento e da come viene utilizzato. Puoi saperne di più su questo in il nostro almanacco.

Passiamo ora all'esplorazione dei casi d'uso per user-select: none...

Eliminazione del non testo dalla selezione

Quando copi contenuti da una pagina web, probabilmente si tratta di un articolo o di qualche altro tipo di contenuto di lunga durata, giusto? Probabilmente non vuoi che la tua selezione includa immagini, emoji (che a volte possono essere copiati come testo, ad esempio ":thinkingface:") e altre cose che potresti aspettarti di trovare racchiuse in un <aside> elemento (ad esempio inviti all'azione nell'articolo, annunci o qualcos'altro che non fa parte del contenuto principale).

Per evitare che qualcosa venga incluso nelle selezioni, assicurati che sia racchiuso in un elemento HTML e quindi applica user-select: none ad esso:

<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 scenari come questo, non stiamo disabilitando la selezione, ma piuttosto ottimizzazione Esso. Vale anche la pena ricordare che selezionare non significa necessariamente copiare: a molti lettori (incluso me) piace selezionare il contenuto mentre lo leggono in modo da poter ricordare dove si trovano (come un segnalibro), un altro motivo per ottimizzare piuttosto che disabilitare completamente.

Prevenire la selezione accidentale

APPLICA user-select: none ai collegamenti che assomigliano a pulsanti (ad es. <a href="/it/whatever" class="button">Click Me!</a>).

Non è possibile selezionare il contenuto testuale di a <button> or <input type="submit"> perché, beh, perché dovresti? Tuttavia, questo comportamento non si applica ai collegamenti perché tradizionalmente fanno parte di un paragrafo che dovrebbe essere selezionabile.

Giusto.

Potremmo discuterne far sembrare i collegamenti come pulsanti è un anti-pattern, ma comunque. Non sta distruggendo Internet, vero? Quella nave è comunque salpata, quindi se utilizzi collegamenti progettati per assomigliare a pulsanti, questi dovrebbero imitare il comportamento dei pulsanti, non solo per coerenza, ma per impedire agli utenti di selezionare accidentalmente il contenuto invece di attivare l'interazione.

Sono certamente incline a selezionare le cose accidentalmente poiché utilizzo il mio laptop a letto più di quanto voglia ammettere. Inoltre, esistono diverse condizioni mediche che possono influire sul controllo e sulla coordinazione, trasformando un clic intenzionale in un trascinamento/selezione involontario, quindi esistono problemi di accessibilità che possono essere risolti con user-select troppo.

Naturalmente esistono anche interazioni che richiedono il trascinamento (intenzionalmente) (ad esempio nei giochi per browser), ma sono rare. Eppure, lo dimostra user-select in effetti ha parecchi casi d'uso.

Evitare il furto di contenuti protetti da paywall

I contenuti protetti da paywall suscitano molto odio, ma se ritieni di dover proteggere i tuoi contenuti, sono i tuoi contenuti: nessuno ha il diritto di rubarli solo perché non crede di dover pagare per averli.

Se vuoi seguire questa strada, ci sono molti modi per rendere più difficile per gli utenti aggirare i paywall (o, allo stesso modo, copiare contenuti protetti da copyright come il lavoro pubblicato da altri).

Sfocare il contenuto con i CSS:

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

Disabilitare le scorciatoie da tastiera per 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();
});

Disabilitare l'accesso a DevTools tramite il menu contestuale disabilitando il menu contestuale stesso:

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

E, naturalmente, per impedire agli utenti di copiare il contenuto quando non sono autorizzati a leggerlo alla fonte, applicando user-select: none:

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

Altri casi d'uso?

Questi sono i tre casi d'uso a cui potrei pensare per impedire la selezione del testo. Molti altri mi sono passati per la mente, ma sembravano tutti esagerati. E tu? Hai dovuto disabilitare la selezione del testo su qualcosa? Mi piacerebbe saperlo!