CSS user select屬性拾遺

2022-07-27 11:18:15 字數 840 閱讀 7227

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

user-select禁止使用者選中文字 

none:文字不能被選擇 

text:可以選擇文字 

all:當所有內容作為乙個整體時可以被選擇。如果雙擊或者在上下文上點選子元素,那麼被選擇的部分將是以該子元素向上回溯的最高祖先元素。 

element:可以選擇文字,但選擇範圍受元素邊界的約束(webkit暫未支援)

相容的處理:

總結則是:

html:

禁止被選擇的文字

css:

/*在自動生成字首時*/

p /*在不自動生成字首時*/

p

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

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

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

故,簡單的乙個小心得,在用字型做圖示時,圖示所在元素會被頻繁點選時,可考慮新增user-select:none,防止圖示字型被作為文字選擇而影響美觀

CSS屬性 背景屬性 or 浮動屬性

background color red background image url background repeat no repeat repeat repeat x repeat y background position 水平位置 垂直位置 可以給負值 background attachme...

復合屬性 列表屬性 文字屬性

background 復合屬性 url 位址 本地位址,網路位址 repeat 預設值 水平和垂直都鋪滿 repeat x 只鋪滿水平方向 左右 repeat y 只鋪滿垂直方向 上下 no repeat 不平鋪 放不滿,留出空白 background size 100 100 背景縮放 boxba...

CSS屬性 文字屬性 or 列表屬性

font weight bolder 更粗的 bold 加粗 normal 常規 lighter 細的 font weight 100 900 100 500 不加粗 600 900 加粗 常用 100 細體 400 正常 700 加粗 900 更粗 font style italic 傾斜字 ob...