CSS user-select attribute recollection_html/css_WEB-ITnose

I sorted out the notebook yesterday and checked the manual. It turns out that I ignored the user-select attribute before because I thought it was only supported by webkit. The manual has been supplemented:

user-select prohibits users from selecting text

none: text cannot be selected
text: Text can be selected
all: All content can be selected as a whole. If you double-click or contextually click on a child element, the selected part will be the highest ancestor element tracing back from that child element.
element: Text can be selected, but the selection range is constrained by the element boundary (not supported by webkit yet)

Compatible processing:

Not supported by IE6-9 This attribute can be achieved using the label attribute onselectstart="return false;";

The old version of Oprea uses the private label attribute unselectable="on" to achieve the effect of user-select:none; the latest Opera has already This property supports the webkit prefix.

In browsers other than Chrome and Safari, if text is set to -ms-user-select:none;, the user will not be able to start selecting text within that text block. However, if the user starts selecting text in another area of ​​the page, the user can still continue to select the area text by setting the text to -ms-user-select:none;

The summary is:

html:

<p onselectstart="return false;" unselectable="on">禁止被选择的文字</p>

css:

/*在自动生成前缀时*/p{user-select:none;} /*在不自动生成前缀时*/p{    user-select:none;    -webkit-user-select:none;    -ms-user-select:none;    -moz-user-select:none;} 

When it comes to user experience, it seems that this is done except for some necessary auxiliary places. , such as simply avoiding drag events, seems to be of little use (there is no point in preventing piracy).

But I accidentally discovered a very useful place. Nowadays, it is common to use fonts to make icons. I was working on this page one day

The copy switch button icon at the bottom of the side is the iconfont. Since the user clicks frequently, the selected text will not look beautiful and harmonious. It is excellent to apply user-select:none here.

So, a simple tip: When using fonts to make icons, if the element where the icon is located will be frequently clicked, you can consider adding user-select:none to prevent the icon font from being used as text selection. Affects the appearance.