英文原文：Learning to Love the Boring Bits of CSS
　　未來(lái)的CSS太讓人興奮了：一方面甲锡，是全新的頁(yè)面布局方式兆蕉；另一方面，是酷炫的濾鏡缤沦、顏色等視覺(jué)效果虎韵。這些CSS，受開(kāi)發(fā)者追捧缸废，被雜志和博客文章鋪天蓋地地介紹包蓝。
　　如果說(shuō)這些特性是CSS華麗的一面，那我們來(lái)看看它樸實(shí)的一面：很不起眼的東西企量，如選擇器测萎、單位、函數(shù)（方法）届巩。我經(jīng)常說(shuō)這是繁瑣的東西硅瞧，但我意思是它們能干漂亮的活，這就是我要分享的恕汇。
　　怎么說(shuō)呢腕唧，讓我們看看這些效果最好的樸實(shí)的CSS細(xì)節(jié)——這些細(xì)節(jié)遠(yuǎn)遠(yuǎn)沒(méi)有那些酷炫的CSS效果那么引人注目。它們有些已經(jīng)存在一段時(shí)間了瘾英，但值得我們更好地認(rèn)識(shí)枣接，而有些則剛剛面世。雖然不起眼缺谴，但是它們可以提高我們的工作效率——以謙虛的姿態(tài)但惶。
相對(duì)單位
　　聰明又有前瞻頭腦的開(kāi)發(fā)者們已經(jīng)使用相對(duì)單位了——如em或者百分比——所以，開(kāi)發(fā)者們了解這個(gè)問(wèn)題：往往因?yàn)樵氐睦^承性而需要使用計(jì)算器作為輔助工具來(lái)計(jì)算大小。例如榆骚，現(xiàn)在普遍的做法是給頁(yè)面的字體設(shè)置全局尺寸片拍，然后用相對(duì)單位來(lái)定義頁(yè)面中其它的元素。CSS大概會(huì)這樣寫(xiě)：
html { font-size: 10px; } p { font-size: 1.4em; }

這樣寫(xiě)是沒(méi)問(wèn)題妓肢，直到有個(gè)子元素需要設(shè)置一個(gè)不同的字體大小，比如苫纤，在這樣的標(biāo)簽當(dāng)中：
The cat sat on the <span>mat</span>.

如果你要設(shè)置span的字體大小為1.2em碉钠，你需要做什么？拿出計(jì)算器卷拘，算算1.2除以1.4是多少喊废，結(jié)果如下：
p span { font-size: 0.85714em; }

這個(gè)問(wèn)題不局限于em。如果用百分比來(lái)創(chuàng)建響應(yīng)式的流式布局網(wǎng)站栗弟，而百分比是與容器相關(guān)的污筷，所以，如果要定義一個(gè)元素為它的容器的40%乍赫，它的高是75%瓣蛀，寬則需要設(shè)置為53.33333%。
　　很明顯雷厂，這很不方便惋增。
根相關(guān)的長(zhǎng)度單位
　　為了修復(fù)字體大小定義的問(wèn)題，現(xiàn)在可以使用單位rem（root em）改鲫。rem同樣是相對(duì)單位诈皿，但是它所對(duì)應(yīng)的是固定的基本值，這個(gè)固定的基本值也就是文檔的根元素的字體大邢窦（在HTML文件中稽亏，就是html元素）。假設(shè)和上個(gè)例子一樣缕题，同樣設(shè)定10px的字體大小為根元素的大小截歉，那么CSS這樣寫(xiě)就OK了：
p { font-size: 1.4rem; } p span { font-size: 1.2rem; }

這兩個(gè)CSS規(guī)則都是相對(duì)于根元素的字體大小，這樣的代碼更加優(yōu)雅和簡(jiǎn)便避除，特別是在設(shè)置簡(jiǎn)單的數(shù)值如10px或者12px的時(shí)候怎披。這樣和使用px值很相似，不同點(diǎn)在于rem是可擴(kuò)展的瓶摆。
　　在整篇文章介紹的特性中凉逛，rem特性相對(duì)來(lái)說(shuō)是兼容性比較好，高級(jí)瀏覽器都能支持群井，包括IE9在內(nèi)状飞，除了Opera Mobile。
窗口相關(guān)的長(zhǎng)度單位
　　覺(jué)得rem單位很酷吧，如果還有另外一組單位能解決百分比的問(wèn)題诬辈，那就更酷了酵使。它和rem的道理相似，不同點(diǎn)在于焙糟，它相對(duì)的不是文檔的根元素口渔，而是相對(duì)于設(shè)備窗口本身的大小。
　　這兩個(gè)單位就是vh和vw穿撮，即是相對(duì)于窗口大小的高和寬缺脉。每個(gè)單位在前面加上數(shù)字，代表的是多少個(gè)百分比悦穿。
div { height: 50vh; }

