網(wǎng)站前端人員需要熟悉的CSS技巧

發(fā)表日期：2016/2/21 13:19:18 文章編輯：瀏覽次數(shù)：3135

此文為譯文，作者在這篇文章中提到了12條我們前端人員在日常工作中不是特別熟悉而又確實可以使用或者瀏覽器是可以很好支持的CSS技巧，熟知這些點，對我們深入研究CSS有很好的幫助。

鑒于本人英語水平有限，有些地方的翻譯可能不是特別準(zhǔn)確，或者不是很容易理解，在譯文中，我也用括號的方式加了一些簡單的算是注釋的個人理解。各位讀者也可以結(jié)合著原文去閱讀，以便更好地理解作者所表達(dá)的意思！

原文地址：http://www.sitepoint.com/12-little-known-css-facts-the-sequel/

翻譯：TGideas--johnsqliu

-----------------------------------------------------------------------------------------------

一年前我發(fā)表了《12條鮮有人知的css的事實》，到今天為止，它已成為站點里最受歡迎的文章。那篇文章發(fā)表到現(xiàn)在，我已經(jīng)為新的文章收集了更多css小技巧。我們都知道，所有成功的電影都應(yīng)該催生出一部時髦的續(xù)集，對吧？

圖片來自站點/Natalia Balska

接下來，我們馬上進(jìn)入今年的開發(fā)者十二條。我能肯定的是，大部分人對這些多少都有些了解，但你們也可以在評論中讓我知道哪些對你來說是陌生的。

1、 `border-radius`屬性可以使用'/'（斜杠）標(biāo)簽

這是我四年以前在我的站點寫的一些東西，但也行有些新手包括有經(jīng)驗的開發(fā)者，還是不太熟悉這些特性。

不管你信不信，下邊是有效的border-radius代碼:

.box {
 border-radius: 35px 25px 30px 20px / 35px 25px 15px 30px;}

如果你之前沒有見過這些，這里你可能會有一些困惑，所以這里有規(guī)范的解釋：

“如果斜杠/前后都設(shè)了值，那么斜杠前面的值就設(shè)定橫向的圓角半徑值，而斜杠后面的值就是設(shè)定縱向的半徑值。如果沒有斜杠的話，就把橫向跟縱向的值設(shè)定為相等。”

規(guī)范還提供了下面的圖：

圖片注釋：“border-top-left-radius: 55pt 25pt 的兩個值定義了這個圓角的曲率（彎曲度） ”

所以，斜杠在值中的作用是讓你創(chuàng)建不對稱（橫向跟縱向值）的圓角曲率。如果你想更詳細(xì)地了解這些，請查看我上面原文的鏈接，或者，可以試一下MDN提供的方便互動的例子：

很多border-radius 生成器都是不允許你去設(shè)置這些項的值。這個MDN生成器是我發(fā)現(xiàn)的唯一一個可以讓你去修改的這些值的生成器。

2、使用`bolder`、`lighter`相關(guān)關(guān)鍵字進(jìn)行`font-weight`屬性的定義

正常來說你所看到的font-weight 屬性的定義，它的值要么是normal要么是bold。你也偶爾能看到整數(shù)以整百為增量的值：100,200、、最大到900.

然而，bolder跟lighter這兩個值經(jīng)常會被忘記。

根據(jù)規(guī)范定義，這兩個關(guān)鍵詞指定了比繼承值更粗或更細(xì)的值。它的出現(xiàn)會讓你在處理一個比簡單的‘bold’更粗一點或者比正常文本更細(xì)一點的多種權(quán)重的字號的時候表現(xiàn)的更加明顯。（這塊可能會有點難理解，其實這里是跟字體本身有關(guān)聯(lián)的，如果你的字體，比如例子中用到的‘Exo 2’字體中，因為這個字體最細(xì)為100，bolder一下就變成400，再bolder一下是700，其實它這個bolder跟lighter是有個固定跳到的數(shù)值的，只會匹配到400,700,900這樣的值里，當(dāng)你的繼承值為100、200或300，bolder一下，這個bolder的值都會是400，繼承值為900,800，lighter一下，這個值都一樣會是700，所以兩個關(guān)鍵字其實是只會是400、700、900三個值的）

