Управление выделением с помощью свойства CSS user-select

Версия IE10 Platform Preview 4 поддерживает новое свойство CSS, -ms-user-select, которое позволяет веб-разработчикам легко контролировать способ выделения текста на их веб-сайтах. Если бы вы могли наблюдать за мной весь день, пока я работаю за своим компьютером, вы бы заметили, что когда я читаю на компьютере, я выделяю текст. Я не единственный, кто читает подобным образом. Выделение текста в Интернете играет важную роль во многих других ситуациях.

Рассмотрим типичный новостной веб-сайт. Большинство страниц на нем содержат статьи с новостями, содержимое которых должно быть доступно для выделения, так как пользователи читают, выделяя текст, или потому что они хотят поделиться содержимым с другими. Кроме того, на веб-страницах имеются меню и ссылки на другие компоненты сайта. Пользователям обычно не требуется выделять эти элементы. С помощью -ms-user-select веб-разработчик может указать, что выделение текста разрешено в статьях, но не разрешено в меню.

На сайте тестирования Internet Explorer приводится пример реализации этой функциональной возможности.

Если задать -ms-user-select:none для всей страницы и затем установить -ms-user-select:element для элемента, содержащего запись блога, то разрешается выделение только содержимого записи блога. -ms-user-select:element — новое свойство, которое впервые представлено в Internet Explorer и может быть полезно во многих ситуациях. Установка -ms-user-select:element означает, что пользователь может выделить текст этого элемента, но возможность выделения будет доступна только в пределах границ элемента. Пользователи, которые хотят выделить содержимое новостной статьи, возможно, не захотят выделять элементы нижнего колонтитула после статьи. Установка -ms-user-select:element позволяет выделять содержимое статьи, не волнуясь о точном расположении мыши.

-ms-user-select принимает четыре значения:

• text — текст можно выделить;
• element — текст можно выделить, но только в границах элемента;
• none — текст нельзя выделить;
• auto — если элемент содержит редактируемый текст, например элемент input или contenteditable, текст можно выделить. В противном случае возможность выделения определяется значением родительского узла.

auto — значение -ms-user-select по умолчанию.

Разработчик может отключить выделение текста, установив для -ms-user-select значение none. В Internet Explorer, если для текста задано значение -ms-user-select:none, пользователь не сможет начать выделение в этом блоке текста. Но если пользователь начал выделение текста в другой области страницы, выделение будет продолжено для любой области страницы, включая те области, где значение -ms-user-select равно none. В Firefox, если разработчик задает –moz-user-select:none, в такой области нельзя начать выделение и ее нельзя выделить вместе с другими областями. В Webkit при установке –webkit-user-select:none все будет выглядеть так, будто текст не включен в выделение. Но если скопировать и вставить содержимое, вы увидите, что это содержимое также было выделено.

Свойство user-select первоначально было предложено в модуле Пользовательский интерфейс для CSS3 (возможно, на английском языке). Затем этот модуль был заменен модулем базового интерфейса пользователя CSS3 (возможно, на английском языке), но в нем это свойство не определено. И Mozilla, и Webkit поддерживают собственные версии этого свойства. Однако, как было описано выше, существуют определенные различия в его реализации.

Ознакомьтесь с примерами на сайте тестирования Internet Explorer (возможно, на английском языке) и сообщите нам свое мнение.

— Шэрон Ньюмэн (Sharon Newman), руководитель программы, Internet Explorer