幾個好用的css函數小技巧

CSS為HTML標記語言提供了一種樣式描述，定義了其中元素的顯示方式。CSS在Web設計領域是一個突破。利用它可以實現修改一個小的樣式更新與之相關的所有頁面元素。在這篇文章中我們將會介紹CSS函數中8種有用的小技巧。

1.純CSS Tooltip

許多網站還是在使用JavaScript來建立Tooltip效果，但實際上通過CSS能更簡單的實現。最簡單的方法是在你的HTML代碼中添加一個帶有提示文本的屬性，比如 data-tooltip="…" 。然後你就可以在你的CSS檔案中添加以下的代碼通過 attr() 函數來顯示提示文字：

.tooltip::after { content: attr(data-tooltip);
}

相當簡單對吧？當然實際上我們還需要更多的代碼來給提示增加樣式，但是不用擔心，已經有了為此設計的強大且純粹的叫 Hint.css 的CSS庫和 Balloon.css 。

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);
...
}

以下為具體的例子：

注意：這個方法在瀏覽器支援方面可能會有一些問題，具體內容你可以查看 Accessibility support for CSS generated content 這篇文章。

3. CSS Counters

你可以通過CSS Counters實現超棒的功能。這不是一個非常為人熟知的屬性，大多數人甚至可能認為瀏覽器不能很好的支援這個屬性，但事實上所有的瀏覽器都支援這個屬性：

但是你不應該將CSS counters使用在有序列表 <ol> 上，它更適合使用在類似分頁或者圖片庫下面顯示的數字上。你可以通過下面的例子看出如何使用很少的代碼（甚至不使用JavaScript）來對選中的項目進行計數：

CSS counters也非常適合顯示可通過拖放進行重新排序的項目列表上動態變化的數字：

正如最後一個例子，我們需要記住，通過該方法產生的內容在可訪問性上可能會有些問題。

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 */}

比如：

有關於這方面的詳細介紹可以閱讀 @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代碼。

本文根據 @Anselm Urban 的 《8 Clever Tricks with CSS Functions》 所譯，整個譯文帶有我們自己的理解與思想，如果譯得不好或有不對之處還請同行朋友指點。如需轉載此譯文，需註明英文出處: https://www.sitepoint.com/8-clever-tricks-with-css-functions 。

以上就是8個css函數小技巧，覺得不錯的小夥伴們趕緊收藏起來吧。