Ba la la la ~ 讀者朋友們，你們好啊，又到了冷鋒時間，話不多說，發(fā)車！
CSS 比許多 web 程序員認為的更加強大。這種樣式表語言正變得越來越強大，給瀏覽器帶來了原本要用 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);
}
很好懂，對吧？當然要想設計 tooltips 還需要更多的代碼，但是不必擔心，有一款很棒的純 CSS 庫就是為此而生的，叫做 Hint.css 。
2. 使用自定義data 屬性和 attr() 函數(shù)
我們已經(jīng)在 tooltips 中用過 attr() 了，但是還有一些情況也可以用 attr()。結合 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 是 不易獲取 的。在此方面，這篇文章的 關于獲取 CSS 生成 content 的內(nèi)容（http://tink.uk/accessibility-support-for-css-generated-content/） 部分可以借鑒。
3. CSS 計數(shù)器
CSS 計數(shù)器可以做出神奇的效果。計數(shù)器不是最有名的特點，多數(shù)人可能認為它的支持性不夠好，但實際上，所有瀏覽器都支持 CSS 計數(shù)器：
計數(shù)器用于分頁或是在 gallery 下方展示項目數(shù)量都很棒，但是不應該用在有序列表（<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)這種效果有點復雜——在有 CSS filters 之前，只能用 模糊的半透明圖片 來實現(xiàn)毛玻璃效果。目前幾乎所有的主流瀏覽器都支持 CSS filters，再現(xiàn)毛玻璃效果就簡單多了 。
目前 backdrop filters 和 filter() 函數(shù) 只有 Safari 支持，但是將來我們就可以用它們實現(xiàn)相似的效果了。
5. HTML Elements做背景圖
通常都是指定 JPEG 或 PNG 文件充當背景圖或漸變。但是你知道 element() 函數(shù)可以用 <div> 做背景圖嗎？目前只有 Firefox 支持 element() 函數(shù)：
Element() 函數(shù)擁有無限可能，這里有個 MDN 上的 例子 。
6. calc() 實現(xiàn)智能柵格
Fluid grids（流體網(wǎng)格劃分）很棒，但是有幾個嚴重的問題。例如，無法實現(xiàn)頂部和底部的空隙和左右的空隙大小相同。此外，根據(jù)所使用的柵格系統(tǒng)不同，標記有些混亂。即使是 flexbox 也不是做好的解決方法。但是有了可在 CSS 中作為 value 使用的 calc() 函數(shù)，柵格會變得更棒。在 SitePoint 的此篇教程 中，George Martsoukos 列舉了幾個實例，比如間隔完美的網(wǎng)格畫廊。通過 CSS 預編譯器，比如 Sass，利用 calc() 實現(xiàn)一套柵格系統(tǒng) 非常簡單，并且易于維護。calc() 的瀏覽器支持性近乎完美，極力推薦使用。
7. CSS calc() 對齊 position:fixed 元素
calc() 函數(shù)的另一個使用場景是對齊 fixed 定位的元素。例如，有一個左右均有空隙的 content wrapper，如果想要對 wrapper 內(nèi)的一個 fixed 元素精準對齊——要算出給“right”或是“l(fā)eft”屬性賦值多少是很困難的。用 calc() 可以結合 relative 和 absolute 的值來精準對齊元素：
.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 更加引人注目的話，可以使用動畫。但是標準的 easing 選項非常有限，比如“l(fā)inear”或是“ease-in-out”。像是彈跳動畫更是標準選項無法實現(xiàn)的。使用 cubic-bezier() 函數(shù)，就可以讓元素按你想要的方式去動畫。
使用 cubic-bezier() 有兩種方式—— 理解背后的數(shù)學知識 然后自己創(chuàng)建，或者使用 cubic-bezier 生成器 。
以上為個人意見，如有雷同，純屬巧合，歡迎大家多提意見！Bey 了 個 Bey ~
