Milloin tekstin valinta voidaan poistaa käytöstä?

CSS:n avulla on mahdollista estää käyttäjiä valitsemasta tekstiä elementin sisällä käyttämällä user-select: none. Nyt on ymmärrettävää, miksi sen tekemistä voidaan pitää "kiistanalaisena". Tarkoitan, shouldnt poistammeko normaalit käyttäjäkäyttäytymiset käytöstä? Yleisesti ottaen ei, meidän ei pitäisi tehdä niin. Mutta onko tekstin valinnan poistamisella joitain oikeutettuja (vaikkakin harvinaisia) käyttötapauksia? Luulen niin.

Tässä artikkelissa tutkimme näitä käyttötapauksia ja katsomme, miten voimme käyttää niitä user-select: none parantaa (ei estää) käyttökokemusta. Se ei myöskään ole minkään arvoinen, että user-select omaisuudella on muitakin arvoja none jota voidaan käyttää muuttamaan tekstin valinnan käyttäytymistä sen sijaan, että se poistetaan kokonaan käytöstä, ja toinen arvo, joka jopa pakko tehdä tekstivalinta, joten tarkastelemme myös niitä.

mahdollinen user-select arvot

Aloitetaan asiat käymällä läpi erilaisia user-select arvot ja mitä he tekevät.

Hakeminen user-select: none; elementille tarkoittaa, että sen tekstisisältö ja sisäkkäinen tekstisisältö eivät ole toiminnallisesti tai visuaalisesti valittavissa (esim. ::selection ei toimi). Jos tekisit valinnan, joka sisältää ei-valittavissa olevaa sisältöä, ei-valittavissa oleva sisältö jätettäisiin pois valinnasta, joten se on toteutettu melko hyvin. Ja tuki on mahtavaa.

Haitallisesti, user-select: text tekee sisällön valittavissa. Käytät tätä arvoa korvataksesi user-select: none.

user-select: contain on mielenkiintoinen sellainen. Sen soveltaminen tarkoittaa, että jos valinta alkaa elementin sisällä, sen on myös päätyttävä siihen sisältäen sen. Tämä ei omituisesti päde, kun valinta alkaa ennen elementti kuitenkin, minkä vuoksi yksikään selain ei tällä hetkellä tue sitä. (Internet Explorer ja aiemmat Microsoft Edgen versiot tukivat sitä aiemmin varjolla user-select: element.)

Kanssa user-select: all, jos valitset osan elementin sisällöstä, se kaikki valitaan automaattisesti. Kaikki tai ei mitään, mikä on erittäin tinkimätöntä, mutta hyödyllistä tilanteissa, joissa käyttäjät todennäköisemmin kopioivat sisältöä leikepöydälleen (esim. linkkien jakaminen ja upottaminen, koodinpätkät jne.). Kaksoisnapsautuksen sijaan käyttäjien tarvitsee napsauttaa vain kerran, jotta sisältö valitaan automaattisesti.

Ole kuitenkin varovainen, sillä tämä ei aina ole se ominaisuus, jota luulet sen olevan. Entä jos käyttäjät haluavat vain valita osa sisällöstä (esim. vain Google Fonts -koodinpätkän kirjasimen nimen osa tai koodinpätkän yksi osa)? On silti parempi hoitaa”Kopioi leikepöydälle" käyttää JavaScriptiä monissa skenaarioissa.

Parempi sovellus user-select: all on varmistaa, että lainaukset kopioidaan kokonaan ja tarkasti.

Käyttäytyminen user-select: auto (alkuarvo user-select) riippuu elementistä ja siitä, miten sitä käytetään. Tästä voit lukea lisää osoitteesta meidän almanakkamme.

Siirrytään nyt käyttötapausten tutkimiseen user-select: none...

Ei-tekstin poistaminen valinnasta