請看下邊CodePen 的demo：

在這個實例中，我使用的是一個有18款不同樣式的Exo 2字體。我的demo中只使用了非斜體樣式，這對整百為單位的字號權(quán)重來說已經(jīng)足夠了。

這個實例包含了12層擁有不同font-weight 值的‘box’元素，引入‘bolder’和‘lighter’以便你能了解到字體的權(quán)重在不同的上下文繼承中有什么樣的效果。下面是實例中的CSS。注意代碼中的注釋，以及記住每一個后面的‘box’都是嵌套在前一層里面的。

.box {
 font-weight: 100;}.box-2 {
 font-weight: bolder; /* maps to 400 */}.box-3 {
 font-weight: bolder; /* maps to 700 */}.box-4 {
 font-weight: 400;}.box-5 {
 font-weight: bolder; /* maps to 700 */}.box-6 {
 font-weight: bolder; /* maps to 900 */}.box-7 {
 font-weight: 700;}.box-8 {
 font-weight: bolder; /* maps to 900 */}.box-9 {
 font-weight: bolder; /* maps to 900 */}.box-10 {
 font-weight: lighter; /* maps to 700 */}.box-11 {
 font-weight: lighter; /* maps to 400 */}.box-12 {
 font-weight: lighter; /* maps to 100 */}

在這個案例中，‘bolder’和‘lighter’關(guān)鍵詞只會匹配到100,400,700和900的值。九種不同的狀態(tài)，這兩個關(guān)鍵詞都不會匹配到200,300,500,600和800的值。

這是因為你告訴瀏覽器在‘bold’和‘light’中去選擇接下來的權(quán)重。所以它不會選擇成最大或最小的權(quán)重，而是僅僅根據(jù)它所繼承的選擇一個相對粗或細(xì)一點的權(quán)重。但是，如果字體的最低權(quán)重是300（比如 Open Sans這個字體），而且上下文繼承值是400，那么‘lighter’的值就會匹配到300.

這個大家一開始可能會有些疑惑，但你可以反復(fù)折騰上面的demo去看這些關(guān)鍵詞是怎么工作的。

3、關(guān)于`outline-offset`屬性

outline 屬性由于它能夠幫助調(diào)試而被眾所周知（它不影響頁面流）。規(guī)范上增加了一個outline-offset屬性，它的作用完全跟它名字所表示的一樣--讓你定義它的外框線應(yīng)該距離元素本身的偏移量。

上面的demo中，通過拖動范圍滑動條向左或向右來看外邊框偏移量的改變。示例中的值從0px到30px，當(dāng)然你完全可以通過css來想要多大就大。需要注意的就是，雖然outline屬性是一個簡寫屬性，但它不包含outline-offset屬性，所以你每次都需要再單獨定義outline-offset。

outline-offset屬性唯一的缺點就是，它在IE瀏覽器（即使是IE11）中不起效。

4、關(guān)于`table-layout`屬性

你可能會想，這是很老的信息了。我對display: table很熟悉，最早用來實現(xiàn)垂直居中的一種方法。但那不是我想說，注意我要說的是table-layout屬性，而不是display屬性。

table-layout屬性不像CSS的其他屬性那樣容易解釋，所以我們還是先來看看規(guī)范是如何解釋的：

"根據(jù)這個算法，table的橫向布局不依賴于單元格的內(nèi)容；它僅僅依賴于表格的寬度、列的寬度以及邊框和單元格的間距"

這可能也是W3C規(guī)范史上第一次出現(xiàn)這樣很難理解的東西--LOL JK。

