愛上樸實的CSS細節

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

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

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

相對單位

聰明又有前瞻頭腦的開發者們已經使用相對單位了——如em或者百分比——所以，開發者們了解這個問題：往往因為元素的繼承性而需要使用計算器作為輔助工具來計算大小。例如，現在普遍的做法是給頁面的字型設定全域性尺寸，然後用相對單位來定義頁面中其它的元素。css大概會這樣寫：

html

這樣寫是沒問題，直到有個子元素需要設定乙個不同的字型大小，比如，在這樣的標籤當中：

the cat sat on the mat.

如果你要設定span的字型大小為1.2em，你需要做什麼？拿出計算器，算算1.2除以1.4是多少，結果如下：

p span

這個問題不侷限於em。如果用百分比來建立響應式的流式布局**，而百分比是與容器相關的，所以，如果要定義乙個元素為它的容器的40%，它的高是75%，寬則需要設定為53.33333%。很明顯，這很不方便。

根相關的長度單位

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

這兩個css規則都是相對於根元素的字型大小，這樣的**更加優雅和簡便，特別是在設定簡單的數值如10px或者12px的時候。這樣和使用px值很相似，不同點在於rem是可擴充套件的。

在整篇文章介紹的特性中，rem特性相對來說是相容性比較好，高階瀏覽器都能支援，包括ie9在內，除了opera mobile。

視窗相關的長度單位

覺得rem單位很酷吧，如果還有另外一組單位能解決百分比的問題，那就更酷了。它和rem的道理相似，不同點在於，它相對的不是文件的根元素，而是相對於裝置視窗本身的大小。

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

div

在上面的例子，高度被設定為視窗高度的一半。1vh相當於乙個百分比的視窗高度，所以50vh即是50%的視窗高度。

如果視窗大小變了，那麼這個值也隨之改變。這相對百分比來說，好處是不需要擔心父容器，不管它的父容器如何，10vw的元素會一直是10%的視窗大小。

相應地，有vmin單位，相當於vh或者vw的最小值，最近還宣布有vmax單位會被加到規範文件裡面（雖然在這篇文章發布的時候還沒有）。

現在支援這個特性的有ie9+、chrome和safari 6。

表示式的值

div

現在，通過設定:last-child作為否定偽類的引數，就可以把最後乙個元素排除，這樣少了一行**，從而更加的簡潔和易維護。

li

否定偽類看起來並沒有什麼驚人之處，你可以不用它，但是它還是挺實用的。我曾經把它用在基於webkit的專案當中，優勢還是挺明顯的。說實話，它是我最喜歡的偽類之一。

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

在本文提到的特性當中，否定偽類是相容性最好的，它被ie9+和高階瀏覽器支援（不需要加瀏覽器產商字首）。如果你熟悉jquery，你可能習慣用它——版本1.0開始就有了，以及相似的not()方法。

「適用於」偽類

:matches()偽類可以用普通的選擇器、復合選擇器、逗號隔開的列表或任何的選擇器組合作為引數。太棒了！但是，它能做什麼？

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

.home header p,

有了:matches()偽類，就可以把共同點提取出來，縮減**量。該例子裡面，選擇器的共同點是以home為起點、以p為終點，所以可以用:matches()把中間的所有元素集合起來。是不是有些困惑？看看**就明白了：

.home :matches(header,footer,aside) p

這其實是css4的一部分（確切地說，是css選擇器第四等級），這份規範文件還提到將會有類似的語法（以逗號隔開的復合選擇器）應用於:not()偽類。興奮ing！

目前，:matches()可以在chrome和safari瀏覽器中執行，但是要加上字首-webkit-，firefox也支援，但是要按照舊的寫法:any()，同時要加上-moz-字首。

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

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

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