英文原文：7 Things You Didn’t Know You Could Do with CSS
譯者：Jovey
原文地址：http://www.lxweimin.com/p/b0f161ed801d
無論你信不信，JavaScript 和 CSS 已經(jīng)開始重疊，并為 CSS 增加了更多的功能。當(dāng)我在寫 CSS 與 JavaScript 交互中你可能不知道的 5 種方式的時(shí)候，讀者對(duì)于 CSS 與 JavaScript 已經(jīng)重疊的事感到很驚訝。那么今天，我會(huì)著重為你介紹 7 個(gè)可以通過 CSS 完成的任務(wù) —— 不使用 JavaScript 或圖像處理！
CSS @supports
每個(gè)優(yōu)秀的前端工程師都會(huì)在使用某個(gè)特性前測試一下，確保是否在瀏覽器中可以使用。而這類測試通常是由 JavaScript 完成的，當(dāng)然，也有很多人用 Modernizr（擁有很多很好功能的測試工具）來測試特性。那么現(xiàn)在有一個(gè) CSS 新的 API 可以讓你去做特性測試：@supports，下面的例子將簡單地教你如何使用：
/* 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è)圖片過濾器功能只是一個(gè)簡單化的實(shí)現(xiàn)，并非一門科學(xué)。在 Mozilla 的第一周，我寫了一個(gè)小的應(yīng)用（這讓我贏了比賽，BTW...就說說而已），這個(gè)應(yīng)用使用了一些 JS-base 的數(shù)學(xué)方法并使用 canvas 去做圖片過濾器。這很麻煩，但是現(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);
}
這類的過濾功能只是創(chuàng)建一個(gè)圖片的原型，并且不會(huì)保存和導(dǎo)出來完成過濾器的功能。這對(duì)于圖片管理或想處理任何一張圖片來說很方便！
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ū)傩裕瑏泶_認(rèn)哪一個(gè)是 disabled 的了。
Slide Down & Slide Up
CSS 使我們能夠創(chuàng)建轉(zhuǎn)換和動(dòng)畫，但通常我們需要一個(gè) JavaScript 庫幫助我們實(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 來控制元素的展開和收縮。
CSS Counters
我們不禁地問，“counter” 在網(wǎng)上意味著什么呢？但是 CSS Counters就是另外一回事了。這個(gè)特性可以把一個(gè) counter 加到元素中，通過 :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
有大量的文章說明，去教你如何對(duì) CSS 的類命名。但你應(yīng)該不知道會(huì)有這樣的文檔，去教你用特殊字符命名你的 css 類：
.?_? {
border: 1px solid #f00;
background: pink;
}
.? {
background: lightgreen;
border: 1px solid green;
}
但請(qǐng)不要這么使用。
CSS Circles
CSS 中的圓形 與 CSS 中的三角形一樣。通過使用 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í)用的。那么就大膽地去用它們吧！
