7件你不知道但可以用CSS做的事

　　不管你信不信，CSS和JavaScript開始重疊，就像CSS增加了更多功能一新。在我寫“你可能不知道的CSS和JavaScript互相影響的5種方式”一文時，人們對於JavaScript和CSS是如何重疊的感到驚訝。今天，我將重點強調你能用CSS完成的7種工作——不需要通過JavaScript或圖片。

　　CSS@supports

　　在使用一些瀏覽器可能沒有的特性時，每一個優秀的前端開發者都需要進行特性測試。特性測試一直以來都是由JavaScript來做的，許多人使用Modernizr，一個由許多測試良好的案例構成的優秀實用工具，來做特性測試。一個新API：@supports，不管怎樣，已經出現在開發人員面前，它能讓你用CSS來做特性測試。以下是一些@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特性，同樣有一個對應的JavaScript版本，但已經過期了，我們期待著早點使用它！

　　CSS濾鏡

　　寫一個服務來修改圖片的色調，然後你可以以數十億美元把它賣給Facebook。當然，那是一件很簡單的事，但是寫影象濾鏡並不是一門科學。我到Mozilla 的第一個星期寫的一個小程式（得了獎，額，我只是隨便說說而已）用了一些基於JS的數學用canvas來建立影象濾鏡，但現在我們用CSS就能建立影象濾鏡了。

/* simple filter */
.myElement {
	-webkit-filter: blur(2px);
}

/* advanced filter */
.myElement {
	-webkit-filter: blur(2px) grayscale (.5) opacity(0.8) hue-rotate(120deg);
}

　　這個型別的濾鏡只是改變了下影象的原來樣子而已，儲存或匯出影象時並沒有用所說的濾鏡，但當你需要給照片美化或處理海報時這很好用。

　　Pointr Events和 Bricking Clicks

　　CSS的Pointr Events屬性提供了一個方法來有效的禁用一個元素，正因為如此，通過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!");
});

　　在上面的例子中，由於CSS pointer-events值的原因，單擊事件將不會觸發。我發現了它的巨大作用，你不需要每處都檢查className或屬性來確保一些元素是否已經禁用了。

　　摺疊、展開選單

　　CSS讓我們可以建立過渡效果和動畫，但是很多時候我們需要JavaScript庫來幫助我們修改一些東西和控制動畫。一個很流行的動畫就是摺疊、展開選單效果，很多人都不知道只用CSS就可以實現！

/* 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計數器

　　“計數器”這個術語在網路上表示的意思經常讓我們傻笑，但CSS 計數器是另一件更讓我們傻笑的事。CSS計數器允許開發人員在指定的元素上用: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) "]";
}

　　你經常見到CSS計數器被用在幻燈片效果上，和像表單內容的列表上。

　　Unicode CSS樣式名

　　有許多CSS最好的實踐文件，它們都是由如何給CSS樣式命名開始的。你永遠不會見到有個文件說的的用unicode符號來命名你的樣式：

.ಠ_ಠ {
	border: 1px solid #f00;
	background: pink;
}

.❤ {
	background: lightgreen;
	border: 1px solid green;
}

　　請別用這些符號。除非你能行！

　　CSS圓

　　CSS三角形是一個技術活，CSS圓也同樣如此。通過濫用CSS border-radius，你能建立很完美的圓！

circle {
	border-radius: 50%;
	width: 200px;
	height: 200px; 
	/* width and height can be anything, as long as they're equal */
}

　　你可以給你的圓增加漸變，你甚至可以使用CSS動畫來讓你的圓動起來！CSS即將有更多統一的API提供給這些圖形，但現在你可以用這種方法來建立圓了。

　　你看到了，7件你能用CSS做的事讓你很驚訝，其中一些是很有用的，一些可以在工作中用不到。請告訴我，我是否遺漏了一些在工作你經常使用優秀CSS方法。

　　原文 davidwalsh.name