css 樣式的一些細節

將來的CSS太讓人興奮了：一方面，是全新的頁面佈局方式；另外一方面，是酷炫的濾鏡、顏色等視覺效果。這些CSS，受開發者追捧，被雜誌和博客文章鋪天蓋地地介紹。

　　若是說這些特性是CSS華麗的一面，那咱們來看看它樸實的一面：很不起眼的東西，如選擇器、單位、函數（方法）。我常常說這是繁瑣的東西，但我意思是它們能幹漂亮的活，這就是我要分享的。

　　怎麼說呢，讓咱們看看這些效果最好的樸實的CSS細節——這些細節遠遠沒有那些酷炫的CSS效果那麼引人注目。它們有些已經存在一段時間了，但值得咱們更好地認識，而有些則剛剛面世。雖然不起眼，可是它們能夠提升咱們的工做效率——以謙虛的姿態。

　　相對單位

　　聰明又有前瞻頭腦的開發者們已經使用相對單位了——如em或者百分比——因此，開發者們瞭解這個問題：每每由於元素的繼承性而須要使用計算器做爲輔助工具來計算大小。例如，如今廣泛的作法是給頁面的字體設置全局尺寸，而後用相對單位來定義頁面中其它的元素。CSS大概會這樣寫：

html { font-size: 10px; } p { font-size: 1.4em; }

　　這樣寫是沒問題，直到有個子元素須要設置一個不一樣的字體大小，好比，在這樣的標籤當中：

The cat sat on the <span>mat</span>.

　　若是你要設置span的字體大小爲1.2em，你須要作什麼？拿出計算器，算算1.2除以1.4是多少，結果以下：

p span { font-size: 0.85714em; }

　　這個問題不侷限於em。若是用百分比來建立響應式的流式佈局網站，而百分比是與容器相關的，因此，若是要定義一個元素爲它的容器的40%，它的高是75%，寬則須要設置爲53.33333%。

　　很明顯，這很不方便。

　　根相關的長度單位

　　爲了修復字體大小定義的問題，如今可使用單位rem（root em）。rem一樣是相對單位，可是它所對應的是固定的基本值，這個固定的基本值也就是文檔的根元素的字體大小（在HTML文件中，就是html元素）。假設和上個例子同樣，一樣設定10px的字體大小爲根元素的大小，那麼CSS這樣寫就OK了：

p { font-size: 1.4rem; } p span { font-size: 1.2rem; }

　　這兩個CSS規則都是相對於根元素的字體大小，這樣的代碼更加優雅和簡便，特別是在設置簡單的數值如10px或者12px的時候。這樣和使用px值很類似，不一樣點在於rem是可擴展的。

　　在整篇文章介紹的特性中，rem特性相對來講是兼容性比較好，高級瀏覽器都能支持，包括IE9在內，除了Opera Mobile。

　　窗口相關的長度單位

　　以爲rem單位很酷吧，若是還有另一組單位能解決百分比的問題，那就更酷了。它和rem的道理類似，不一樣點在於，它相對的不是文檔的根元素，而是相對於設備窗口自己的大小。

　　這兩個單位就是vh和vw，便是相對於窗口大小的高和寬。每一個單位在前面加上數字，表明的是多少個百分比。

div { height: 50vh; }

　　在上面的例子，高度被設定爲窗口高度的一半。1vh至關於一個百分比的窗口高度，因此50vh便是50%的窗口高度。

　　若是窗口大小變了，那麼這個值也隨之改變。這相對百分比來講，好處是不須要擔憂父容器，無論它的父容器如何，10vw的元素會一直是10%的窗口大小。

　　相應地，有vmin單位，至關於vh或者vw的最小值，最近還宣佈有vmax單位會被加到規範文檔裏面（雖然在這篇文章發佈的時候尚未）。

　　如今支持這個特性的有IE9+、Chrome和Safari 6。

　　運算式的值

　　若是你在作響應式的流式佈局網站，常常會遇到混合單位的問題——用百分比設置柵格，可是又用固定像素寬度設置margin。如：

div { margin: 0 20px; width: 33%;}

　　若是佈局只用到padding和border，你可使用box-sizing來解決，可是對於margin就無能爲力了。更好、更靈活的方法是使用calc()函數，設置不一樣單位之間的數學方程式，如：

div { margin: 0 20px; width: calc(33% - 40px);}

　　它不只能夠用來計算寬，還能夠用來計算長度——若是有必要，還能夠在calc()裏面再加calc()。

　　這個特性IE9+和Firefox都支持，Firefox須要加上 -moz- 前綴（在版本16或17可能不用加前綴），Chrome和Safari也支持，但須要加上 -webkit- 前綴。然而，移動Webkit還不支持。