結(jié)合一個生動的例子能更好地理解。在下列的demo中，該表格在css中增加了

table-layout: fixed。點擊切換按鈕去可以切換該效果關(guān)閉與打開。

在上面的例子中，你可以看到使用table-layout: fixed 相對于默認(rèn)的auto 值的優(yōu)點。這可能并不總是最佳或者必須的選擇，但當(dāng)你在處理有可變寬度數(shù)據(jù)單元格的表格時，這是一個不錯的選擇。

Chris Coyier去年為這個屬性做了一個偉大的改進(jìn)，所以如果你想要有一個更全面地認(rèn)識，這是最好的資料。

5、`vertical-align`屬性用在表格跟非表格中的時候表現(xiàn)不一樣

如果你在2000年或者更早就開始接觸網(wǎng)站編程，或者你處理過很多HTML電子郵件的話，那么你可能會認(rèn)為vertical-align 屬性是對老的HTML4中valign屬性（一個在HTML5里過時的，不符合功能要求的標(biāo)簽）的一個標(biāo)準(zhǔn)升級。

但在CSS中vertical-align 并不是起到那樣的作用。除開表格，我認(rèn)為這個屬性更牛逼的地方并不在于表格中的表現(xiàn)。

所以，這個屬性被應(yīng)用于常規(guī)的元素跟表格單元的時候有什么不一樣的地方呢？

當(dāng)vertical-align 不是應(yīng)用在表格單元的時候，它遵循下邊這些基本規(guī)則：

它只在inline或inline-block元素中起效。
它對元素中的內(nèi)容不起效，但能改變該元素相對于其他inline或inline-block元素的對齊。
它受文本/字體屬性（比如行高line-height）或者相鄰inline或inline-block元素的大小設(shè)置的影響。

來看個實例：

vertical-align屬性定義在input元素上，通過點擊相應(yīng)的按鈕，你可以改變vertical-align的值為按鈕上對應(yīng)的值。你會發(fā)現(xiàn)每個值都會改變input 元素的位置。

這個實例可以初步地認(rèn)識這個屬性以及它對應(yīng)的屬性值。更進(jìn)一步地了解，我們可以看一下 Christopher Aue’s 2014 post。

當(dāng)它被應(yīng)用到表格中的時候，vertical-align又表現(xiàn)的很不一樣。在這個實例中，把這個屬性或者屬性值應(yīng)用在一個或多個表格單元，表格單元的內(nèi)容會被不同的屬性值所影響。

如上面實例所示，只有四個屬性值在表格中起效，雖然左邊這個單元設(shè)置了baseline 屬性起作用，設(shè)置了vertical-align 的表格單元內(nèi)的文本在對齊方式起主要的作用。

6、偽元素`::first-letter`比你想象中更靈活

偽元素::first-letter可以給元素的第一個字母定義樣式，讓你實現(xiàn)在印刷中多年前就有的段落效果（drop-cap 印刷的書本中經(jīng)常能看到的段落中的第一個字比其他字號要大的效果）。

有個好消息就是瀏覽器快要出一個關(guān)于元素的首字母構(gòu)成的標(biāo)準(zhǔn)了。我最早在 Matt Andrews的twitter上看到有關(guān)這個推文，雖然他僅僅是發(fā)推文吐槽::first-letter選擇器很糟糕。下邊來看下他在CodePen 的實例：

四大瀏覽器對這個的處理結(jié)果都是一樣的，所以我覺得這是一個正確的表現(xiàn)。但如果是括號的一半（‘（’）作為首字母的時候，這可能表現(xiàn)的有點奇怪。這更像是‘首字符’，所以我建議它作為一個新的偽類。

7、你可以在HTML class列表中使用無效字符作為分隔符

這個概念是Ben Everard在2013年的時候提出，而且我認(rèn)為它值得推廣一下。Ben的觀點是用斜杠去將他的HTML類名進(jìn)行分組，以便他的代碼能夠更好地閱讀或瀏覽。他的觀點認(rèn)為，轉(zhuǎn)義斜杠是一個無效字符，瀏覽器會無視它。

