DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> CSS user-select屬性拾遺
CSS user-select屬性拾遺
編輯:CSS詳解     

昨天把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:

1 <p onselectstart="return false;" unselectable="on">禁止被選擇的文字</p>

css:

1 2 3 4 5 6 7 8 9 10 /*在自動生成前綴時*/ 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,防止圖標字體被作為文字選擇而影響美觀。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved