CSS 是了不起的技術,我第一次用到的時候,覺得這是我做夢都想不到的東西,隨著CSS3 的引入,圓角,陰影,旋轉等等技術更將CSS 帶到前所未有的高度。然而,關於CSS,我們是否已經走得太遠,本文以一個Web 設計師的角度對CSS 的一些實驗性應用做了另一種思考。
那些有關CSS 的前衛實驗
每個實驗都是用了不同的方法,其中一些,如CSS 線圖,在現實中可以找到實際的應用,其它的,如CSS 實現的Twitter Fail Whale 圖畫,則純屬實驗,這些實驗的目的僅僅為了說明CSS 能夠達到的效果,並不代表應該這樣來做。
讓我們實際一點
上圖是用純CSS 實現的社群媒體網路標誌,很神奇不是?
我最近讀了Faruk Ateş 的文章,Pure CSS Icons: Make The Madness Stop,文中對這一做法提出了質疑,作者表示,有些人開始嘗試將CSS 當作設計工具並迅速引發大量效仿,然而,這種做法有多少易用性可言?它並不容易整合到你的設計與開發當中,也不容易調整。
就像上面的完全基於CSS 的社會網絡標誌,無非是一堆各式各樣的線條的組合,固然令人印象深刻,也算有創意,但並不實用,因為創作這樣一個標誌可能需要幾個小時的艱苦勞動,在Photoshop 中畫一個同樣的圖根本不費任何力氣,而且效果更好(更細膩)。
Ateş 認為,這種方式產生的圖示的可維護性也很成問題,調整一個圖示原本只需要調整像素,現在卻需要修改CSS 定義,同時,上述CSS 標誌的設計者Nicolas Gallagher 也表示,做這類事情,CSS 並非最適合。
降低HTTP 請求?
上面這張圖中的圖示全部用CSS 生成,作者將它們拿出來賣,40個圖示賣25美金。不得不承認,這些圖示設計得非常漂亮,作者設計這些CSS 的初衷是為那些使用的網站降低HTTP 請求數,因為這些圖示不需要額外的圖片檔案請求。然而,一個小小的圖示檔案帶來的HTTP 請求真的很值得一提嗎,何況,使用CSS Sprite 技術,這些圖示完全可以放在同一個圖片中,靠CSS 定位顯示,這樣,只需要一個HTTP請求就夠了。而且,我實在懷疑,這些CSS 版的圖示到底能減少多少頻寬。
本著語意化的精神
必須承認,我有時會為了實現某種視覺上的需要,而額外使用DIV 或SPAN 等標籤,這很不語義。然而CSS 繪圖是更不語義的事,CSS 的真實使命是對網頁中的內容進行修飾,而不是創建內容本身。網頁中的圖形本身就屬於內容的範疇,不應該由CSS 所創造。
本文原文來源: blog.echoenduring.com Are We Taking CSS Too Far? (原文作者:Matt Ward)
中文節譯來源:銳商企業CMS 網站內容管理系統官方網站