所以你的HTML實例可能是這樣的：

使用斜杠后，變成這樣：

你也可以使用任何字符（無效的或者空字符）去實現(xiàn)同樣的效果：

所有這些都是有效的，你也可以在下面的實例中去測試一下：

這些我所指無效的分隔符不能作為你樣式里的類名。所以下邊的寫法是錯誤的，所寫的樣式也不會起效：

./ {
 color: blue;}

你如果非要用這些字符在你樣式里用來選中對應(yīng)的html元素的話，你可以用工具把他們進(jìn)行轉(zhuǎn)義后再在CSS中進(jìn)行使用，所以上面的例子如果這樣寫的話是可以生效的：

.\/ {
 color: blue;}

另外，Unicode 字符可以不用轉(zhuǎn)義，這樣的話你就可以做些像下邊這樣瘋狂的嘗試：

對應(yīng)的樣式：

.? {
 color: hotpink;}.★ {
 color: yellow;}

當(dāng)然，你也可以將這些字符進(jìn)行轉(zhuǎn)義，而不是直接將這些字符插入到頁面中。下邊的代碼跟前面的代碼塊效果一樣：

.\2665 {
 color: hotpink;}.\2605 {
 color: yellow;}

8、動畫重復(fù)的次數(shù)可以是帶小數(shù)的值

在寫CSS關(guān)鍵幀動畫的時候，你應(yīng)該可以用animation-iteration-count 屬性來定義動畫重復(fù)執(zhí)行的次數(shù)：

.example {
 animation-iteration-count: 3;}

這個例子中的整數(shù)值將會讓這個動畫重復(fù)執(zhí)行3次。但你可能不知道這里我們可以使用小數(shù)值：

.example {
 animation-iteration-count: .5;}

在這個案例中，這個動畫將執(zhí)行半次（它會在第一次動畫循環(huán)的中途停止）。我們來看一個兩個球在頁面上的動畫案例，上面的那個球設(shè)置動畫重復(fù)的次數(shù)為”1“，而下邊的求的重復(fù)次數(shù)為”.5“

更新：有評論指出，這個案例在PC或者手機版的Safari中不能正常執(zhí)行。這是填充模式的相對關(guān)系中的一個bug，我在這里寫了個文檔，這個bug現(xiàn)在已經(jīng)被修復(fù)，這也會在以后穩(wěn)定更新后改正過來。

有趣的是，動畫的迭代時間并不依賴于正在進(jìn)行的懂行的屬性或者某個值。如果你的某個物體運行100px，動畫執(zhí)行一半的點不一定正好是50px。比如上面的動畫用的是linear 的timing效果，所以這個可以確定的是第二個球會剛好停在正中間的位置。

下邊這里我們用跟上面兩個球同樣的動畫，但使用ease 的timing效果：

可以看到，第二個球停在了正中間往后的位置，這是因為使用了不同的timing效果。

如果你理解timing功能的話，你會發(fā)現(xiàn)使用ease-in-out 也會跟使用linear 一樣讓第二個球停在同樣的位置?？梢苑磸?fù)設(shè)置執(zhí)行次數(shù)的小數(shù)值跟timing functions的值來看不同的效果。

9、動畫名稱會在動畫的簡寫方式中影響動畫的使用

有些開發(fā)者可能已經(jīng)發(fā)現(xiàn)了這一點，在規(guī)范中對這個也有個提醒。比方說，你有以下的動畫代碼：

@keyframes reverse {
 from {
 left: 0;
 }

 to {
 left: 300px;
 }}.example {
 animation: reverse 2s 1s;}

注意這里我使用reverse作為動畫的名稱。簡單來看，這并沒什么不妥，但要注意當(dāng)我們在用上面的代碼作為一個例子時發(fā)生了什么：

