CSS user-select屬性拾遺，cssuser-select

CSS user-select屬性拾遺，cssuser-select

昨天把Notebook整理了一下，去查了一下手冊，原來之前比較忽略user-select這個屬性，因為之前以為只有webkit才支援的。手冊進行了補充：

user-select 禁止使用者選中文字 
none：文本不能被選擇 
text：可以選擇文本 
all：當所有內容作為一個整體時可以被選擇。如果雙擊或者在上下文上點擊子項目，那麼被選擇的部分將是以該子項目向上回溯的最高祖先元素。 
element：可以選擇文本，但選擇範圍受元素邊界的約束（webkit暫未支援）
相容的處理：
IE6-9不支援該屬性，可使用標籤屬性 onselectstart="return false;" 來實現； 
Oprea老版本使用私人的標籤屬性 unselectable="on" 來達到 user-select:none 的效果；最新Opera中已經支援webkit首碼的此屬性。
除Chrome和Safari外，在其它瀏覽器中，如果將文本設定為 -ms-user-select:none;，則使用者將無法在該文字區塊中開始選擇文本。不過，如果使用者在頁面的其他地區開始選擇文本，則使用者仍然可以繼續選擇將文本設定為 -ms-user-select:none; 的地區文本； 

總結則是：

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;} 

談到使用者體驗，似乎這麼做除了一些必要的輔助地方，例如簡單的避免drag事件，好像用途不大（用於防止盜文什麼的沒什麼意義）。

但是無意間發現一個挺有用的地方，現在用字型做表徵圖常見，一日在處理這個頁面

側邊下方的副本切換按鈕表徵圖，則是引的iconfont，由於使用者點擊頻繁，則會導致選中文字，看起來很不美觀和諧，在這裡應用一下user-select:none那是極好的。

故，簡單的一個小心得，在用字型做表徵圖時，表徵圖所在元素會被頻繁點擊時，可考慮添加user-select:none，防止表徵圖字型被作為文字選擇而影響美觀。