När är det OK att inaktivera textval?

Med CSS är det möjligt att förhindra användare från att markera text i ett element med hjälp av user-select: none. Nu är det förståeligt varför det kan anses vara "kontroversiellt". Jag menar, skall vi inaktiverar vanliga användarbeteenden? Generellt sett nej, vi borde inte göra det. Men har inaktivering av textval några legitima (om än sällsynta) användningsfall? Jag tror det.

I den här artikeln kommer vi att utforska dessa användningsfall och ta en titt på hur vi kan använda dem user-select: none för att förbättra (inte hindra) användarupplevelser. Det är inte heller värt något att user-select egendom har andra värden none som kan användas för att ändra beteendet för textval i stället för att inaktivera det helt, och ett annat värde som till och med upprätt texturval, så vi ska också ta en titt på dem.

Möjligt user-select värden

Låt oss sätta igång saker och ting genom att gå igenom de olika user-select värderingar och vad de gör.

Tillämpa user-select: none; till ett element betyder att dess textinnehåll och kapslade textinnehåll inte kommer att vara funktionellt valbart eller visuellt valbart (dvs. ::selection kommer inte att fungera). Om du skulle göra ett urval som innehöll något icke-valbart innehåll, skulle det icke-valbara innehållet utelämnas från urvalet, så det är ganska väl implementerat. Och stödet är stort.

negativt, user-select: text gör innehållet valbart. Du skulle använda detta värde för att skriva över user-select: none.

user-select: contain är en intressant sådan. Att tillämpa det betyder att om en markering börjar inom elementet måste den också sluta i det, innehålla det. Detta gäller konstigt nog inte när urvalet börjar innan elementet dock, vilket förmodligen är anledningen till att ingen webbläsare för närvarande stöder det. (Internet Explorer och tidigare versioner av Microsoft Edge stödde det tidigare under sken av user-select: element.)

Med user-select: all, att välja en del av elementets innehåll resulterar i att allt väljs automatiskt. Det är allt eller inget, vilket är väldigt kompromisslöst men användbart under omständigheter där användare är mer benägna att kopiera innehåll till sitt urklipp (t.ex. delning och inbäddning av länkar, kodavsnitt, etc.). Istället för att dubbelklicka behöver användarna bara klicka en gång för att innehållet ska väljas automatiskt.

Var dock försiktig, eftersom detta inte alltid är den funktion du tror att det är. Vad händer om användare bara vill välja del av innehållet (t.ex. endast teckensnittsnamnet i ett Google Fonts-kodavsnitt eller en del av ett kodavsnitt)? Det är fortfarande bättre att hantera”Kopiera till Urklipp" använder JavaScript i många scenarier.

En bättre tillämpning av user-select: all är att säkerställa att offerter kopieras helt och korrekt.

Uppförandet av user-select: auto (startvärdet av user-select) beror på elementet och hur det används. Du kan ta reda på mer om detta i vår almanacka.

Låt oss nu övergå till att utforska användningsfall för user-select: none.

Ta bort icke-text från markeringen

När du kopierar innehåll från en webbsida är det förmodligen från en artikel eller någon annan typ av långformat innehåll, eller hur? Du vill förmodligen inte att ditt val ska innehålla bilder, emoji (som ibland kan kopieras som text, t.ex. ":thinkingface:") och andra saker som du kan förvänta dig att hitta inslagna i en <aside> element (t.ex. uppmaningar till handling i artikeln, annonser eller något annat som inte är en del av huvudinnehållet).

För att förhindra att något inkluderas i urval, se till att det är inslaget i ett HTML-element och tillämpa sedan user-select: none till 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 sådana här scenarier inaktiverar vi inte urval, utan snarare optimera Det. Det är också värt att nämna att markering inte nödvändigtvis betyder kopiering – många läsare (inklusive jag själv) gillar att välja innehåll när de läser det så att de kan komma ihåg var de är (som ett bokmärke), en annan anledning att optimera snarare än att inaktivera det helt.

Förhindrar oavsiktligt val

Ansök user-select: none till länkar som ser ut som knappar (t.ex <a href="/sv/whatever" class="button">Click Me!</a>).

Det är inte möjligt att välja textinnehållet i en <button> or <input type="submit"> för, ja, varför skulle du det? Detta beteende gäller dock inte länkar eftersom de traditionellt utgör en del av ett stycke som bör vara valbart.

Rimligt nog.

Det skulle vi kunna argumentera för att få länkar att se ut som knappar är ett antimönster, men vadsomhelst. Det slår inte sönder internet, eller hur? Det där skeppet har seglat ändå, så om du använder länkar som är designade för att se ut som knappar bör de efterlikna beteendet hos knappar, inte bara för konsekvens utan för att förhindra att användare av misstag väljer innehållet istället för att utlösa interaktionen.

Jag är verkligen benägen att välja saker av misstag eftersom jag använder min bärbara dator i sängen mer än jag vill erkänna. Dessutom finns det flera medicinska tillstånd som kan påverka kontroll och koordination, vilket gör ett avsett klick till ett oavsiktligt drag/val, så det finns tillgänglighetsproblem som kan åtgärdas med user-select också.

Interaktioner som kräver dragning (avsiktligt) finns förstås också (t.ex. i webbläsarspel), men dessa är ovanliga. Ändå visar det bara det user-select har faktiskt en hel del användningsfall.

Undviker betalväggsstöld av innehåll

Innehåll med betalvägg får mycket hat, men om du känner att du behöver skydda ditt innehåll är det ditt innehåll – ingen har rätt att stjäla det bara för att de inte tror att de ska betala för det.

Om du vill gå den här vägen finns det många sätt att göra det svårare för användare att kringgå betalväggar (eller på liknande sätt kopiera upphovsrättsskyddat innehåll som andras publicerade verk).

Sudda ut innehållet med CSS:

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

Inaktivera kortkommandon för 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();
});

Inaktivera åtkomst till DevTools via snabbmenyn genom att inaktivera själva snabbmenyn:

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

Och naturligtvis för att förhindra användare från att kopiera innehållet när de inte får läsa det vid källan, genom att ansöka user-select: none:

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

Några andra användningsfall?

Det är de tre användningsfallen jag skulle kunna tänka mig för att förhindra texturval. Flera andra slog mig, men de verkade alla som en sträcka. Men du då? Har du behövt inaktivera textval på något? Jag skulle vilja veta!