標籤：

CSS 有哪些暖心卻鮮為人知的屬性？

12-16

找到例子啦 http://sale.jd.com/act/azLPEJfYkn2Rd.html

-----------------------------------------------------------


pointer-events
很有js味道的一個屬性，把值設置為none可以讓元素不捕獲事件，可以理解為讓他看得見摸不著。之前jd某個活動頁使用了它，在頁面上蓋了一層長寬都100%的canvas，canvas裡面雪花飄零。

當時我還很納悶，到底用了什麼黑科技讓canvas浮在所有dom上面而滑鼠對頁面的操作絲毫不受影響，想了半天都沒想到怎麼用js來實現，最後發現居然簡簡單單一個css屬性就搞定了。

所以還是要多看標準啊

  1. attr

&

剩餘話費40&

[data-unit]:after{
content: attr(data-unit);
color: #3b98e0;
}

http://jsbin.com/mehuqaqica/edit?html,css,output
IE不支持Can I use... Support tables for HTML5, CSS3, etc

2. currentColor是color屬性的值

.box{
width: 200px;
height: 200px;
color: #3b98e0;
border: 1px solid currentColor;
}

&
測試測試
&

JS Bin - Collaborative JavaScript Debugging
IE7，8不支持 Can I use... Support tables for HTML5, CSS3, etc

3.user-select 禁止選擇文本

.box-1{
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}

JS Bin - Collaborative JavaScript Debugging

4.selection 可設置文字被選擇時的樣式

::selection {
background: #FE6E66;
color: #FFF;
}

JS Bin - Collaborative JavaScript Debugging

5.will-change 啟動GPU加速，增強頁面渲染性能
使用CSS3 will-change提高頁面滾動、動畫等渲染性能 ? 張鑫旭
6.響應圖片
在不同設備像素比的屏幕下，自動載入2倍，3倍圖

background-image: image-set( url(test@2x.png) 2x, url(test@3x.png) 3x );

兼容性：http://caniuse.com/#search=image-set

通過ime-mode屬性控制文本欄位的輸入法編輯器的狀態：

ime-mode是CSS3中最新添加的屬性，更準確點說，是CSS Basic User Interface Module Level 3 (CSS3 UI)規範新添加的屬性，該屬性可以控制文本欄位的輸入法編輯器的狀態。IE瀏覽器從IE5開始就支持該屬性了哦，FireFox瀏覽器從FireFox3.0開始也支持該ime-mode屬性。不過chrome、opera、Safari瀏覽器還沒有開始支持該屬性。


名稱: ime-mode
值: auto | normal | active | inactive | disabled | inherit
初始值: auto
應用元素: text fields（文本欄位）
繼承性: no


下面是ime-mode各個值的說明：
auto : 默認值，不影響當前輸入法編輯器的狀態
normal : 輸入法編輯器的狀態應該是normal，這個值可以用於用戶樣式表來覆蓋頁面的設置。IE瀏覽器不支持該屬性
active : 輸入法編輯器的狀態初始時是激活的；輸入將一直使用該輸入法直到用戶切換輸入法。該屬性在Linux下不支持
inactive : 輸入法編輯器的狀態初始時是非激活狀態；除非用戶激活輸入法
disabled : 禁用輸入法編輯器；該輸入法編輯器也許不會被用戶激活


&
&
& New Document &
&