12個很少被人知道的CSS事實

CSS不是一門很復(fù)雜的語言，但是即使你已經(jīng)寫css很多年了，也很有可能遇到一些新玩意兒-某些屬性從來沒用過，某些值從來未曾考慮，或者某些規(guī)范細則你從來不知道。

我經(jīng)常會遇到一些css小細節(jié)，所以我想在這片文章中和大家分享，需要承認(rèn)的是，這篇文章中的很多東西并不具有實操價值，但也許你可以留作后用。

body上的color不只是應(yīng)用于文字

讓我們從最簡單的開始吧，color屬性是被廣泛運用的屬性，某些人可能不曾注意，它并不僅僅只是定義文本的顏色。

讓我們看這個例子：

請注意我們只是給body設(shè)定了color為yellow，但是你可以看到，頁面里的元素都變成了黃色，他們包括:

• 圖片的alt文字的值，就是當(dāng)圖片源載入不了時顯示的文字
• 列表元素的邊框
• 無序列表的點
• 有序列表的數(shù)字
• hr元素

有趣的是，hr元素默認(rèn)是不會繼承color屬性得，我需要強制他繼承border-color: inherit，這對我來說有點怪異。

W3c規(guī)范是這么定義的:

這個屬性用來描述元素的文本的前景顏色，附帶被用來為其他接受顏色值的其他屬性提供潛在的間接的值。

我不是很明確地知道有哪些是被當(dāng)做所謂的前景的，如果你知道的話，請在評論中告訴我。

visibility還可以設(shè)置 “collapse”值

你可能已經(jīng)用過visibility上千遍了，最常用的是visible和hidden，用來使元素顯示或者隱藏。

還有第三個很少被用到的值是collapse，除了在表格的行，列中使用有差異外，他和hidden的作用是等同的。

下面讓我們看看在表格元素中，collapse是怎么工作的，不過前提是table的border-collapse需要設(shè)定成separate才會有效果哦！

CSS-Trick 網(wǎng)站的Almanac同學(xué)說不要用這個屬性，因為這個屬性存在兼容問題。

我的測試結(jié)果是：

• 在Chrome中，collapse和hidden的表現(xiàn)并無不同（請看bug報告和討論）
• 在firefox，opera和ie11中，collpase的工作是正常的，那就是，表格的行被清除了，而且不再占據(jù)空間。

我得承認(rèn)，這個值可能很少會被用到，但是他確實是存在的。

background這個簡寫又有了新值

在css2.1中，background是這5個值的縮寫，background-color, background-image, background-repeat, background-attachment, background-position?，F(xiàn)在，在css3中，又有三個成員被加進來了，現(xiàn)在總共有8個值，他們是：

background: [background-color] [background-image] [background-repeat]
        	[background-attachment] [background-position] / [ background-size] [background-origin] [background-clip];

請注意那個正斜杠，和font，border-radius類似，這個正斜杠允許你在寫完position后加上background-size。

另外，還有兩個可選的值是background-origin和background-clip。

實操中語法會變成這個樣子

.example {
  background: aquamarine url(img.png)
              no-repeat
              scroll
              center center / 50%
              content-box content-box;
}

讓我們在demo中來一起 感受它:

這些新值在現(xiàn)代瀏覽器中工作完美，但是你可能需要為不支持的瀏覽器優(yōu)雅降級。

clip只對absolute元素和fixed元素有效

上邊我們談到了backgrond-clip，現(xiàn)在我們談?wù)刢lip，我們一般是這么寫的:

.example {    
  clip: rect(110px, 160px, 170px, 60px);
}

我們用這個方法來剪切元素的一部分，但是它的前提是這個元素必須是absolute定位的(這里有解釋)，所以代碼變成這樣

.example {
    position: absolute;
    clip: rect(110px, 160px, 170px, 60px);
}

你可以看到當(dāng)我們切換這個元素absolute定位的時候，clip也會跟著變化:

你也可以通過設(shè)定position：fixed來讓clip變得有效，因為根據(jù)規(guī)范，fixed元素有資格被當(dāng)做absolute元素。

垂直百分比是根據(jù)父層的寬度計算的，而不是父層高度計算的

這個說起來有一點麻煩，你應(yīng)該知道百分比寬度是根據(jù)父層的寬度計算的，但是如果像padding，margin這樣的屬性用上百分比的時候，最終的結(jié)果是根據(jù)父層的寬度計算的，而不是根據(jù)父層的高度計算。

大家來看這個例子：

注意當(dāng)我們滑動滑塊的時候，只是改變了父層容器的寬度，但是padding-bottom的值卻產(chǎn)生了變化。

border實際上是簡寫屬性的簡寫

我們都寫過這樣的語句:

.example {
  border: solid 1px black;
}

border屬性是border-style，border-width，border-color的簡寫 但是請不要忘了，這三個屬性每個屬性都包含有自身的簡寫，比如:

.example {
  border-width: 2px 5px 1px 0;
}

這樣會讓四個border獲得不同的寬度，同理，border-color和border-style也是這樣：

這里的重點是，你沒法用border這個屬性為四條邊做出不同的顏色，寬度，樣式，所以屬性簡寫再簡寫后，表達就變得不那么精確了。

text-decoration實際上是三種屬性的簡寫

我知道這篇文章所說的的可能會讓你有一點點暈。

