Comment empêcher (ou autoriser) la sélection de texte sur votre page Web à l’aide de CSS

La propriété -ms-user-select est une nouvelle propriété CSS (Cascading Style Sheets) qui permet aux développeurs Web et d’applications de contrôler les emplacements dans lesquels les utilisateurs peuvent sélectionner du texte dans leurs pages Web ou applications du Windows Store en JavaScript. Cette rubrique explique comment implémenter la propriété -ms-user-select sur votre propre page Web. (La propriété -ms-user-select est implémentée exactement de la même manière dans une application du Windows Store en JavaScript). Elle contient les sections suivantes :

Remarque  La propriété user-select ne fait actuellement partie d’aucune spécification CSS  W3C (World Wide Web Consortium). À l’origine, elle était proposée dans le module Interface utilisateur pour CSS3, mais ce module a depuis été remplacé par le module Interface utilisateur de base CSS3, qui ne contient pas la propriété user-select. Certains des principaux navigateurs prennent en charge leurs propres versions préfixées de cette propriété. Il existe des différences mineures entre les trois implémentations. Par conséquent, veillez à tester votre application dans tous les navigateurs.

Introduction

La possibilité de sélectionner du texte sur des pages Web est importante dans de nombreux scénarios utilisateur. Prenez l’exemple d’un site d’actualités standard. La plupart de ses pages contiennent des articles d’actualité dont les utilisateurs voudront peut-être sélectionner le contenu pour le partager. Toutefois, la page contient sans doute aussi des menus, des publicités et des liens vers d’autres parties du site dont les utilisateurs n’ont pas besoin ou qu’ils ne veulent pas sélectionner. Avec la prise en charge de la nouvelle propriété CSS -ms-user-select dans Internet Explorer 10, vous pouvez spécifier que la sélection de texte est autorisée, par exemple, dans le corps principal de l’article d’actualité, mais ne l’est pas dans les menus.

Utilisation de -ms-user-select

La propriété -ms-user-select accepte quatre valeurs :

Mot cléDescription

element

Le texte est sélectionnable lorsque la sélection est débutée dans l’élément spécifié. Elle est toutefois contrainte par les limites de l’élément.

none

Le texte n’est pas sélectionnable lorsque la sélection est débutée dans l’élément spécifié. Toutefois, la sélection de texte débutée à l’extérieur de l’élément peut s’étendre à l’élément.

text

Le texte est sélectionnable lorsque la sélection est débutée dans l’élément spécifié. La sélection de texte n’est pas contrainte par les limites de l’élément et peut s’étendre en dehors de ses limites.

auto

Il s’agit de la valeur initiale. Si l’élément contient du texte modifiable comme un élément input ou un élément avec contenteditable défini sur "true", le texte est sélectionnable. Sinon, le sélection est déterminée par la valeur de la propriété -ms-user-select du nœud parent.

 

Dans notre scénario de site d’actualités, vous pouvez par exemple définir -ms-user-select sur "none" sur la page entière et définir -ms-user-select sur "element" sur l’article principal. De cette manière, seul le texte de l’article est sélectionnable. Les personnes qui souhaitent sélectionner le contenu d’un article d’actualités ne veulent probablement pas sélectionner les éléments de pied de page qui se trouvent à la suite de l’article. Par conséquent, le fait de définir -ms-user-select sur "element" leur permet facilement de sélectionner le contenu de l’article sans avoir à se préoccuper de placer le curseur exactement à l’endroit où il faut. Ceci est tout particulièrement vrai pour les utilisateurs naviguant tactilement.

Vous pouvez désactiver la sélection de texte dans n’importe quel élément de page en définissant -ms-user-select sur "none". L’utilisateur ne pourra pas débuter une sélection dans le bloc de texte spécifié. Toutefois, si l’utilisateur débute la sélection de texte dans une zone différente de la page, la sélection peut continuer dans n’importe quelle autre zone de la page, y compris celles pour lesquelles -ms-user-select est défini sur "none".

