Wann ist es in Ordnung, Textauswahl zu deaktivieren?

Mit CSS ist es möglich, Benutzer daran zu hindern, Text innerhalb eines Elements auszuwählen, indem user-select: none verwendet wird. Nun, es ist verständlich, warum dies als „kontrovers“ angesehen werden könnte. Ich meine, *sollten* wir Standardverhalten von Benutzern deaktivieren? Im Allgemeinen nein, sollten wir das nicht tun. Aber hat das Deaktivieren der Textauswahl einige legitime (wenn auch seltene) Anwendungsfälle? Ich denke schon.

In diesem Artikel werden wir diese Anwendungsfälle untersuchen und uns ansehen, wie wir user-select: none verwenden können, um die Benutzererfahrung zu verbessern (nicht zu behindern). Es ist auch erwähnenswert, dass die user-select-Eigenschaft neben none auch andere Werte hat, die das Verhalten der Textauswahl ändern anstatt es vollständig zu deaktivieren, und einen weiteren Wert, der die Textauswahl sogar erzwingt, daher werden wir uns auch diese ansehen.

Mögliche user-select-Werte

Beginnen wir mit der Durchsicht der verschiedenen user-select-Werte und ihrer Funktionen.

Die Anwendung von user-select: none; auf ein Element bedeutet, dass sein Textinhalt und verschachtelter Textinhalt funktionell nicht auswählbar oder visuell nicht auswählbar sind (d. h. ::selection funktioniert nicht). Wenn Sie eine Auswahl treffen würden, die nicht auswählbare Inhalte enthält, würden die nicht auswählbaren Inhalte von der Auswahl ausgeschlossen, daher ist sie recht gut implementiert. Und die Unterstützung ist großartig.

Umgekehrt macht user-select: text den Inhalt auswählbar. Sie würden diesen Wert verwenden, um user-select: none zu überschreiben.

user-select: contain ist interessant. Die Anwendung bedeutet, dass, wenn eine Auswahl innerhalb des Elements beginnt, sie auch dort enden muss und es somit enthält. Dies gilt seltsamerweise nicht, wenn die Auswahl *vor* dem Element beginnt, was wahrscheinlich der Grund ist, warum kein Browser es derzeit unterstützt. (Internet Explorer und frühere Versionen von Microsoft Edge unterstützten es zuvor unter dem Namen user-select: element.)

Mit user-select: all führt die Auswahl eines Teils des Inhalts des Elements automatisch dazu, dass der gesamte Inhalt ausgewählt wird. Es ist alles oder nichts, was sehr kompromisslos, aber in Situationen nützlich ist, in denen Benutzer Inhalte wahrscheinlich in ihre Zwischenablage kopieren (z. B. Freigabe- und Einbettungslinks, Code-Schnipsel usw.). Anstatt doppelt zu klicken, müssen Benutzer nur einmal klicken, damit der Inhalt automatisch ausgewählt wird.

Seien Sie jedoch vorsichtig, da dies nicht immer das Feature ist, das Sie denken. Was ist, wenn Benutzer nur *einen Teil* des Inhalts auswählen möchten (z. B. nur den Schriftteil eines Google Fonts-Snippets oder einen Teil eines Code-Snippets)? In vielen Szenarien ist es immer noch besser, „in die Zwischenablage kopieren“ mit JavaScript zu handhaben.

Eine bessere Anwendung von user-select: all besteht darin, sicherzustellen, dass Zitate vollständig und genau kopiert werden.

Das Verhalten von user-select: auto (der ursprüngliche Wert von user-select) hängt vom Element und seiner Verwendung ab. Mehr dazu erfahren Sie in unserem Almanach.

Wenden wir uns nun der Untersuchung von Anwendungsfällen für user-select: none zu…

Entfernen von Nicht-Text-Elementen aus der Auswahl