Kun kopioit sisältöä verkkosivulta, se on luultavasti artikkelista tai muusta pitkäkestoisesta sisällöstä, eikö niin? Et todennäköisesti halua, että valintasi sisältää kuvia, hymiöitä (jotka voivat toisinaan kopioida tekstinä, esim. ":thinkingface:") ja muita asioita, joita saatat odottaa käärittynä <aside> elementti (esim. artikkelin sisäiset toimintakehotukset, mainokset tai jokin muu, joka ei kuulu pääsisältöön).

Jotta jotain ei sisälly valintoihin, varmista, että se on kääritty HTML-elementtiin ja käytä sitten user-select: none sille:

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

Tällaisissa skenaarioissa emme poista valintaa käytöstä, vaan pikemminkin optimoimalla se. On myös syytä mainita, että valitseminen ei välttämättä tarkoita kopioimista – monet lukijat (mukaan lukien minä) haluavat valita sisältöä lukiessaan, jotta he muistavat missä he ovat (kuten kirjanmerkki), mikä on toinen syy optimointiin sen sijaan, että se poistettaisiin kokonaan käytöstä.

Estää tahattoman valinnan

käyttää user-select: none linkkeihin, jotka näyttävät painikkeilta (esim <a href="/fi/whatever" class="button">Click Me!</a>).

Ei ole mahdollista valita a:n tekstisisältöä <button> or <input type="submit"> koska no, miksi tekisit? Tämä toiminta ei kuitenkaan koske linkkejä, koska perinteisesti ne ovat osa kappaletta, jonka pitäisi olla valittavissa.

Ymmärrän kyllä.

Voisimme väittää siitä linkkien saaminen näyttämään painikkeilta on anti-mallia, mutta ihan sama. Se ei katkaise Internetiä, eihän? Laiva on joka tapauksessa purjehtinut, joten jos käytät linkkejä, jotka on suunniteltu näyttämään painikkeilta, niiden tulee jäljitellä painikkeiden toimintaa, ei vain johdonmukaisuuden vuoksi, vaan myös estääkseen käyttäjiä valitsemasta sisältöä vahingossa vuorovaikutuksen käynnistämisen sijaan.

Olen varmasti taipuvainen valitsemaan asioita vahingossa, koska käytän kannettavaa tietokonettani sängyssä enemmän kuin haluan myöntää. Lisäksi on useita lääketieteellisiä tiloja, jotka voivat vaikuttaa hallintaan ja koordinaatioon ja muuttaa aiotusta napsautuksesta tahattomaksi vetämällä/valinnan, joten käytettävyyteen liittyviä ongelmia voidaan ratkaista user-select liikaa.

Vuorovaikutuksia, jotka vaativat (tahallisesti) vetämistä, on myös olemassa (esim. selainpeleissä), mutta ne ovat harvinaisia. Silti se vain osoittaa sen user-select sillä on itse asiassa aika monta käyttötapausta.

Maksumuurin sisällön varkauksien välttäminen

Maksumuurisisältö saa paljon vihaa, mutta jos sinusta tuntuu, että sinun on suojeltava sisältöäsi, se on sinun sisältöäsi – kenelläkään ei ole oikeutta varastaa sitä vain siksi, että he eivät usko, että heidän pitäisi maksaa siitä.

Jos haluat mennä tälle tielle, on monia tapoja vaikeuttaa käyttäjien ohittamista maksumuureista (tai vastaavasti tekijänoikeudella suojatun sisällön, kuten muiden julkaistujen teosten, kopioimisesta).

Sisällön hämärtäminen CSS:llä:

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

DevToolsin pikanäppäinten poistaminen käytöstä:

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();
});

DevToolsin käytön estäminen kontekstivalikon kautta poistamalla itse kontekstivalikko käytöstä:

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

Ja tietysti estää käyttäjiä kopioimasta sisältöä, kun he eivät saa lukea sitä lähteessä, hakemalla user-select: none:

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

Muita käyttötapauksia?

Nämä ovat kolme käyttötapausta, joita voisin ajatella tekstin valinnan estämiseksi. Useat muut kävivät mielessäni, mutta ne kaikki vaikuttivat venyttelyltä. Mutta entä sinä? Oletko joutunut poistamaan tekstin valinnan jostain? Haluaisin tietää!