在上面的例子攻礼，高度被設(shè)定為窗口高度的一半。1vh相當(dāng)于一個(gè)百分比的窗口高度栗柒，所以50vh即是50%的窗口高度礁扮。
　　如果窗口大小變了，那么這個(gè)值也隨之改變瞬沦。這相對(duì)百分比來(lái)說(shuō)太伊，好處是不需要擔(dān)心父容器，不管它的父容器如何蛙埂，10vw的元素會(huì)一直是10%的窗口大小倦畅。
　　相應(yīng)地，有vmin單位绣的，相當(dāng)于vh或者vw的最小值叠赐，最近還宣布有vmax單位會(huì)被加到規(guī)范文檔里面（雖然在這篇文章發(fā)布的時(shí)候還沒(méi)有）。
　　現(xiàn)在支持這個(gè)特性的有IE9+屡江、Chrome和Safari 6芭概。
運(yùn)算式的值
　　如果你在做響應(yīng)式的流式布局網(wǎng)站，經(jīng)常會(huì)遇到混合單位的問(wèn)題——用百分比設(shè)置柵格惩嘉，但是又用固定像素寬度設(shè)置margin罢洲。如：
div { margin: 0 20px; width: 33%;}

如果布局只用到padding和border，你可以使用box-sizing來(lái)解決文黎，但是對(duì)于margin就無(wú)能為力了惹苗。更好、更靈活的方法是使用calc()函數(shù)耸峭，設(shè)置不同單位之間的數(shù)學(xué)方程式桩蓉，如：
div { margin: 0 20px; width: calc(33% - 40px);}

它不僅可以用來(lái)計(jì)算寬，還可以用來(lái)計(jì)算長(zhǎng)度——如果有必要劳闹，還可以在calc()里面再加calc()院究。
　　這個(gè)特性IE9+和Firefox都支持洽瞬，F(xiàn)irefox需要加上 -moz- 前綴（在版本16或17可能不用加前綴），Chrome和Safari也支持业汰，但需要加上 -webkit- 前綴伙窃。然而，移動(dòng)Webkit還不支持样漆。
加載字體庫(kù)的部分字體
　　優(yōu)越的性能往往很重要为障，尤其是市場(chǎng)上各種各樣的移動(dòng)設(shè)備——導(dǎo)致連接速度的差異和不確定性——更加體現(xiàn)了這個(gè)重要性。其中一個(gè)加快頁(yè)面加載速度的方法氛濒，就是減少外部文件個(gè)數(shù)产场，@font-face的一個(gè)新屬性u(píng)nicode-range就是為此而生。
　　這個(gè)屬性就是unicode-range（編碼范圍）舞竿，代表的是編碼字體的參數(shù)范圍。在加載外部文件的時(shí)候窿冯，只有那些被使用的字體才會(huì)被加載骗奖，而不是整套字體庫(kù)。下面的代碼演示了如何從foo.ttf字體庫(kù)中僅加載三個(gè)字體：
@font-face {font-family: foo;src: url('foo.ttf');unicode-range: U+31-33;}

