歡迎移步我的博客閱讀：《CSS 的使用中你可能不知道的 7 件事》
無論你信不信，JavaScript 和 CSS 已經(jīng)開始重疊，并為 CSS 增加了更多的功能。當(dāng)我在寫 CSS 與 JavaScript 交互中你可能不知道的 5 種方式的時候，讀者對于 CSS 與 JavaScript 已經(jīng)重疊的事感到很驚訝。那么今天，我會著重為你介紹 7 個可以通過 CSS 完成的任務(wù) —— 不使用 JavaScript 或圖像處理！
CSS @supports
每個優(yōu)秀的前端工程師都會在使用某個特性前測試一下，確保是否在瀏覽器中可以使用。而這類測試通常是由 JavaScript 完成的，當(dāng)然，也有很多人用 Modernizr（擁有很多很好功能的測試工具）來測試特性。那么現(xiàn)在有一個 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 這個新的特性也有一個相對應(yīng)的 JavaScript 方式，但這個特性還在實驗階段，希望我們可以很快用到！
CSS Filters
你可以寫一個服務(wù)去修改圖片的顏色，同時還可以把它賣給 Facebook 獲得大量的錢！當(dāng)然，寫一個圖片過濾器功能只是一個簡單化的實現(xiàn)，并非一門科學(xué)。在 Mozilla 的第一周，我寫了一個小的應(yīng)用（這讓我贏了比賽，BTW...就說說而已），這個應(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)建一個圖片的原型，并且不會保存和導(dǎo)出來完成過濾器的功能。這對于圖片管理或想處理任何一張圖片來說很方便！
Pointer Events 和點擊事件
CSS 特性中的 pointer-events 提供了一個方法，能使一個元素 disable，即在用戶點擊某個元素時，不觸發(fā)它在 JavaScript 中寫的點擊事件：
/* 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，而使點擊事件不被觸發(fā)。大有用處的是，讓你不必到處去檢查類名或?qū)傩裕瑏泶_認(rèn)哪一個是 disabled 的了。
Slide Down & Slide Up
CSS 使我們能夠創(chuàng)建轉(zhuǎn)換和動畫，但通常我們需要一個 JavaScript 庫幫助我們實現(xiàn)。例如一個比較流行的動畫效果 slide up 和 silde down，大概很多人都不知道這個可以只用 CSS 實現(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 就是另外一回事了。這個特性可以把一個 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) "]";
}
通常這個會在一些模塊或是列表中用到。
Unicode CSS Classes
有大量的文章說明，去教你如何對 CSS 的類命名。但你應(yīng)該不知道會有這樣的文檔，去教你用特殊字符命名你的 css 類：
.?_? {
border: 1px solid #f00;
background: pink;
}
.? {
background: lightgreen;
border: 1px solid green;
}
但請不要這么使用。
CSS Circles
CSS 中的圓形 與 CSS 中的三角形一樣。通過使用 border-radius 就能創(chuàng)建一個完美的圓形！
.circle {
border-radius: 50%;
width: 200px;
height: 200px;
/* width and height can be anything, as long as they're equal */
}
你也可以給圓形添加一些漸變效果，甚至可以添加動畫。CSS 擁有更多對于圖形統(tǒng)一的 API，當(dāng)然現(xiàn)在你可以使用 hack 創(chuàng)建一個圓形。
就是這些：你可能不知道的 7 個關(guān)于 CSS 的事，一部分是臨界的情況，其他一部分還是非常實用的。那么就大膽地去用它們吧！
