看看那些能提高效率卻容易被人忽略的CSS細(xì)節(jié)

時間：2022-05-29 16:39:02 | 來源：網(wǎng)絡(luò)營銷

時間：2022-05-29 16:39:02 來源：網(wǎng)絡(luò)營銷

大家都知道，對于一個網(wǎng)站來說，CSS是網(wǎng)站必不可少的元素之一，一方面，是全新的頁面布局方式；另一方面，是酷炫的濾鏡、顏色等視覺效果。這些CSS，備受開發(fā)者們追捧，尤其是響應(yīng)式的CSS更是被雜志和博客文章鋪天蓋地的介紹。

如果說這些特性是CSS華麗的一面，那我們來看看它樸實(shí)的一面：很不起眼的東西，如選擇器、單位、函數(shù)（方法）。下面就讓我們借助億企邦的平臺看看這些效果最好的樸實(shí)的CSS細(xì)節(jié)，這些細(xì)節(jié)遠(yuǎn)遠(yuǎn)沒有那些酷炫的CSS效果那么引人注目，它們有些已經(jīng)存在一段時間了，但值得我們更好地認(rèn)識，而有些則剛剛面世，雖然不起眼，但是它們可以提高我們的工作效率。

1、相對單位

聰明又有前瞻頭腦的開發(fā)者們已經(jīng)使用相對單位了——如em或者百分比——所以，開發(fā)者們了解這個問題：往往因?yàn)樵氐睦^承性需要使用計算器作為輔助工具來計算大小。例如，現(xiàn)在普遍的做法是給頁面的字體設(shè)置全局尺寸，然后用相對單位來定義頁面中其它的元素。CSS大概會這樣寫：

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

這樣寫是沒問題，直到有個子元素需要設(shè)置一個不同的字體大小，比如，在這樣的標(biāo)簽當(dāng)中：

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

如果你要設(shè)置span的字體大小為1.2em，你需要做什么？拿出計算器，算算1.2除以1.4是多少，結(jié)果如下：

p span { font-size: 0.85714em; }

這個問題不局限于em。如果用百分比來創(chuàng)建響應(yīng)式的流式布局網(wǎng)站，而百分比是與容器相關(guān)的，所以，如果要定義一個元素為它的容器的40%，它的高是75%，寬則需要設(shè)置為53.33333%（這點(diǎn)我們也曾在億企邦的《響應(yīng)式網(wǎng)頁布局的實(shí)現(xiàn)方法原理》一文中給大家提及過）。

2、根相關(guān)的長度單位

為了修復(fù)字體大小定義的問題，現(xiàn)在可以使用單位rem（root em）。rem同樣是相對單位，但是它所對應(yīng)的是固定的基本值，這個固定的基本值也就是文檔的根元素的字體大?。ㄔ贖TML文件中，就是html元素）。假設(shè)和上個例子一樣，同樣設(shè)定10px的字體大小為根元素的大小，那么CSS這樣寫就OK了：

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

這兩個CSS規(guī)則都是相對于根元素的字體大小，這樣的代碼更加優(yōu)雅和簡便，特別是在設(shè)置簡單的數(shù)值如10px或者12px的時候。這樣和使用px值很相似，不同點(diǎn)在于rem是可擴(kuò)展的。

億企邦覺得在整篇文章介紹的特性中，rem特性相對來說是兼容性比較好，高級瀏覽器都能支持，包括IE9在內(nèi)，除了Opera Mobile。

3、窗口相關(guān)的長度單位

覺得rem單位很酷吧，如果還有另外一組單位能解決百分比的問題，那就更酷了。它和rem的道理相似，不同點(diǎn)在于，它相對的不是文檔的根元素，而是相對于設(shè)備窗口本身的大小。

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

div { height: 50vh; }

在上面的例子，高度被設(shè)定為窗口高度的一半。1vh相當(dāng)于一個百分比的窗口高度，所以50vh即是50%的窗口高度。

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

