CSS現在已經能實作比網站開發者預料到的更多的功能，并且随着時間的推移，樣式表語言越來越強大，能實作許多原先需要依靠JavaScript才能實作的功能。在這篇文章中我們将會介紹CSS函數中8種有用的小技巧。
1、純CSS Tooltip
許多網站還是在使用JavaScript來建立Tooltip效果，但實際上通過CSS能更簡單的實作。最簡單的方法是在你的HTML代碼中添加一個帶有提示文本的屬性，比如data-tooltip="…"。
然後你就可以在你的CSS檔案中添加以下的代碼通過attr()函數來顯示提示文字：
.tooltip::after {
content: attr(data-tooltip);
} 相當簡單對吧？當然實際上我們還需要更多的代碼來給提示增加樣式，但是不用擔心，已經有了為此設計的強大且純粹的叫Hint.css的CSS庫和Balloon.css。
示範位址：https://codepen.io/airen/pen/NRKpXy
2、使用自定義資料屬性和attr()函數
我們已經學會如何使用attr()來建立提示，另外還有一些場景能使用到這個函數。通過與資料屬性相結合，你可以通過很簡單的一行HTML代碼來建立帶有标題和描述的縮略圖：
<a class="caption" href="#" data-title="Vulture" data-description="...">
<img src="img.jpg" alt="Illustration"/>
</a> 現在你可以通過attr()函數來顯示标題與描述：
.caption::after {
content: attr(data-title);
...
} 示範位址：https://codepen.io/airen/pen/jrNBKp
注意：這個方法在浏覽器支援方面可能會有一些問題，具體内容你可以檢視Accessibility support for CSS generated content這篇文章。
3、CSS Counters
你可以通過CSS Counters實作超棒的功能。這不是一個非常為人熟知的屬性，大多數人甚至可能認為浏覽器不能很好的支援這個屬性，但事實上所有的浏覽器都支援這個屬性：
但是你不應該将CSS counters使用在有序清單<ol>上，它更适合使用在類似分頁或者圖檔庫下面顯示的數字上。你可以通過下面的例子看出如何使用很少的代碼（甚至不使用JavaScript）來對選中的項目進行計數，檢視位址：https://codepen.io/airen/pen/ALAqPk
CSS counters也非常适合顯示可通過拖放進行重新排序的項目清單上動态變化的數字，檢視示範位址：https://codepen.io/airen/pen/vXBxVg
正如最後一個例子，我們需要記住，通過該方法生成的内容在可通路性上可能會有些問題。
4、CSS濾鏡實作的磨砂效果
在iOS7中，蘋果實作了“磨砂玻璃”的效果--半透明的，模糊的元素，看起來像覆寫了一層磨砂玻璃。受到蘋果的啟發，這種效果被運用到很多地方。在CSS濾鏡出現之前要重制這個效果還是有些棘手的。
你必須通過使用模糊圖檔來實作這種毛玻璃的效果。但現在CSS濾鏡得到了幾乎所有的主流浏覽器的支援，是以要重制這個效果就簡單很多了。
在未來，我們可以通過背景過濾器和filter()函數來實作這樣的效果，但目前隻有Safari同時支援這兩個功能。
有關于CSS的filter更多的介紹可以點選這裡進行了解。
5、将HTML元素作為背景
一般我們可以設定一個JPEG或者PNG檔案作為背景，或者也可以設定一個漸變的背景。但是你知道可以通過使用element()函數，進而将一個<div>設定為背景圖檔嗎？現在，element()函數隻有在Firefox中得到了支援：
可能性是無止境的，這裡是MDN上的一個例子。
有關于CSS的element()函數的相關介紹可以點選這裡。
6、通過calc()建立更好的網格
流體網格雖然很棒但是仍然存在很嚴重的問題。比如，在頂部和底部的間距大小幾乎不可能與在左邊和右邊的間距大小相同。另外，若使用的網格系統不一樣，标記就會非常混亂。
雖然彈性布局不是最終的解決方案，但是通過與calc()（可以在CSS檔案中作為一個屬性值）相結合，我們能夠建立一個更好的網格。在這裡,George Martsoukos列舉了很多例子，比如擁有完美間距的畫廊網格。
通過使用CSS預編譯語言，比如Sass，組建一個創造性的網格系統可以非常簡單且易于維護。同時浏覽器對calc()的支援幾乎完美，是以calc()絕對是你應該掌握的一個功能。
有關于CSS的calc()函數相關的介紹可以點選這裡。
7、通過calc()對齊position:fixed元素
calc()的另一個作用是用來對齊position:fixed的元素。比如，你有一個内容封裝器，它左右都有流動的間距，你希望在這個内容封裝器内精确對齊position為fixed的元素，但是這種情況下要計算出left和right屬性的具體指派就很困難。通過calc(),你可以結合相對和絕對的值來精确定位你的元素：
.wrapper {
max-width: 1060px;
margin: 0 auto;
}
.floating-bubble {
position: fixed;
right: calc(50% - 530px); /* 50% - half your wrapper width */
} 比如：
示範位址：https://codepen.io/airen/pen/ozvkAz
有關于這方面的詳細介紹可以閱讀@brnnbrn寫的《Aligning position:fixed Elements with CSS calc》一文。
8、使用cubic-bezier()實作動畫
為了使一個網站或者APP的使用者界面更具有吸引力，你可使用一些動畫，但是可以選擇的過渡效果的速度曲線是相當有限的，比如，linear或者ease-in-out。而标準的速度曲線連彈力運動的效果都實作不了。通過使用cubic-bezier()函數，你可以精确實作你想要的動畫效果。
有兩種方法使用cubic-bezier()——了解背後的機制後自己建立，或者是使用cubic-bezier生成器。
說實話，我使用的是後者。
有關于cubic-bezier()詳細的介紹可以點選這裡。
總結
更加聰明的使用CSS函數不僅僅可以解決上面的問題比如建立一個更好的網格，它還可以給你更多的創作自由。随着浏覽器支援越來越好，你可以使用CSS函數比如calc()來修改和提升一下你之前的CSS代碼。