這段動畫并不起效，因為‘reverse’是animation-direction屬性的一個關(guān)鍵字。任何的動畫名稱在匹配到一個簡寫語法中的關(guān)鍵字值的時候都會發(fā)生這樣的情況。但在普通寫法中這樣的情況不會發(fā)生（animation-name這樣單獨的動畫名稱寫法的時候）。

動畫命名在簡寫語法中包含了任何定時功能的關(guān)鍵字（比如infinite, alternate, running, paused 等等）都會被阻斷。

10、使用樣式選取元素列表中元素的范圍

我不知道是誰首先這樣用的，但我第一次是在Gunnar Bittersmann 的這個demo 中看到的。比如說有一個20個元素的有序列表，你想選擇第7到14個元素。這里你可以使用一個選擇器來實現(xiàn)：

ol li:nth-child(n+7):nth-child(-n+14) {
 background: lightpink;}

更新：在評論中有人指出，這個功能在Safari中不起效。幸運地是，Matt Pomaski 提出了一個解決方案：只需將選擇器中的順序換一下，變成這樣：ol li:nth-child(-n+14):nth-child(n+7)。Webkit不能識別這種寫法，所以你最終還是可以讓它在Safari中正常運行。

這個代碼使用了鏈?zhǔn)浇Y(jié)構(gòu)的偽類表達(dá)式。雖然表達(dá)式有點難理解，但你可以通過表達(dá)式中的數(shù)字看到你想要選中的范圍。

更詳細(xì)地解釋這個工作的原理：在鏈?zhǔn)浇Y(jié)構(gòu)的第一部分，表達(dá)式為“選中第七個元素及后面的所有元素”。第二部分的意思是“選取第十四個元素及前面的所有元素”。但由于兩部分是鏈接在一起的，每一個限制前一個的范圍。所以鏈?zhǔn)浇Y(jié)構(gòu)的第二部分不允許第一部分超過第十四個元素，然而第一部分又不允許第二部分選取到第七個元素之前的元素。

想更進(jìn)一步了解這種類型的選擇器和表達(dá)式，你可以閱讀我以前的在這個主題的資料。

11、偽元素也適用于一些空元素

如果你跟我一樣，嘗試過把偽元素附加到一個圖片或者表格input標(biāo)簽上。你會發(fā)現(xiàn)這樣并不生效因為偽元素在非閉合元素上無效。我想很多開發(fā)者都認(rèn)為空元素（即沒有閉合標(biāo)簽的元素）都是這樣的。但這并不正確。

你可以將一些偽元素附加到一些不可替換的空元素上。這包含了hr 元素，如下邊的例子：

在例子中有顏色的區(qū)域是一個水平線（hr 元素），有::before 和::after 偽元素附加在這個元素上。有趣的是，在一個同樣是不可替換的空元素br 上，卻無法實現(xiàn)同樣的效果。

如果你瘋狂到把meta標(biāo)簽和 link 元素設(shè)置為display: block ，你也可以給meta標(biāo)簽和 link 元素附加偽類，如下邊例子所示。

12、有些屬性值在選擇器中是不區(qū)分大小寫的

這是一個不起眼的點，讓他們通過下邊的HTML來看：

你可以通過屬性選擇器來給他們兩個添加樣式，像這樣：

div[class="box"] {
 color: blue;}input[type="email"] {
 border: solid 1px red;}

上面這樣是沒問題的，那下邊這樣呢？

div[class="BOX"] {
 color: blue;}input[type="EMAIL"] {
 border: solid 1px red;}

現(xiàn)在兩個屬性值都是大寫的。在這個示例中，因為class 屬性是區(qū)分大小寫的，所以 .box 元素的樣式不生效。而另外一個email的標(biāo)簽，卻由于type 的屬性值不區(qū)分大小寫，所以它的樣式能生效。這并非什么重大發(fā)現(xiàn)，只是一些你之前可能沒留意到的。