愛上樸實的CSS細節

2021-06-09 21:13:35 字數 4242 閱讀 1681

英文原文:learning to love the boring bits of css

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

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

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

相對單位

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

html 

p

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

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了:

p 

p span

這兩個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 

如果布局只用到padding和border,你可以使用box-sizing來解決,但是對於margin就無能為力了。更好、更靈活的方法是使用calc()函式,設定不同單位之間的數學方程式,如:

div 

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

這個特性ie9+和firefox都支援,firefox需要加上 -moz- 字首(在版本16或17可能不用加字首),chrome和safari也支援,但需要加上 -webkit- 字首。然而,移動webkit還不支援。

載入字型庫的部分字型

優越的效能往往很重要,尤其是市場上各種各樣的移動裝置——導致連線速度的差異和不確定性——更加體現了這個重要性。其中乙個加快頁面載入速度的方法,就是減少外部檔案個數,@font-face的乙個新屬性unicode-range就是為此而生。

這個屬性就是unicode-range(編碼範圍),代表的是編碼字型的引數範圍。在載入外部檔案的時候,只有那些被使用的字型才會被載入,而不是整套字型庫。下面的**演示了如何從foo.ttf字型庫中僅載入三個字型:

@font-face 

這點對於使用字型圖示的頁面尤其有用。我測試過,使用unicode-range,載入字型檔案的時間平均減少了0.85秒,也不是小數目了。當然,你可能不會這麼想。

這個屬性,目前可以在ie9+、webkit瀏覽器(如chrome和safari)中執行。

新的偽類

單位和值都應該好好利用,但是,讓我更興奮的是選擇器和偽類。完善的選擇器模式,即使只有少數瀏覽器支援,都讓我興奮不已。引用賈伯斯的話:你要把柵欄的裡面修得和外面一樣漂亮,即使別人看不到裡面——因為你自己知道。

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

否定偽類

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

假設:要對專案列表的奇數行進行選擇,但是最後一行除外。如果是以前,需要這樣寫:

li 

li:nth-child(odd) li:last-child

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

li 

li:nth-child(odd):not(:last-child)

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

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

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

「適用於」偽類

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

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

.home header p,.home footer p,.home aside p 

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

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

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

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

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

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

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

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

愛上樸實的CSS細節

未來的css太讓人興奮了 一方面,是全新的頁面布局方式 另一方面,是酷炫的濾鏡 顏色等視覺效果。這些css,受開發者追捧,被雜誌和部落格文章鋪天蓋地地介紹。如果說這些特性是css華麗的一面,那我們來看看它樸實的一面 很不起眼的東西,如選擇器 單位 函式 方法 我經常說這是繁瑣的東西,但我意思是它們能...

樸實的生活

五一期間看了cctv 10的 電影過節之解碼城市 突然發現其實在城市中生活的很多人在一定程度上都迷失了自己,對於自己的現在和未來缺乏深入的思考,往往是以別人的意見 或者大眾認為的成功行為作為自己的努力目標,而沒有去思考自己到底需要什麼,當遇到十字路口時該如何選擇。很慶幸自己有做總結的習慣。前一段時間...

css布局之愛上flex

display用於規定元素生產的框架型別,設定元素如何顯示.display的值可以為 none 隱藏物件。與visibility屬性的hidden值不同,其不為被隱藏的物件保留其物理空間 inline 指定物件為內聯元素。block 指定物件為塊元素。list item 指定物件為列表專案。inli...