　　加載字體庫的部分字體

　　優越的性能每每很重要，尤爲是市場上各類各樣的移動設備——致使鏈接速度的差別和不肯定性——更加體現了這個重要性。其中一個加快頁面加載速度的方法，就是減小外部文件個數，@font-face的一個新屬性unicode-range就是爲此而生。

　　這個屬性就是unicode-range（編碼範圍），表明的是編碼字體的參數範圍。在加載外部文件的時候，只有那些被使用的字體纔會被加載，而不是整套字體庫。下面的代碼演示瞭如何從foo.ttf字體庫中僅加載三個字體：

@font-face {font-family: foo;src: url('foo.ttf');unicode-range: U+31-33;}

　　這點對於使用字體圖標的頁面尤爲有用。我測試過，使用unicode-range，加載字體文件的時間平均減小了0.85秒，也不是小數目了。固然，你可能不會這麼想。

　　這個屬性，目前能夠在IE9+、Webkit瀏覽器（如Chrome和Safari）中運行。

　　新的僞類

　　單位和值都應該好好利用，可是，讓我更興奮的是選擇器和僞類。完善的選擇器模式，即便只有少數瀏覽器支持，都讓我興奮不已。引用喬布斯的話：你要把柵欄的裏面修得和外面同樣漂亮，即便別人看不到裏面——由於你本身知道。

　　我第一次使用:nth-of-type()的時候，簡直是一次突破，就像我衝出了思想的桎梏。好吧，我有些誇張了。但有些新的CSS僞類，確實值得狂熱一番。

　　否認僞類

　　你大概不知道 :not() 僞類的好，除非你親自實踐一番。帶有參數的 :not() 其實就是普通的選擇器——不是複合選擇器。一組元素加上選擇器 :not()，表示知足這個參數的元素會被排除出去。聽起來有些複雜吧？可是實際上很是簡單。

　　假設：要對項目列表的奇數行進行選擇，可是最後一行除外。若是是之前，須要這樣寫：

li { color: #00F; } li:nth-child(odd) { color: #F00; } li:last-child { color: #00F; }

　　如今，經過設定:last-child做爲否認僞類的參數，就能夠把最後一個元素排除，這樣少了一行代碼，從而更加的簡潔和易維護。

li { color: #00F; } li:nth-child(odd):not(:last-child) { color: #F00; }

　　否認僞類看起來並無什麼驚人之處，你能夠不用它，可是它仍是挺實用的。我曾經把它用在基於Webkit的項目當中，優點仍是挺明顯的。說實話，它是我最喜歡的僞類之一。

　　是的，我有最喜歡的僞類。

　　在本文提到的特性當中，否認僞類是兼容性最好的，它被IE9+和高級瀏覽器支持（不須要加瀏覽器產商前綴）。若是你熟悉jQuery，你可能習慣用它——版本1.0開始就有了，以及類似的not()方法。

　　「適用於」僞類

　　:matches() 僞類能夠用普通的選擇器、複合選擇器、逗號隔開的列表或任何的選擇器組合做爲參數。太棒了！可是，它能作什麼？

　　:matches() 僞類最強大的地方就是聚合多行選擇器。例如，要選擇父容器裏面其中幾個不一樣子容器裏面的p元素，在這以前，代碼或許會寫成這樣：

.home header p,.home footer p,.home aside p {color: #F00;}

　　有了:matches()僞類，就能夠把共同點提取出來，縮減代碼量。該例子裏面，選擇器的共同點是以home爲起點、以p爲終點，因此能夠用:matches()把中間的全部元素集合起來。是否是有些困惑？看看代碼就明白了：

.home :matches(header,footer,aside) p { color: #F00; }

　　這實際上是CSS4的一部分（確切地說，是CSS選擇器第四等級），這份規範文檔還提到將會有相似的語法（以逗號隔開的複合選擇器）應用於:not()僞類。興奮ing！

　　目前，:matches()能夠在Chrome和Safari瀏覽器中運行，可是要加上前綴-webkit-，Firefox也支持，可是要按照舊的寫法:any()，同時要加上-moz-前綴。

　　你愛上這些樸實的CSS細節了嗎？

　　這篇文章講到的特性，最讚的一點是它們解決了現實的問題，從瑣碎而繁複的選擇器到創建響應式網站的新挑戰。實際上，我期待每個特性被使用到最普通的項目當中。

　　新特性如濾鏡可能很直觀很華麗，可是我更願意發現隱藏在深處的實用小技巧。

　　在積極探索的過程當中，每個特性可讓你的職業生涯更順利——想到這裏，就不會以爲繁瑣了。