CSS3新網(wǎng)頁技術(shù)的時(shí)代

北京網(wǎng)站建設(shè)公司尚品中國(xjjufeng.cn)：CSS 是了不起的技術(shù)，我第一次用到的時(shí)候，覺得這是我做夢都想不到的東西，隨著 CSS3 的引入，圓角，陰影，旋轉(zhuǎn)等等技術(shù)更將 CSS 帶到前所未有的高度。然而，關(guān)于 CSS，我們是不是已經(jīng)走得太遠(yuǎn)，本文以一個(gè) Web 設(shè)計(jì)師的角度對 CSS 的一些實(shí)驗(yàn)性應(yīng)用做了另一種思考。

那些有關(guān) CSS 的前衛(wèi)實(shí)驗(yàn)

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

讓我們實(shí)際一點(diǎn)
上圖是用純 CSS 實(shí)現(xiàn)的社會媒體網(wǎng)絡(luò)標(biāo)志，很神奇不是？

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

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

Ate? 認(rèn)為，這種方式生成的圖標(biāo)的可維護(hù)性也很成問題，調(diào)整一個(gè)圖標(biāo)原本只需要調(diào)整像素，現(xiàn)在卻需要修改 CSS 定義，同時(shí)，上述 CSS 標(biāo)志的設(shè)計(jì)者 Nicolas Gallagher 也表示，做這類事情，CSS 并非最適合。

降低 HTTP 請求？

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

本著語義化的精神

必須承認(rèn)，我有時(shí)候會為了實(shí)現(xiàn)某種視覺上的需要，而額外使用 DIV 或 SPAN 等標(biāo)簽，這很不語義。然而 CSS 繪圖是更不語義的事，CSS 的真實(shí)使命是對網(wǎng)頁中的內(nèi)容進(jìn)行修飾，而不是創(chuàng)建內(nèi)容本身。網(wǎng)頁中的圖形本身屬于內(nèi)容的范疇，不應(yīng)該由 CSS 創(chuàng)建。
本文發(fā)布于北京網(wǎng)站制作公司尚品中國http://xjjufeng.cn/