Wenn Sie Inhalte von einer Webseite kopieren, dann wahrscheinlich von einem Artikel oder einer anderen Art von langformigem Inhalt, richtig? Sie möchten wahrscheinlich nicht, dass Ihre Auswahl Bilder, Emojis (die manchmal als Text kopiert werden können, z. B. „:thinkingface:“) und andere Dinge enthält, die Sie möglicherweise in einem <aside>-Element finden (z. B. In-Artikel-Aufrufe zum Handeln, Anzeigen oder etwas anderes, das nicht Teil des Hauptinhalts ist).

Um zu verhindern, dass etwas in Auswahlen enthalten ist, stellen Sie sicher, dass es in einem HTML-Element umschlossen ist, und wenden Sie dann user-select: none darauf an.

<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 solchen Szenarien deaktivieren wir nicht die Auswahl, sondern *optimieren* sie. Es ist auch erwähnenswert, dass Auswahl nicht unbedingt Kopieren bedeutet – viele Leser (mich eingeschlossen) wählen gerne Inhalte aus, während sie sie lesen, damit sie sich erinnern können, wo sie sind (wie ein Lesezeichen), ein weiterer Grund, stattdessen zu optimieren, anstatt vollständig zu deaktivieren.

Verhindern versehentlicher Auswahl

Wenden Sie user-select: none auf Links an, die wie Buttons aussehen (z. B. <a href="/whatever" class="button">Click Me!</a>).

Es ist nicht möglich, den Textinhalt eines <button> oder <input type="submit"> auszuwählen, denn warum sollte man das auch? Dieses Verhalten gilt jedoch nicht für Links, da sie traditionell Teil eines Absatzes sind, der auswählbar sein sollte.

Einverstanden.

Man könnte argumentieren, dass Links, die wie Buttons aussehen, ein Anti-Pattern sind, aber egal. Es macht das Internet nicht kaputt, oder? Dieses Schiff ist sowieso abgefahren, also wenn Sie Links verwenden, die wie Buttons gestaltet sind, sollten sie das Verhalten von Buttons nachahmen, nicht nur aus Konsistenzgründen, sondern um zu verhindern, dass Benutzer versehentlich den Inhalt auswählen, anstatt die Interaktion auszulösen.

Ich neige sicherlich dazu, Dinge versehentlich auszuwählen, da ich meinen Laptop im Bett mehr benutze, als ich zugeben möchte. Außerdem gibt es mehrere medizinische Zustände, die Kontrolle und Koordination beeinträchtigen können, wodurch ein beabsichtigter Klick zu einem unbeabsichtigten Ziehen/Auswählen wird, so dass es auch Zugänglichkeitsbedenken gibt, die mit user-select angegangen werden können.

Interaktionen, die Ziehen (absichtlich) erfordern, existieren natürlich auch (z. B. in Browser-Spielen), aber diese sind selten. Dennoch zeigt dies nur, dass user-select tatsächlich einige Anwendungsfälle hat.

Vermeidung von Diebstahl von Paywall-Inhalten

Paywall-Inhalte erhalten viel Hass, aber wenn Sie der Meinung sind, dass Sie Ihre Inhalte schützen müssen, dann sind es Ihre Inhalte – niemand hat das Recht, sie zu stehlen, nur weil er nicht glaubt, dass er dafür bezahlen sollte.

Wenn Sie diesen Weg gehen möchten, gibt es viele Möglichkeiten, es Benutzern zu erschweren, Paywalls zu umgehen (oder ähnlich, urheberrechtlich geschützte Inhalte wie die veröffentlichten Werke anderer zu kopieren).

Inhalte mit CSS verwischen

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

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

Deaktivieren des Zugriffs auf DevTools über das Kontextmenü durch Deaktivieren des Kontextmenüs selbst

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

Und natürlich, um zu verhindern, dass Benutzer Inhalte kopieren, wenn sie sie nicht lesen dürfen, wenden Sie user-select: none an.

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

Gibt es andere Anwendungsfälle?

Das sind die drei Anwendungsfälle, die mir für die Verhinderung der Textauswahl einfielen. Mehrere andere kamen mir in den Sinn, aber sie schienen alle ein wenig weit hergeholt. Aber was ist mit Ihnen? Mussten Sie die Textauswahl bei etwas deaktivieren? Ich würde es gerne wissen!