IE10 Platform Preview 4 includes support for a new CSS property,
-ms-user-select, which makes it easier for Web developers to
control exactly what text can be selected on their Web sites. If you were to watch me all day at my workstation, you would notice that as I read
on the computer, I select text. I’m not the
only one who
reads like this; selecting text on the Internet is important in many other scenarios.
Consider a typical news Web site. Most pages will include a news article, the contents
of which the user needs to be able to select because they read by selecting text
or because they want to share the content. Also on the news Web page there are some
menus and links to other parts of the site. Users likely don’t need to select these
items. Using -ms-user-select, the Web developer can specify that text
selection is allowed in the news article but not allowed in the menus.
The IE Test Drive
site includes an example that does this.
Setting -ms-user-select:none on the entire page and then setting
-ms-user-select:element
the contents of the blog post to be selected. -ms-user-select:element
is a new property first introduced by IE which we think could be useful in many
situations. Setting -ms-user-select:element means that the user can
select the text of that element, however, the selection will be constrained to the
bounds of the element. People who want to select the contents of a news article
probably don’t want to select the footer elements just past the article. Setting
-ms-user-select:element makes it easy for users to just select the
contents of the article without having to worry about getting the mouse placement
exactly correct.
-ms-user-select accepts four values:
text– the text is selectableelement– the text is selectable, constrained to the bounds of the elementnone– the text is not selectableauto– if the element contains editable text such as an input element or contenteditable
element, the text is selectable. Otherwise selection is determined by the parent
node’s value.
auto is the default value for -ms-user-select.
A developer can turn off text selection by setting -ms-user-select to
none. In IE, when text is set to -ms-user-select:none, the user will not be able to
start a selection within that block of text. However, if the user started selecting
text on a different area of the page, the selection would continue into any area
of the page including areas where -ms-user-select is none. In Firefox, if the developer
sets –moz-user-select:none then selections can’t start in that area and also can’t
be included in any other selection. In Webkit, setting –webkit-user-select:none
will make it appear as if that the text is not included in the selection, however
if you copy and paste the content, you will see that the content is included in
the selection.
user-select was originally proposed in the
User Interface for CSS3 module; this module has since been superseded by
CSS3 Basic User Interface Module, yet it does not define the property. Both
Mozilla and
Webkit support their own prefixed versions of this property. However, as
discussed above, there are some differences in the implementations.
Play around with the examples on the
IE Test Drive site and let us know what you think.
—Sharon Newman, Program Manager, Internet Explorer