Ba la la la ~ 讀者朋友們，你們好啊截汪，又到了冷鋒時間，話不多說植捎，發(fā)車衙解！
CSS 比許多 web 程序員認(rèn)為的更加強(qiáng)大。這種樣式表語言正變得越來越強(qiáng)大鸥跟，給瀏覽器帶來了原本要用 JavaScript 實現(xiàn)的功能丢郊。本文將介紹無需 JavaScript 的 CSS 函數(shù)的 8 個妙用。
1. 純 CSS 的 tooltips
很多網(wǎng)站仍在用 JavaScript 創(chuàng)建 tooltips医咨，但實際上枫匾，用 CSS 實現(xiàn)更加簡單。最簡單的方法是在 HTML 代碼的 data 屬性中提供 tooltip 文本拟淮，比如：data-tooltip="…"干茉。這樣就可以在 CSS 中添加以下代碼來在 attr() 函數(shù)中顯示 tooltip 文本了：
.tooltip::after {
content: attr(data-tooltip);
}
很好懂，對吧很泊？當(dāng)然要想設(shè)計 tooltips 還需要更多的代碼角虫，但是不必?fù)?dān)心沾谓，有一款很棒的純 CSS 庫就是為此而生的，叫做 Hint.css 戳鹅。
2. 使用自定義data 屬性和 attr() 函數(shù)
我們已經(jīng)在 tooltips 中用過 attr() 了均驶，但是還有一些情況也可以用 attr()。結(jié)合 data 屬性枫虏，可以通過 title 和 description 僅用一行 HTML 代碼創(chuàng)建縮略圖：
<a class="caption" href="#" data-title="Vulture" data-description="...">
<img src="img.jpg" alt="Illustration"/>
</a>
接下來就可以用 attr() 函數(shù)來顯示 title 和 description 了：
.caption::after {
content: attr(data-title);
...
}
這里提供一個 hover 上去有字幕動畫效果的縮略圖例子：
http://codepen.io/SitePoint/pen/akAmPw
說明：CSS 生成的 content 是 不易獲取 的妇穴。在此方面，這篇文章的 關(guān)于獲取 CSS 生成 content 的內(nèi)容（http://tink.uk/accessibility-support-for-css-generated-content/） 部分可以借鑒隶债。
3. CSS 計數(shù)器
CSS 計數(shù)器可以做出神奇的效果腾它。計數(shù)器不是最有名的特點，多數(shù)人可能認(rèn)為它的支持性不夠好死讹，但實際上瞒滴，所有瀏覽器都支持 CSS 計數(shù)器：
計數(shù)器用于分頁或是在 gallery 下方展示項目數(shù)量都很棒，但是不應(yīng)該用在有序列表（<ol>）上赞警。也可以用 CSS 計數(shù)器計算已選項的數(shù)量妓忍，代碼量會令你驚嘆（并且沒有 JavaScript）：
http://codepen.io/lonekorean/pen/wKbzv
在可拖放排序的列表中用 CSS 計數(shù)器動態(tài)改變數(shù)量也很贊：
http://codepen.io/SitePoint/pen/bdeOKJ
像上個例子一樣，記住——CSS 生成的 content 是不易獲取的仅颇。
4. CSS filters實現(xiàn)毛玻璃效果
蘋果的 iOS 7 給我們帶來了“毛玻璃”效果——看起來像磨砂玻璃窗的单默、半透明省骂、模糊的元素褂傀。在蘋果的推行下，在越來越多的地方可以見到這種效果了诵冒。再現(xiàn)這種效果有點復(fù)雜——在有 CSS filters 之前耕皮，只能用 模糊的半透明圖片 來實現(xiàn)毛玻璃效果境蜕。目前幾乎所有的主流瀏覽器都支持 CSS filters，再現(xiàn)毛玻璃效果就簡單多了 凌停。
目前 backdrop filters 和 filter() 函數(shù) 只有 Safari 支持粱年，但是將來我們就可以用它們實現(xiàn)相似的效果了。
5. HTML Elements做背景圖
通常都是指定 JPEG 或 PNG 文件充當(dāng)背景圖或漸變罚拟。但是你知道 element() 函數(shù)可以用 <div> 做背景圖嗎台诗？目前只有 Firefox 支持 element() 函數(shù)：
Element() 函數(shù)擁有無限可能，這里有個 MDN 上的 例子 赐俗。
6. calc() 實現(xiàn)智能柵格
Fluid grids（流體網(wǎng)格劃分）很棒拉队，但是有幾個嚴(yán)重的問題。例如阻逮，無法實現(xiàn)頂部和底部的空隙和左右的空隙大小相同粱快。此外，根據(jù)所使用的柵格系統(tǒng)不同，標(biāo)記有些混亂事哭。即使是 flexbox 也不是做好的解決方法漫雷。但是有了可在 CSS 中作為 value 使用的 calc() 函數(shù)，柵格會變得更棒鳍咱。在 SitePoint 的此篇教程 中降盹，George Martsoukos 列舉了幾個實例，比如間隔完美的網(wǎng)格畫廊谤辜。通過 CSS 預(yù)編譯器澎现，比如 Sass，利用 calc() 實現(xiàn)一套柵格系統(tǒng) 非常簡單每辟，并且易于維護(hù)。calc() 的瀏覽器支持性近乎完美干旧，極力推薦使用渠欺。
7. CSS calc() 對齊 position:fixed 元素
calc() 函數(shù)的另一個使用場景是對齊 fixed 定位的元素。例如椎眯，有一個左右均有空隙的 content wrapper挠将，如果想要對 wrapper 內(nèi)的一個 fixed 元素精準(zhǔn)對齊——要算出給“right”或是“l(fā)eft”屬性賦值多少是很困難的。用 calc() 可以結(jié)合 relative 和 absolute 的值來精準(zhǔn)對齊元素：
.wrapper {
max-width: 1060px;
margin: 0 auto;
}
.floating-bubble {
position: fixed;
right: calc(50% - 530px); /* 50% - half your wrapper width */
}
這里提供一個例子：
http://codepen.io/SitePoint/pen/NAVRZQ
8. cubic-bezier() 動畫
要想網(wǎng)站或 app 的 UI 更加引人注目的話编整，可以使用動畫舔稀。但是標(biāo)準(zhǔn)的 easing 選項非常有限，比如“l(fā)inear”或是“ease-in-out”掌测。像是彈跳動畫更是標(biāo)準(zhǔn)選項無法實現(xiàn)的内贮。使用 cubic-bezier() 函數(shù)，就可以讓元素按你想要的方式去動畫汞斧。
使用 cubic-bezier() 有兩種方式—— 理解背后的數(shù)學(xué)知識 然后自己創(chuàng)建夜郁，或者使用 cubic-bezier 生成器 。
以上為個人意見粘勒，如有雷同竞端，純屬巧合，歡迎大家多提意見庙睡！Bey 了 個 Bey ~
