Când este OK să dezactivezi selecția textului?

Folosind CSS, este posibil să împiedicați utilizatorii să selecteze text dintr-un element folosind user-select: none. Acum, este de înțeles de ce acest lucru ar putea fi considerat „controversat”. Vreau să spun, să dezactivăm comportamentele standard ale utilizatorilor? În general, nu, nu ar trebui să facem asta. Dar dezactivarea selectării textului are unele cazuri de utilizare legitime (deși rare)? Așa cred.

În acest articol vom explora aceste cazuri de utilizare și vom arunca o privire asupra modului în care le putem folosi user-select: none pentru a îmbunătăți (nu a împiedica) experiențele utilizatorilor. De asemenea, nu valorează nimic user-select proprietatea are si alte valori in afara none care poate fi folosit pentru a modifica comportamentul selectării textului, mai degrabă decât pentru a o dezactiva complet și o altă valoare care chiar impune selectarea textului, așa că vom arunca o privire și asupra acestora.

Posibil user-select Valorile

Să începem lucrurile trecând prin diferite user-select valorile și ceea ce fac.

Aplicarea user-select: none; la un element înseamnă că conținutul său text și conținutul text imbricat nu vor fi selectabile funcțional sau selectabile vizual (adică ::selection nu va funcționa). Dacă ar fi să faceți o selecție care conține conținut neselectabil, conținutul neselectabil ar fi omis din selecție, deci este destul de bine implementat. Și sprijinul este grozav.

Negativ, user-select: text face conținutul selectabil. Veți folosi această valoare pentru a suprascrie user-select: none.

user-select: contain este unul interesant. Aplicarea acesteia înseamnă că, dacă o selecție începe în cadrul elementului, atunci trebuie să se termine și în el, conținând-o. În mod ciudat, acest lucru nu se aplică atunci când începe selecția înainte elementul, totuși, motiv pentru care niciun browser nu îl acceptă în prezent. (Internet Explorer și versiunile anterioare ale Microsoft Edge îl acceptau anterior sub pretextul user-select: element.)

cu user-select: all, selectarea unei părți din conținutul elementului are ca rezultat selectarea completă a acestuia în mod automat. Este totul sau nimic, ceea ce este foarte fără compromisuri, dar util în circumstanțe în care utilizatorii sunt mai predispuși să copieze conținut în clipboard (de exemplu, partajarea și încorporarea de linkuri, fragmente de cod etc.). În loc să facă dublu clic, utilizatorii vor trebui să facă clic o singură dată pentru ca conținutul să fie selectat automat.

Fii atent, totuși, deoarece aceasta nu este întotdeauna caracteristica pe care o crezi. Ce se întâmplă dacă utilizatorii doresc doar să selecteze parte a conținutului (de exemplu, doar o parte a numelui fontului dintr-un fragment Google Fonts sau o parte a unui fragment de cod)? Este încă mai bine să te descurci”copiați în clipboard” folosind JavaScript în multe scenarii.

O mai bună aplicare a user-select: all este de a vă asigura că citatele sunt copiate în întregime și cu acuratețe.

Comportamentul user-select: auto (valoarea inițială a user-select) depinde de element și de modul în care este utilizat. Puteți afla mai multe despre asta în almanahul nostru.

Acum să trecem la explorarea cazurilor de utilizare pentru user-select: none...

Eliminarea non-textului din selecție

Când copiați conținut dintr-o pagină web, probabil că este dintr-un articol sau dintr-un alt tip de conținut lung, nu? Probabil că nu doriți ca selecția dvs. să includă imagini, emoji (care se pot copia uneori ca text, de exemplu „:thinkingface:”) și alte lucruri pe care v-ați aștepta să le găsiți învelite într-un <aside> element (de exemplu, îndemnuri în articol, anunțuri sau altceva care nu face parte din conținutul principal).

Pentru a preveni ca ceva să fie inclus în selecții, asigurați-vă că este împachetat într-un element HTML și apoi aplicați user-select: none la aceasta:

<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>

În scenarii ca acesta, nu dezactivăm selecția, ci mai degrabă optimizarea aceasta. De asemenea, merită menționat faptul că selectarea nu înseamnă neapărat copiere - multor cititori (inclusiv mie) le place să selecteze conținutul pe măsură ce îl citesc, astfel încât să își poată aminti unde se află (precum un marcaj), un alt motiv pentru a optimiza mai degrabă decât a dezactiva complet.

Prevenirea selecției accidentale

Aplică user-select: none la linkuri care arată ca niște butoane (de ex <a href="/ro/whatever" class="button">Click Me!</a>).

Nu este posibil să selectați conținutul text al unui <button> or <input type="submit"> pentru că, ei bine, de ce ai face-o? Cu toate acestea, acest comportament nu se aplică link-urilor, deoarece în mod tradițional ele fac parte dintr-un paragraf care ar trebui să fie selectabil.

Destul de corect.

Am putea argumenta că a face linkurile să arate ca niște butoane este un anti-model, dar in fine. Nu sparge internetul, nu? Acea navă a navigat oricum, așa că dacă utilizați linkuri concepute pentru a arăta ca butoane, atunci acestea ar trebui să imite comportamentul butoanelor, nu doar pentru coerență, ci pentru a preveni utilizatorii să selecteze accidental conținutul în loc să declanșeze interacțiunea.

Sunt cu siguranță predispus să selectez lucruri accidental, deoarece îmi folosesc laptopul în pat mai mult decât vreau să recunosc. În plus, există mai multe afecțiuni medicale care pot afecta controlul și coordonarea, transformând un clic intenționat într-o glisare/selecție neintenționată, deci există probleme de accesibilitate care pot fi abordate cu user-select prea.

Desigur, există și interacțiuni care necesită tragere (intenționat) (de exemplu, în jocurile cu browser), dar acestea sunt mai puțin frecvente. Totuși, arată doar asta user-select are de fapt destul de multe cazuri de utilizare.

Evitarea furtului de conținut cu wallwall

Conținutul cu pereți de plată primește multă ură, dar dacă simți că trebuie să-ți protejezi conținutul, acesta este conținutul tău - nimeni nu are dreptul să-l fure doar pentru că nu cred că ar trebui să plătească pentru el.

Dacă doriți să mergeți pe această cale, există multe modalități de a face mai dificilă pentru utilizatori să ocolească pereții de plată (sau, în mod similar, să copiați conținut protejat prin drepturi de autor, cum ar fi lucrările publicate ale altora).

Estomparea conținutului cu CSS:

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

Dezactivarea comenzilor rapide de la tastatură pentru 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();
});

Dezactivarea accesului la DevTools prin meniul contextual prin dezactivarea meniului contextual în sine:

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

Și, desigur, pentru a împiedica utilizatorii să copieze conținutul atunci când nu au voie să-l citească la sursă, aplicând user-select: none:

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

Alte cazuri de utilizare?

Acestea sunt cele trei cazuri de utilizare la care m-aș putea gândi pentru a preveni selecția textului. Alții mi-au trecut prin minte, dar toate păreau o întindere. Dar ce zici de tine? A trebuit să dezactivați selecția textului pentru ceva? As vrea sa stiu!