Contrôle de la sélection avec la propriété CSS User-Select

Le quatrième aperçu de la plateforme IE10 prend en charge une nouvelle propriété CSS, -ms-user-select, qui permet aux développeurs Web de contrôler plus facilement et de façon précise le texte pouvant être sélectionné sur leurs sites Web. Si vous deviez m'observer toute la journée devant mon poste de travail, vous remarqueriez qu'au fur et à mesure que je lis sur l'ordinateur, je sélectionne le texte. Je ne suis pas la seule personne à lire de cette manière ; sélectionner du texte sur Internet est important dans de nombreux cas.

Prenons un site Web d'actualités classique. La plupart des pages comprennent un article sur l'actualité, dont le contenu doit pouvoir être sélectionné par l'utilisateur, car ce dernier lit en sélectionnant le texte ou parce qu'il souhaite partager le contenu. La page Web d'actualités comporte en outre des menus et des liens menant vers d'autres endroits du site. Les utilisateurs n'ont généralement pas besoin de sélectionner ces éléments. À l'aide de -ms-user-select, le développeur Web peut préciser que la sélection de texte est autorisée dans l'article d'actualités, mais pas dans les menus.

Le site des tests IE inclut un exemple de cette opération.

Définir -ms-user-select:none sur l'intégralité de la page, puis définir -ms-user-select:element sur l'élément contenant le billet de blog permet uniquement au contenu du billet de blog d'être sélectionné. -ms-user-select:element est une nouvelle propriété introduite pour la première fois par IE et nous pensons qu'elle peut être utile dans de nombreuses situations. Définir -ms-user-select:element implique que l'utilisateur peut sélectionner le texte de cet élément. Toutefois, la sélection est contrainte aux limites de l'élément. 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 juste après l'article. Définir -ms-user-select:element permet aux utilisateurs de sélectionner facilement le contenu de l'article uniquement, sans avoir à se préoccuper de positionner exactement la souris.

-ms-user-select accepte quatre valeurs :

• text : le texte peut être sélectionné
• element : le texte peut être sélectionné, mais la sélection est contrainte aux limites de l'élément
• none : le texte ne peut pas être sélectionné
• auto : si l'élément contient du texte modifiable, tel qu'un élément en entrée ou un élément dont le contenu est modifiable, le texte peut être sélectionné. Sinon, la sélection est déterminée par la valeur du nœud parent.

auto est la valeur par défaut de -ms-user-select.

Un développeur peut désactiver la sélection du texte en définissant -ms-user-select sur none. Dans IE, lorsque le texte est défini sur -ms-user-select:none, l'utilisateur n'est pas en mesure de démarrer une sélection au sein de ce bloc de texte. Toutefois, si l'utilisateur a commencé à sélectionner du texte dans une autre zone de la page, la sélection continue dans toutes les zones de la page, y compris celle dans laquelle -ms-user-select est none. Dans Firefox, si le développeur définit –moz-user-select:none, les sélections ne peuvent pas débuter dans cette zone et ne peuvent pas être incluses dans d'autres sélections. Dans Webkit, définir –webkit-user-select:none donnera l'impression que le texte n'est pas inclus dans la sélection ; toutefois, si vous copiez et collez le contenu, vous verrez que le contenu est inclus dans la sélection.

user-select a été proposé à l'origine dans le module User Interface for CSS3 (Interface utilisateur pour CSS3). Ce module a ensuite été remplacé par le module CSS3 Basic User Interface (Interface utilisateur basique CSS3), mais il ne définit pas la propriété. Mozilla et Webkit prennent tous les deux en charge leurs propres versions préfixées de cette propriété. Toutefois, comme expliqué ci-dessous, il existe des différences dans les implémentations.

Essayez les exemples donnés sur le site des tests IE et donnez-nous votre avis.

—Sharon Newman, Chef de projet, Internet Explorer