這點(diǎn)對(duì)于使用字體圖標(biāo)的頁(yè)面尤其有用醒串。我測(cè)試過(guò)执桌，使用unicode-range，加載字體文件的時(shí)間平均減少了0.85秒芜赌，也不是小數(shù)目了仰挣。當(dāng)然，你可能不會(huì)這么想缠沈。
　　這個(gè)屬性膘壶，目前可以在IE9+、Webkit瀏覽器（如Chrome和Safari）中運(yùn)行洲愤。
新的偽類(lèi)
　　單位和值都應(yīng)該好好利用颓芭，但是，讓我更興奮的是選擇器和偽類(lèi)柬赐。完善的選擇器模式亡问，即使只有少數(shù)瀏覽器支持，都讓我興奮不已肛宋。引用喬布斯的話：你要把柵欄的里面修得和外面一樣漂亮州藕，即使別人看不到里面——因?yàn)槟阕约褐馈?br> 　　我第一次使用:nth-of-type()的時(shí)候，簡(jiǎn)直是一次突破酝陈，就像我沖出了思想的桎梏床玻。好吧，我有些夸張了后添。但有些新的CSS偽類(lèi)笨枯，確實(shí)值得狂熱一番薪丁。
否定偽類(lèi)
　　你大概不知道 :not() 偽類(lèi)的好，除非你親自實(shí)踐一番馅精。帶有參數(shù)的 :not() 其實(shí)就是普通的選擇器——不是復(fù)合選擇器严嗜。一組元素加上選擇器 :not()，表示滿足這個(gè)參數(shù)的元素會(huì)被排除出去洲敢。聽(tīng)起來(lái)有些復(fù)雜吧漫玄？但是實(shí)際上非常簡(jiǎn)單。
　　假設(shè)：要對(duì)項(xiàng)目列表的奇數(shù)行進(jìn)行選擇压彭，但是最后一行除外睦优。如果是以前，需要這樣寫(xiě)：
li { color: #00F; } li:nth-child(odd) { color: #F00; } li:last-child { color: #00F; }

現(xiàn)在壮不，通過(guò)設(shè)定:last-child作為否定偽類(lèi)的參數(shù)汗盘，就可以把最后一個(gè)元素排除，這樣少了一行代碼询一，從而更加的簡(jiǎn)潔和易維護(hù)隐孽。
li { color: #00F; } li:nth-child(odd):not(:last-child) { color: #F00; }

否定偽類(lèi)看起來(lái)并沒(méi)有什么驚人之處，你可以不用它健蕊，但是它還是挺實(shí)用的菱阵。我曾經(jīng)把它用在基于Webkit的項(xiàng)目當(dāng)中，優(yōu)勢(shì)還是挺明顯的缩功。說(shuō)實(shí)話晴及，它是我最喜歡的偽類(lèi)之一。
　　是的嫡锌，我有最喜歡的偽類(lèi)虑稼。
　　在本文提到的特性當(dāng)中，否定偽類(lèi)是兼容性最好的世舰，它被IE9+和高級(jí)瀏覽器支持（不需要加瀏覽器產(chǎn)商前綴）动雹。如果你熟悉jQuery，你可能習(xí)慣用它——版本1.0開(kāi)始就有了跟压，以及相似的not()方法胰蝠。
“適用于”偽類(lèi)
　　:matches() 偽類(lèi)可以用普通的選擇器、復(fù)合選擇器震蒋、逗號(hào)隔開(kāi)的列表或任何的選擇器組合作為參數(shù)茸塞。太棒了！但是查剖，它能做什么钾虐？
　　:matches() 偽類(lèi)最強(qiáng)大的地方就是聚合多行選擇器。例如笋庄，要選擇父容器里面其中幾個(gè)不同子容器里面的p元素效扫，在這之前倔监，代碼或許會(huì)寫(xiě)成這樣：
.home header p,.home footer p,.home aside p {color: #F00;}

有了:matches()偽類(lèi)，就可以把共同點(diǎn)提取出來(lái)菌仁，縮減代碼量浩习。該例子里面，選擇器的共同點(diǎn)是以home為起點(diǎn)济丘、以p為終點(diǎn)谱秽，所以可以用:matches()把中間的所有元素集合起來(lái)。是不是有些困惑摹迷？看看代碼就明白了：
.home :matches(header,footer,aside) p { color: #F00; }

這其實(shí)是CSS4的一部分（確切地說(shuō)疟赊，是CSS選擇器第四等級(jí)），這份規(guī)范文檔還提到將會(huì)有類(lèi)似的語(yǔ)法（以逗號(hào)隔開(kāi)的復(fù)合選擇器）應(yīng)用于:not()偽類(lèi)峡碉。興奮ing近哟！
　　目前，:matches()可以在Chrome和Safari瀏覽器中運(yùn)行鲫寄，但是要加上前綴-webkit-椅挣，F(xiàn)irefox也支持，但是要按照舊的寫(xiě)法:any()塔拳，同時(shí)要加上-moz-前綴。
你愛(ài)上這些樸實(shí)的CSS細(xì)節(jié)了嗎峡竣？
　　這篇文章講到的特性靠抑，最贊的一點(diǎn)是它們解決了現(xiàn)實(shí)的問(wèn)題，從瑣碎而繁復(fù)的選擇器到建立響應(yīng)式網(wǎng)站的新挑戰(zhàn)适掰。實(shí)際上颂碧，我期待每一個(gè)特性被使用到最普通的項(xiàng)目當(dāng)中。（web前端學(xué)習(xí)交流群：328058344 禁止閑聊类浪，非喜勿進(jìn)Ｔ爻恰）

新特性如濾鏡可能很直觀很華麗，但是我更愿意發(fā)現(xiàn)隱藏在深處的實(shí)用小技巧费就。
　　在積極探索的過(guò)程中诉瓦，每一個(gè)特性可以讓你的職業(yè)生涯更順利——想到這里，就不會(huì)覺(jué)得繁瑣了