CSS User-select Properties Supplements

Yesterday notebook tidy up a bit, went to check the manual, the original before compared to ignore user-select this attribute, because previously thought only webkit support. The manual was supplemented by:

user-select prohibit user from selecting text

None: Text cannot be selected
Text: You can select texts
All: Can be selected when all content is as a whole. If you double click or click on a child element in the context, the selected part will be the highest ancestor element that is backtracking upward with that child element.
element: You can select text, but the selection is constrained by the bounds of the element (WebKit is not supported)

Compatible Processing:

• Ie6-9 does not support this property, it can be implemented using the Tag property onselectstart= "return false;"
• The old version of Oprea uses the private tag attribute unselectable= "on" to achieve user-select:none effect; This property of the WebKit prefix is already supported in the latest opera.
• In addition to Chrome and Safari, in other browsers, if the text is set to-ms-user-select:none, the user will not be able to start selecting text in that block of text. However, if the user starts selecting text in other areas of the page, the user can still choose to set the text to-ms-user-select:none; the regional text;

The summary is:

Html:

<p onselectstart= "return false;" unselectable= "on" > Prohibit selected text </p>

Css:

/* */p{user-select:none When the prefix is automatically generated,}/* */p{    user-select:none    When the prefix is not automatically generated; -webkit-user-select:none;    -ms-user-select:none;    

When it comes to user experience, it seems that this is done in addition to some of the necessary ancillary places, such as simply avoiding drag events, which seem to be of little use (to prevent the theft of text or anything).

But inadvertently found a very useful place, now use the Font icon Common, one day in the processing of this page

The Copy toggle button icon below the side, is the iconfont of the citation, because the user clicks Frequently, will result in the selected text, looks very beautiful and harmonious, applies here user-select:none that is extremely good.

Therefore, a simple small experience, in the use of fonts to make icons, the icon element will be frequently clicked, you can consider adding user-select:none, to prevent the icon font is used as text selection and affect the appearance .

CSS User-select Properties Supplements