歡迎移步我的博客閱讀：《CSS 的使用中你可能不知道的 7 件事》
無(wú)論你信不信闺魏，JavaScript 和 CSS 已經(jīng)開始重疊丁屎，并為 CSS 增加了更多的功能抵知。當(dāng)我在寫 CSS 與 JavaScript 交互中你可能不知道的 5 種方式的時(shí)候叁熔，讀者對(duì)于 CSS 與 JavaScript 已經(jīng)重疊的事感到很驚訝矩桂。那么今天沸移，我會(huì)著重為你介紹 7 個(gè)可以通過(guò) CSS 完成的任務(wù) —— 不使用 JavaScript 或圖像處理！
CSS @supports
每個(gè)優(yōu)秀的前端工程師都會(huì)在使用某個(gè)特性前測(cè)試一下侄榴，確保是否在瀏覽器中可以使用雹锣。而這類測(cè)試通常是由 JavaScript 完成的，當(dāng)然癞蚕，也有很多人用 Modernizr（擁有很多很好功能的測(cè)試工具）來(lái)測(cè)試特性蕊爵。那么現(xiàn)在有一個(gè) CSS 新的 API 可以讓你去做特性測(cè)試：@supports，下面的例子將簡(jiǎn)單地教你如何使用：
/* basic usage */
@supports(prop:value) {
/* more styles */
}
/* real usage */
@supports (display: flex) {
div { display: flex; }
}
/* testing prefixes too */
@supports (display: -webkit-flex) or
(display: -moz-flex) or
(display: flex) {
section {
display: -webkit-flex;
display: -moz-flex;
display: flex;
float: none;
}
}
@supports 這個(gè)新的特性也有一個(gè)相對(duì)應(yīng)的 JavaScript 方式涣达，但這個(gè)特性還在實(shí)驗(yàn)階段在辆，希望我們可以很快用到！
CSS Filters
你可以寫一個(gè)服務(wù)去修改圖片的顏色度苔，同時(shí)還可以把它賣給 Facebook 獲得大量的錢匆篓！當(dāng)然，寫一個(gè)圖片過(guò)濾器功能只是一個(gè)簡(jiǎn)單化的實(shí)現(xiàn)寇窑，并非一門科學(xué)鸦概。在 Mozilla 的第一周，我寫了一個(gè)小的應(yīng)用（這讓我贏了比賽，BTW...就說(shuō)說(shuō)而已）窗市，這個(gè)應(yīng)用使用了一些 JS-base 的數(shù)學(xué)方法并使用 canvas 去做圖片過(guò)濾器先慷。這很麻煩，但是現(xiàn)在我們可以用 CSS 的特性去完成這一功能咨察！
/* simple filter */
.myElement {
-webkit-filter: blur(2px);
}
/* advanced filter */
.myElement {
-webkit-filter: blur(2px) grayscale (.5) opacity(0.8) hue-rotate(120deg);
}
這類的過(guò)濾功能只是創(chuàng)建一個(gè)圖片的原型论熙，并且不會(huì)保存和導(dǎo)出來(lái)完成過(guò)濾器的功能。這對(duì)于圖片管理或想處理任何一張圖片來(lái)說(shuō)很方便摄狱！
Pointer Events 和點(diǎn)擊事件
CSS 特性中的 pointer-events 提供了一個(gè)方法脓诡，能使一個(gè)元素 disable，即在用戶點(diǎn)擊某個(gè)元素時(shí)媒役，不觸發(fā)它在 JavaScript 中寫的點(diǎn)擊事件：
/* do nothing when clicked or activated */
.disabled { pointer-events: none; }
/* this will _not_ fire because of the pointer-events: none application */
document.getElementById("disabled-element").addEventListener("click", function(e) {
alert("Clicked!");
});
在上述的例子中祝谚，由于 pointer-events 的值是 none，而使點(diǎn)擊事件不被觸發(fā)酣衷。大有用處的是交惯，讓你不必到處去檢查類名或?qū)傩裕瑏?lái)確認(rèn)哪一個(gè)是 disabled 的了穿仪。
Slide Down & Slide Up
CSS 使我們能夠創(chuàng)建轉(zhuǎn)換和動(dòng)畫席爽，但通常我們需要一個(gè) JavaScript 庫(kù)幫助我們實(shí)現(xiàn)。例如一個(gè)比較流行的動(dòng)畫效果 slide up 和 silde down牡借，大概很多人都不知道這個(gè)可以只用 CSS 實(shí)現(xiàn)吧拳昌！
/* slider in open state */
.slider {
overflow-y: hidden;
max-height: 500px; /* approximate max height */
transition-property: all;
transition-duration: .5s;
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}
/* close it with the "closed" class */
.slider.closed {
max-height: 0;
}
很聰明地使用了 max-height 來(lái)控制元素的展開和收縮。
CSS Counters
我們不禁地問(wèn)钠龙，“counter” 在網(wǎng)上意味著什么呢炬藤？但是 CSS Counters 就是另外一回事了。這個(gè)特性可以把一個(gè) counter 加到元素中碴里，通過(guò) :before 或 :after ：
/* initialize the counter */
ol.slides {
counter-reset: slideNum;
}
/* increment the counter */
ol.slides > li {
counter-increment: slideNum;
}
/* display the counter value */
ol.slides li:after {
content: "[" counter(slideNum) "]";
}
通常這個(gè)會(huì)在一些模塊或是列表中用到沈矿。
Unicode CSS Classes
有大量的文章說(shuō)明，去教你如何對(duì) CSS 的類命名咬腋。但你應(yīng)該不知道會(huì)有這樣的文檔羹膳，去教你用特殊字符命名你的 css 類：
.?_? {
border: 1px solid #f00;
background: pink;
}
.? {
background: lightgreen;
border: 1px solid green;
}
但請(qǐng)不要這么使用。
CSS Circles
CSS 中的圓形 與 CSS 中的三角形一樣根竿。通過(guò)使用 border-radius 就能創(chuàng)建一個(gè)完美的圓形陵像！
.circle {
border-radius: 50%;
width: 200px;
height: 200px;
/* width and height can be anything, as long as they're equal */
}
你也可以給圓形添加一些漸變效果，甚至可以添加動(dòng)畫寇壳。CSS 擁有更多對(duì)于圖形統(tǒng)一的 API醒颖，當(dāng)然現(xiàn)在你可以使用 hack 創(chuàng)建一個(gè)圓形。
就是這些：你可能不知道的 7 個(gè)關(guān)于 CSS 的事壳炎，一部分是臨界的情況泞歉，其他一部分還是非常實(shí)用的。那么就大膽地去用它們吧！