相應(yīng)地，有vmin單位，相當(dāng)于vh或者vw的最小值，最近還宣布有vmax單位會被加到規(guī)范文檔里面（雖然在這篇文章發(fā)布的時候還沒有）。

現(xiàn)在支持這個特性的有IE9+、Chrome和Safari 6。

4、運(yùn)算式的值

如果你在做響應(yīng)式的流式布局網(wǎng)站，經(jīng)常會遇到混合單位的問題——用百分比設(shè)置柵格，但是又用固定像素寬度設(shè)置margin，如：

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

如果布局只用到padding和border，你可以使用box-sizing來解決，但是對于margin就無能為力了。億企邦認(rèn)為更好、更靈活的方法是使用calc()函數(shù)，設(shè)置不同單位之間的數(shù)學(xué)方程式，如：

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

它不僅可以用來計算寬，還可以用來計算長度——如果有必要，還可以在calc()里面再加calc()。

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

5、加載字體庫的部分字體

優(yōu)越的性能往往很重要，尤其是市場上各種各樣的移動設(shè)備——導(dǎo)致連接速度的差異和不確定性——更加體現(xiàn)了這個重要性。其中一個加快頁面加載速度的方法，就是減少外部文件個數(shù)，@font-face的一個新屬性unicode-range就是為此而生。

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

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

這點(diǎn)對于使用字體圖標(biāo)的頁面尤其有用，億企邦測試過，使用unicode-range，加載字體文件的時間平均減少了0.85秒，也不是小數(shù)目了。當(dāng)然，你可能不會這么想。

這個屬性，目前可以在IE9+、Webkit瀏覽器（如Chrome和Safari）中運(yùn)行。

6、新的偽類

單位和值都應(yīng)該好好利用，但是，讓我更興奮的是選擇器和偽類。完善的選擇器模式，即使只有少數(shù)瀏覽器支持，都讓我興奮不已。引用喬布斯的話：你要把柵欄的里面修得和外面一樣漂亮，即使別人看不到里面——因?yàn)槟阕约褐馈?br>
我第一次使用:nth-of-type()的時候，簡直是一次突破，就像我沖出了思想的桎梏。好吧，我有些夸張了。但有些新的CSS偽類，確實(shí)值得狂熱一番。

7、否定偽類

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

假設(shè)：要對項目列表的奇數(shù)行進(jìn)行選擇，但是最后一行除外。如果是以前，需要這樣寫：

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

現(xiàn)在，通過設(shè)定:last-child作為否定偽類的參數(shù)，就可以把最后一個元素排除，這樣少了一行代碼，從而更加的簡潔和易維護(hù)。

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

否定偽類看起來并沒有什么驚人之處，你可以不用它，但是它還是挺實(shí)用的。我曾經(jīng)把它用在基于Webkit的項目當(dāng)中，優(yōu)勢還是挺明顯的。說實(shí)話，它是我最喜歡的偽類之一。

在本文提到的特性當(dāng)中，否定偽類是兼容性最好的，它被IE9+和高級瀏覽器支持（不需要加瀏覽器產(chǎn)商前綴）。如果你熟悉jQuery，你可能習(xí)慣用它——版本1.0開始就有了，以及相似的not()方法。

8、“適用于”偽類

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

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

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

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

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

這其實(shí)是CSS4的一部分（確切地說，是CSS選擇器第四等級），這份規(guī)范文檔還提到將會有類似的語法（以逗號隔開的復(fù)合選擇器）應(yīng)用于:not()偽類。興奮ing！

目前，:matches()可以在Chrome和Safari瀏覽器中運(yùn)行，但是要加上前綴-webkit-，F(xiàn)irefox也支持，但是要按照舊的寫法:any()，同時要加上-moz-前綴。

億企邦點(diǎn)評：

對于本文中講到的特性，最贊的一點(diǎn)是它們解決了現(xiàn)實(shí)的問題，從瑣碎而繁復(fù)的選擇器到建立響應(yīng)式網(wǎng)站的新挑戰(zhàn)。實(shí)際上，億企邦期待每一個特性被使用到最普通的項目當(dāng)中。

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