CSS 語言比許多 web 程序員認(rèn)為的更加強(qiáng)大。這種樣式表語言正變得越來越強(qiáng)大，給瀏覽器帶來了原本要用 JavaScript 實(shí)現(xiàn)的功能。本文將介紹無需 JavaScript 的 CSS 函數(shù)的 8 個(gè)妙用。

很多網(wǎng)站仍在用 JavaScript 創(chuàng)建 tooltips，但實(shí)際上，用 CSS 實(shí)現(xiàn)更加簡(jiǎn)單。最簡(jiǎn)單的方法是在 HTML 代碼的 data 屬性中提供 tooltip 文本，比如： data-tooltip="…" 。這樣就可以在 CSS 中添加以下代碼來在 attr() 函數(shù)中顯示 tooltip 文本了：

.tooltip::after {

  content: attr(data-tooltip);}

很好懂，對(duì)吧？當(dāng)然要想設(shè)計(jì) tooltips 還需要更多的代碼，但是不必?fù)?dān)心，有一款很棒的純 CSS 庫就是為此而生的，叫做 Hint.css 。

我們已經(jīng)在 tooltips 中用過 attr() 了，但是還有一些情況也可以用 attr()。結(jié)合 data 屬性，可以通過 title 和 description 僅用一行 HTML 代碼創(chuàng)建縮略圖：

<a class="caption" href="#" data-title="Vulture" data-description="...">

  <imgsrc="img.jpg" alt="Illustration"/></a>

接下來就可以用 attr() 函數(shù)來顯示 title 和 description 了：

.caption::after {

  content: attr(data-title);

    ...

}

這里提供一個(gè) hover 上去有字幕動(dòng)畫效果的縮略圖例子：

See the Pen Thumbnail with Animated Captions by SitePoint ( @SitePoint ) on CodePen .

說明：CSS 生成的 content 是 不易獲取  的。在此方面，這篇文章的  關(guān)于獲取 CSS 生成 content 的內(nèi)容 部分可以借鑒。

CSS 計(jì)數(shù)器可以做出神奇的效果。計(jì)數(shù)器不是最有名的特點(diǎn)，多數(shù)人可能認(rèn)為它的支持性不夠好，但實(shí)際上，所有瀏覽器都支持 CSS 計(jì)數(shù)器：

計(jì)數(shù)器用于分頁或是在 gallery 下方展示項(xiàng)目數(shù)量都很棒，但是不應(yīng)該用在有序列表（ <ol> ）上。也可以用 CSS 計(jì)數(shù)器計(jì)算已選項(xiàng)的數(shù)量，代碼量會(huì)令你驚嘆（并且沒有 JavaScript）：

See the Pen Selection CSS Counter by Will Boyd ( @lonekorean ) on CodePen .

在可拖放排序的列表中用 CSS 計(jì)數(shù)器動(dòng)態(tài)改變數(shù)量也很贊：

See the Pen CSS Counters drag-and-drop demonstration by SitePoint ( @SitePoint ) on CodePen .

像上個(gè)例子一樣，記住——CSS 生成的 content 是 不易獲取 的。

蘋果的 iOS 7 給我們帶來了“毛玻璃”效果——看起來像磨砂玻璃窗的、半透明、模糊的元素。在蘋果的推行下，在越來越多的地方可以見到這種效果了。再現(xiàn)這種效果有點(diǎn)復(fù)雜——在有 CSS filters 之前，只能用 模糊的半透明圖片 來實(shí)現(xiàn)毛玻璃效果。目前幾乎所有的主流瀏覽器都支持 CSS filters， 再現(xiàn)毛玻璃效果就簡(jiǎn)單多了 。

目前 backdrop filters 和 filter()?函數(shù) 只有 Safari 支持，但是將來我們就可以用它們實(shí)現(xiàn)相似的效果了。

通常都是指定 JPEG 或 PNG 文件充當(dāng)背景圖或漸變。但是你知道 element() 函數(shù)可以用  <div> 做背景圖嗎？目前只有 Firefox 支持 element() 函數(shù)：

Element() 函數(shù)擁有無限可能，這里有個(gè) MDN 上的 例子 。

Fluid grids（流體網(wǎng)格劃分）很棒，但是有幾個(gè)嚴(yán)重的問題。例如，無法實(shí)現(xiàn)頂部和底部的空隙和左右的空隙大小相同。此外，根據(jù)所使用的柵格系統(tǒng)不同，標(biāo)記有些混亂。即使是 flexbox 也不是做好的解決方法。但是有了可在 CSS 中作為 value 使用的 calc() 函數(shù)，柵格會(huì)變得更棒。在 ?SitePoint?的此篇教程 中，George Martsoukos 列舉了幾個(gè)實(shí)例，比如間隔完美的網(wǎng)格畫廊。通過 CSS 預(yù)編譯器，比如 Sass，利用 calc() ?實(shí)現(xiàn)一套柵格系統(tǒng) 非常簡(jiǎn)單，并且易于維護(hù)。 calc() 的瀏覽器支持性近乎完美，極力推薦使用。

calc() 函數(shù)的另一個(gè)使用場(chǎng)景是對(duì)齊 fixed 定位的元素。例如，有一個(gè)左右均有空隙的 content wrapper，如果想要對(duì) wrapper 內(nèi)的一個(gè) fixed 元素精準(zhǔn)對(duì)齊——要算出給“right”或是“l(fā)eft”屬性賦值多少是很困難的。用 calc() 可以結(jié)合 relative 和 absolute 的值來精準(zhǔn)對(duì)齊元素：

.wrapper {

  max-width: 1060px;

  margin: 0 auto;}.floating-bubble {

  position: fixed;

  right: calc(50% - 530px); /* 50% - half your wrapper width */}

這里提供一個(gè)例子：

　　See the Pen Aligning “position: fixed” elements with CSS calc() by SitePoint ( @SitePoint ) on CodePen .

要想網(wǎng)站或 app 的 UI 更加引人注目的話，可以使用動(dòng)畫。但是標(biāo)準(zhǔn)的 easing 選項(xiàng)非常有限，比如“ linear ”或是“ ease-in-out ”。像是彈跳動(dòng)畫更是標(biāo)準(zhǔn)選項(xiàng)無法實(shí)現(xiàn)的。使用 cubic-bezier() 函數(shù)，就可以讓元素按你想要的方式去動(dòng)畫。

使用 cubic-bezier() 有兩種方式—— 理解背后的數(shù)學(xué)知識(shí)然后自己創(chuàng)建，或者使用 cubic-bezier?生成器 。

說實(shí)話，我喜歡后一種方式。

聰明使用 CSS 函數(shù)不僅可以解決像是建立更合理的柵格系統(tǒng)等難題，它也給了你更多機(jī)會(huì)去創(chuàng)造。隨著瀏覽器的支持性越來越好，你真的應(yīng)該重新審視一下你的 CSS 代碼，考慮用 calc() 等函數(shù)進(jìn)行優(yōu)化了。

文章來源：WEB前端-伯樂在線