Steuern der Auswahl mit der CSS-Eigenschaft "user-select"

  • Article

Die IE10 Platform Preview 4 bietet Unterstützung für eine neue CSS-Eigenschaft, -ms-user-select, mit der Webentwickler einfacher steuern können, welcher Text auf Websites ausgewählt werden kann. Wenn Sie mich den ganzen Tag am Arbeitsplatz beobachten könnten, würden Sie feststellen, dass ich beim Lesen am Computer Text auswähle. Ich bin nicht der Einzige, der so liest. Die Auswahl von Text im Internet spielt in vielen Szenarien eine Rolle.

Denken Sie beispielsweise an eine typische Nachrichtenwebsite. Die meisten Seiten enthalten Nachrichtenartikel, deren Inhalt Benutzer auswählen möchten, um ihn zu lesen oder an andere weiter zu versenden. Außerdem befinden sich auf der Nachrichtenwebsite Menüs und Links zu anderen Teilen der Website. Diese Elemente müssen von Benutzern in der Regel nicht ausgewählt werden. Mithilfe von -ms-user-select können Webentwickler beispielsweise angeben, dass die Textauswahl in den Nachrichtenartikeln zulässig ist, nicht jedoch in den Menüs.

Die IE Test Drive-Website bietet ein entsprechendes Beispiel.

Screenshot der IE Test Drive-Demo „User-Select“ mit einem Beispiel für Markup mit „-ms-user-select“

Durch Festlegen von -ms-user-select:none für die gesamte Seite und anschließend von -ms-user-select:element für das Element mit dem Blogbeitrag kann ausschließlich der Inhalt des Blogbeitrags ausgewählt werden. -ms-user-select:element ist eine neue, mit IE erstmals eingeführte Eigenschaft, die sich in zahlreichen Fällen als nützlich erweisen wird. Wird -ms-user-select:element festgelegt, bedeutet dies, dass der Benutzer den Text dieses Elements auswählen kann, die Auswahl jedoch auf den Inhalt des Elements beschränkt ist. Benutzer, die den Inhalt eines Nachrichtenartikels auswählen, möchten in der Regel die Fußzeilenelemente unter dem Artikel nicht in die Auswahl einbeziehen. Durch das Festlegen von -ms-user-select:element können Benutzer einfach den Inhalt eines Artikels auswählen, ohne darauf achten zu müssen, dass der Inhalt zeichengenau mit der Maus erfasst wird.

-ms-user-select akzeptiert vier Werte:

  • text – Der Text kann ausgewählt werden.
  • element – Der Text kann ausgewählt werden, jedoch nur innerhalb des Elements.
  • none – Der Text kann nicht ausgewählt werden.
  • auto – Das Element enthält bearbeitbaren Text, wie beispielsweise ein „input“- oder „contenteditable“-Element. Der Text kann ausgewählt werden. Andernfalls wird die Auswahl durch den Wert des übergeordneten Elements bestimmt.

auto ist der Standardwert für -ms-user-select.

Entwickler können die Textauswahl durch Festlegen von -ms-user-select auf none unterbinden. In IE kann ein Benutzer innerhalb eines Textabschnitts nichts auswählen, wenn der Text auf -ms-user-select:none festgelegt ist. Jedoch wird die Auswahl in Bereichen, in denen -ms-user-select auf none festgelegt ist, fortgesetzt, wenn der Benutzer die Auswahl in einem anderen Bereich auf der Seite beginnt. In Firefox kann eine Auswahl nicht in einem Bereich beginnen, in dem –moz-user-select:none festgelegt ist. Außerdem kann der Bereich nicht in eine andere Auswahl einbezogen werden. In Webkit scheint es, als würde der Text nicht ausgewählt, wenn –webkit-user-select:none festgelegt ist. Jedoch stellt sich beim Kopieren und Einfügen heraus, dass der Text in der Auswahl enthalten ist.

user-select wurde ursprünglich im User Interface for CSS3-Modul vorgeschlagen. Dieses Modul wurde jedoch durch das CSS3 Basic User Interface Module ersetzt, in dem diese Eigenschaft nicht definiert wird. Sowohl Mozilla als auch Webkit unterstützen Versionen dieser Eigenschaften mit eigenem Präfix. Jedoch bestehen, wie oben dargestellt, einige Unterschiede bei der Implementierung.

Sehen Sie sich die Beispiele auf der IE Test Drive-Website an, und lassen Sie uns wissen, was Sie davon halten.

– Sharon Newman, Program Manager, Internet Explorer