根據(jù)w3c規(guī)范，現(xiàn)在這個語句是符合標(biāo)準(zhǔn)的:

a {
  text-decoration: overline aqua wavy;
}

text-decoration現(xiàn)在是這三個屬性的縮寫：text-decoration-line, text-decoration-color和text-decoration-style.

不幸的是，目前只有firefox一家支持這個新屬性:

在這個demo中，我們用了類似text-decoration-color這樣的寫法，我知道這樣寫很不爽，因為目前很多瀏覽器不支持，如果我們直接寫text-decoration: overline aqua wavy;的話，無疑目前的瀏覽器識別不了這樣的寫法，于是只能不解析有，所以為了向下兼容，我們只能這么寫了。

border-width 支持關(guān)鍵字值

這個并不是那么驚天地泣鬼神，但是除了接受標(biāo)準(zhǔn)的值外（像5px或者1em），border-width同時還接受三個關(guān)鍵字值: medium, thin,和 thick。

實際上，border-width的初始值是medium，下面這個例子中用的是thick:

當(dāng)瀏覽器渲染這些關(guān)鍵字值得時候，規(guī)范并沒有要求他們用特定的寬度值，但是在我的測試中，所有的瀏覽器都是把這三個值轉(zhuǎn)化成了1px，3px，和5px。

很少有人用border-image

我曾經(jīng)寫過一篇關(guān)于css3的 border-image的文章，這個特性已經(jīng)被現(xiàn)代瀏覽器很好的支持了，除了ie10及以下版本。但是有人在意嗎？

如果你不喜歡閱讀英文，你可以閱讀我早前寫的一篇關(guān)于CSS3的border-image的基礎(chǔ)教程。——@大漠

它看起來是一個很優(yōu)美的特性，允許你創(chuàng)建流動的圖片邊框，在這個例子中，你可以縮放窗口來觀察圖片邊框的流動。

不幸的是，border-image仍然像一個新奇事物一樣并未被很多人使用。但也許我是錯的。如果你知道有哪個真實案例中有使用border-image，或者你就使用過它的話，請在評論中讓我知道，我會很樂意承認(rèn)我錯了。

還存在empty-cells 這樣一個屬性

這個屬性是被廣泛支持的，包括ie8，它寫起來是這個樣子的：

table {
  empty-cells: hide;
}

你也許已經(jīng)知道了，它是用在表格中的，它告訴瀏覽器是否顯示空的單元格。試著點擊切換按鈕來觀察empty-cells的效果：

在這個例子中，需要確保表格的邊框是可見的，而且border-collapse沒有被設(shè)定成 collapsed。

font-style 還有一個值是“oblique”

當(dāng)我們使用font-style屬性得時候，經(jīng)常用到的兩個值是normal和italic，但是你還可以給它另一個值oblique:

但是它到底是個神馬意思呢？還有就是它和italic看起來一樣嗎？

規(guī)范對于oblique是這么解釋的：

應(yīng)用oblique樣式，如果沒有的話就用italic樣式

規(guī)范對于italic的解釋和oblique基本上差不多，oblique這個詞是一個排版術(shù)語，表示是在normal的基礎(chǔ)上傾斜的字體，而不是真正的斜體。

由于css處理oblique的方式，其實它和italic是通用的，除非這個字體就是一個oblique字體。

而我從未聽說過有oblique字體，但是也許我是錯的。我的研究是，oblique是當(dāng)一個字體沒有真斜體的時候的一個仿斜體。

所以，如果我沒有錯的話，這就意味著如果一個字體沒有真斜體字體，那么如果我們寫了font-style:italic實際上會讓字體變成font-style:oblique的形式。

下邊這個圖可以很直觀的知道仿斜體和真斜體的區(qū)別。灰色的是oblique仿斜體。 ——@大圓 12個很少被人知道的CSS事實

word-wrap和overflow-wrap是等同的

word-wrap不是一個被經(jīng)常用到的屬性，但在某些情況下是非常有用的，一個常見的例子是讓長url換行，以免它撐開父容器，例子如下：

由于這個屬性是微軟原創(chuàng)的，所以它被所有的瀏覽器支持了，包括ie5.5。

盡管它跨瀏覽器，而且被一貫地支持，W3C依然決定把word-wrap換成overflow-wrap- 我猜是之前的命名有點名不副實？ overflow-wrap和word-wrap有著同樣的值，而word-wrap被當(dāng)作是overflow-wrap的一個后補語法。

現(xiàn)在有一些瀏覽器是支持overflow-wrap的，但這么做貌似是無意義的，因為所有舊的瀏覽器都把word-wrap解析得很好，而且由于歷史原因所有的瀏覽器都被要求繼續(xù)支持word-wrap。

我們可以在瀏覽器升級后開始使用overflow-wrap，但是直到現(xiàn)在，我依然看不到換成新語法的意義何在。

這里邊有多少是你不知道的呢？

不知你從這篇文章中有沒有學(xué)到什么，我希望是這樣，也許大多數(shù)有經(jīng)驗的css開發(fā)者知道很多，但是對于css新手應(yīng)該會受益多一點。

大家都來扒一扒有幾條是新發(fā)現(xiàn)呢？歡迎在評論中告訴我們！

注

英文出處：http://www.sitepoint.com/12-little-known-css-facts/

中文譯文：http://www.w3cplus.com/css/12-little-known-css-facts.html