CSS 是了不起的技(jì)術(shù)，我第一(yī)次用到(dào)的時候，覺得這是我做夢都想不到(dào)的東西(xī)，随著(zhe) CSS3 的引入，圓角，陰影，旋轉等等技(jì)術(shù)更将 CSS 帶到(dào)前所未有的高(gāo)度。然而，關于 CSS，我們是不是已經走得太遠(yuǎn)，本文以一(yī)個(gè) Web 設計師(shī)的角度對 CSS 的一(yī)些實驗性應用做了另一(yī)種思考。

那些有關 CSS 的前衛實驗

每個(gè)實驗都是用了不同的方法，其中一(yī)些，如 CSS 線圖，在現實中可以找到(dào)實際的應用，其它的，如 CSS 實現的 Twitter Fail Whale 圖畫(huà)，則純屬實驗，這些實驗的目的僅僅為(wèi)了說明 CSS 能(néng)夠實現的效果，并不意味著(zhe)應當這樣來做。

讓我們實際一(yī)點

上(shàng)圖是用純 CSS 實現的社會(huì)媒體網絡标志(zhì)，很神奇不是？

我最近讀(dú)了 Faruk Ateş 的文章，Pure CSS Icons： Make The Madness Stop，文中對這一(yī)做法提出了質疑，作者表示，一(yī)些人開(kāi)始嘗試将 CSS 當作設計工(gōng)具并迅速引發大量效仿，然而，這種做法有多(duō)少易用性可言？它并不容易集成到(dào)你的設計與開(kāi)發當中，也不容易調整。

就(jiù)像上(shàng)面的完全基于 CSS 的社會(huì)網絡标志(zhì)，無非是一(yī)堆各式各樣的線條的組合，固然令人印象深刻，也算(suàn)有創意，但并不實用，因為(wèi)創作這樣一(yī)個(gè)标志(zhì)可能(néng)需要幾個(gè)小(xiǎo)時的艱辛勞動，在 Photoshop 中畫(huà)一(yī)個(gè)同樣的圖根本不費(fèi)任何力氣，而且效果更好（更細膩）。

Ateş 認為(wèi)，這種方式生(shēng)成的圖标的可維護性也很成問題，調整一(yī)個(gè)圖标原本隻需要調整像素，現在卻需要修改 CSS 定義，同時，上(shàng)述 CSS 标志(zhì)的設計者 Nicolas Gallagher 也表示，做這類事(shì)情，CSS 并非最适合。

降低(dī) HTTP 請求？

上(shàng)面這幅圖中的圖标全部用 CSS 生(shēng)成，而且作者将它們拿出來賣，40個(gè)圖标賣25美金。不得不承認，這些圖标設計得非常漂亮，作者設計這些 CSS 的初衷是為(wèi)那些使用的網站降低(dī) HTTP 請求數，因為(wèi)這些圖标不需要額外的圖片文件(jiàn)請求。然而，一(yī)個(gè)小(xiǎo)小(xiǎo)的圖标文件(jiàn)帶來的 HTTP 請求真的很值得一(yī)提嗎(ma)，何況，使用 CSS Sprite 技(jì)術(shù)，這些圖标完全可以放(fàng)在同一(yī)個(gè)圖片中，靠 CSS 定位顯示，這樣，隻需要一(yī)個(gè) HTTP 請求就(jiù)夠了。而且，我實在懷疑，這些 CSS 版的圖标到(dào)底能(néng)減少多(duō)少帶寬。

本著(zhe)語義化的精神

必須承認，我有時候會(huì)為(wèi)了實現某種視覺上(shàng)的需要，而額外使用 DIV 或 SPAN 等标簽，這很不語義。然而 CSS 繪圖是更不語義的事(shì)，CSS 的真實使命是對網頁中的内容進行修飾，而不是創建内容本身。網頁中的圖形本身屬于内容的範疇，不應該由 CSS 創建。