CSS 是了不起的技術(shù),我第一次用到的時候,覺得這是我做夢都想不到的東西,隨著 CSS3 的引入,圓角,陰影,旋轉(zhuǎn)等等技術(shù)更將 CSS 帶到前所未有的高度。然而,關(guān)于 CSS,我們是不是已經(jīng)走得太遠(yuǎn),本文以一個 Web 設(shè)計師的角度對 CSS 的一些實驗性應(yīng)用做了另一種思考。
那些有關(guān) CSS 的前衛(wèi)實驗
幾個月前,作者在 Six Revisions 發(fā)表了一篇文章,介紹了 5 個有趣的 CSS 實驗:
- CSS3 Transforms & @font-face Experiment
- CSS Posters
- Pure CSS Line Graph
- CSS3 Leopard-style Stacks
- Pure CSS Twitter Fail Whale
每個實驗都是用了不同的方法,其中一些,如 CSS 線圖,在現(xiàn)實中可以找到實際的應(yīng)用,其它的,如 CSS 實現(xiàn)的 Twitter Fail Whale 圖畫,則純屬實驗,這些實驗的目的僅僅為了說明 CSS 能夠?qū)崿F(xiàn)的效果,并不意味著應(yīng)當(dāng)這樣來做。
讓我們實際一點
上圖是用純 CSS 實現(xiàn)的社會媒體網(wǎng)絡(luò)標(biāo)志,很神奇不是?
我最近讀了 Faruk Ateş 的文章,Pure CSS Icons: Make The Madness Stop,文中對這一做法提出了質(zhì)疑,作者表示,一些人開始嘗試將 CSS 當(dāng)作設(shè)計工具并迅速引發(fā)大量效仿,然而,這種做法有多少易用性可言?它并不容易集成到你的設(shè)計與開發(fā)當(dāng)中,也不容易調(diào)整。
就像上面的完全基于 CSS 的社會網(wǎng)絡(luò)標(biāo)志,無非是一堆各式各樣的線條的組合,固然令人印象深刻,也算有創(chuàng)意,但并不實用,因為創(chuàng)作這樣一個標(biāo)志可能需要幾個小時的艱辛勞動,在 Photoshop 中畫一個同樣的圖根本不費任何力氣,而且效果更好(更細(xì)膩)。
Ateş 認(rèn)為,這種方式生成的圖標(biāo)的可維護性也很成問題,調(diào)整一個圖標(biāo)原本只需要調(diào)整像素,現(xiàn)在卻需要修改 CSS 定義,同時,上述 CSS 標(biāo)志的設(shè)計者 Nicolas Gallagher 也表示,做這類事情,CSS 并非最適合。
降低 HTTP 請求?
上面這幅圖中的圖標(biāo)全部用 CSS 生成,而且作者將它們拿出來賣,40個圖標(biāo)賣25美金。不得不承認(rèn),這些圖標(biāo)設(shè)計得非常漂亮,作者設(shè)計這些 CSS 的初衷是為那些使用的網(wǎng)站降低 HTTP 請求數(shù),因為這些圖標(biāo)不需要額外的圖片文件請求。然而,一個小小的圖標(biāo)文件帶來的 HTTP 請求真的很值得一提嗎,何況,使用 CSS Sprite 技術(shù),這些圖標(biāo)完全可以放在同一個圖片中,靠 CSS 定位顯示,這樣,只需要一個 HTTP 請求就夠了。而且,我實在懷疑,這些 CSS 版的圖標(biāo)到底能減少多少帶寬。
本著語義化的精神
必須承認(rèn),我有時候會為了實現(xiàn)某種視覺上的需要,而額外使用 DIV 或 SPAN 等標(biāo)簽,這很不語義。然而 CSS 繪圖是更不語義的事,CSS 的真實使命是對網(wǎng)頁中的內(nèi)容進行修飾,而不是創(chuàng)建內(nèi)容本身。網(wǎng)頁中的圖形本身屬于內(nèi)容的范疇,不應(yīng)該由 CSS 創(chuàng)建。