Exemple d’implémentation

Le site IE Test Drive contient une démonstration pratique de la propriété -ms-user-select. Cette démo présente une maquette d’un billet de blog contenant plusieurs zones distinctes de contenu de texte : le blog dans son ensemble ("#blog"), qui se compose du billet de blog ("#blogPost") et de plusieurs commentaires (".comment"). Chaque zone comprend à son tour différents éléments de texte, notamment des éléments input et textarea, ainsi que des éléments dont la propriété contenteditable est définie sur "true".

Capture d’écran de la démo user-select sur le site IE Test Drive

Le menu contextuel sur le côté gauche de la page contient plusieurs options permettant de définir -ms-user-select sur les élément de page. Passons brièvement en revue les options répertoriées dans le menu contextuel de la démo.

Normal selection (Sélection normale)

Cette option indique que -ms-user-select n’a été défini sur aucun élément de la page. Les utilisateurs sont libres de sélectionner du texte dans tout élément de leur choix.

Turn off selection except in editable content (Désactiver la sélection sauf dans le contenu modifiable)

Cette option définit -ms-user-select pour le blog dans son ensemble sur "none". Cela signifie que rien ne peut être sélectionné, à l’exception du texte dans les régions éditables, comme les champs « Name » (Nom) et « Comment » (Commentaire).


#blog { 
  -ms-user-select:none;
} 

Turn off selection everywhere (Désactiver la sélection partout)

Cette option définit -ms-user-select sur "none" pour tous les éléments, ce qui inclut cette fois les champs d’entrée utilisateur (input et textarea) et tout autre élément pour lequel contenteditable est défini sur true. Cela signifie que rien ne peut être sélectionné, y compris le texte dans les régions modifiables.


#blog, #blog input, #blog textarea, #blog *[contenteditable=true] { 
  -ms-user-select:none;
}

Select blog post content only (Sélectionner uniquement le contenu du billet de blog)

Cette option définit -ms-user-select sur "element" pour les éléments portant l’ID "blogPost", tout en définissant -ms-user-select sur "none" pour le blog dans son ensemble. Cela signifie que le texte du billet de blog peut être sélectionné.


#blogPost {
  -ms-user-select:element;
} 

#blog { 
  -ms-user-select:none;
}

Select comments only (Sélectionner uniquement les commentaires)

Cette option définit -ms-user-select sur "element" pour les éléments ayant une classe "comment", tout en définissant -ms-user-select sur "none" pour le blog dans son ensemble. Cela signifie que seul le texte de commentaire peut être sélectionné.


.comment {
  -ms-user-select:element;
} 

#blog { 
  -ms-user-select:none;
}

Selection starts in blog post or comments but can extend (La sélection commence dans le billet de blog ou dans les commentaires, mais peut s’étendre)

Cette option définit -ms-user-select sur "text" pour tout élément portant l’ID "blogPost" ou ayant une classe "comment", tout en définissant -ms-user-select sur "none" pour le blog dans son ensemble. Cela signifie que la sélection de texte ne peut débuter que dans le billet de blog ou les commentaires, mais qu’elle peut s’étendre en dehors de ces zones. Toutefois, la sélection de texte ne peut pas débuter à l’extérieur du billet de blog ou des commentaires.


#blogPost, .comment { 
  -ms-user-select:text;
} 

#blog { 
  -ms-user-select:none;
}

Prise en charge dans d’autres navigateurs

À ce jour, Mozilla et WebKit prennent en charge leurs propres versions préfixées de la propriété user-select. Toutefois, leurs implémentations présentent quelques différences. Pour consulter les informations les plus récentes, suivez l’un ou l’autre des liens suivants :

Rubriques connexes

Démonstration sur le site IE Test Drive : User-Select
Exemples et didacticiels Internet Explorer 10

 

 

Afficher:
© 2014 Microsoft