建站
咨詢
售后
建站咨詢
新聞中心
CSS是了不起的技術(shù)，本人***次用到的時(shí)候，覺得這是我做夢(mèng)都想不到的東西，隨著CSS 3的引入，圓角，陰影，旋轉(zhuǎn)等等技術(shù)更將CSS帶到***的高度。然而，關(guān)于CSS，我們是不是已經(jīng)走得太遠(yuǎn)，本文以一個(gè)Web設(shè)計(jì)師的角度對(duì)CSS的一些實(shí)驗(yàn)性應(yīng)用做了另一種思考。
關(guān)于CSS，推薦閱讀：跨瀏覽器開發(fā)教程
那些有關(guān)CSS的前衛(wèi)實(shí)驗(yàn)
幾個(gè)月前，作者曾發(fā)表過一篇文章，介紹了以下5種有趣的實(shí)驗(yàn)：
◆CSS3 Transforms & @font-face Experiment：http://neography.com/journal/css-transforms-font-face-experiment/
◆CSS Posters：http://designinformer.com/css-posters/
◆Pure CSS Line Graph：http://cssglobe.com/post/4175/pure-css-line-graph
◆CSS3 Leopard-style Stacks：http://gordonbrander.com/lab/css3-stacks/
◆Pure CSS Twitter Fail Whale：http://www.subcide.com/articles/pure-css-twitter-fail-whale/
每個(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)的社會(huì)媒體網(wǎng)絡(luò)標(biāo)志，很神奇不是？
在Pure CSS Icons: Make The Madness Stop一文中對(duì)這一做法也提出了質(zhì)疑，作者表示，一些人開始嘗試將 CSS 當(dāng)作設(shè)計(jì)工具并迅速引發(fā)大量效仿，然而，這種做法有多少易用性可言？它并不容易集成到你的設(shè)計(jì)與開發(fā)當(dāng)中，也不容易調(diào)整。
《Pure CSS Icons: Make The Madness Stop》：http://farukat.es/journal/2010/08/469-pure-css-icons-make-madness-stop
就像上面的完全基于 CSS 的社會(huì)網(wǎng)絡(luò)標(biāo)志，無非是一堆各式各樣的線條的組合，固然令人印象深刻，也算有創(chuàng)意，但并不實(shí)用，因?yàn)閯?chuàng)作這樣一個(gè)標(biāo)志可能需要幾個(gè)小時(shí)的艱辛勞動(dòng)，在 Photoshop 中畫一個(gè)同樣的圖根本不費(fèi)任何力氣，而且效果更好（更細(xì)膩）。
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請(qǐng)求？
上面這幅圖中的圖標(biāo)全部用 CSS 生成，而且作者將它們拿出來賣，40個(gè)圖標(biāo)賣25美金。不得不承認(rèn)，這些圖標(biāo)設(shè)計(jì)得非常漂亮，作者設(shè)計(jì)這些 CSS 的初衷是為那些使用的網(wǎng)站降低 HTTP 請(qǐng)求數(shù)，因?yàn)檫@些圖標(biāo)不需要額外的圖片文件請(qǐng)求。
然而，一個(gè)小小的圖標(biāo)文件帶來的 HTTP 請(qǐng)求真的很值得一提嗎，何況，使用 CSS Sprite 技術(shù)，這些圖標(biāo)完全可以放在同一個(gè)圖片中，靠 CSS 定位顯示，這樣，只需要一個(gè) HTTP 請(qǐng)求就夠了。而且，我實(shí)在懷疑，這些 CSS 版的圖標(biāo)到底能減少多少帶寬。
本著語義化的精神
必須承認(rèn)，我有時(shí)候會(huì)為了實(shí)現(xiàn)某種視覺上的需要，而額外使用 DIV 或 SPAN 等標(biāo)簽，這很不語義。然而 CSS 繪圖是更不語義的事，CSS 的真實(shí)使命是對(duì)網(wǎng)頁中的內(nèi)容進(jìn)行修飾，而不是創(chuàng)建內(nèi)容本身。網(wǎng)頁中的圖形本身屬于內(nèi)容的范疇，不應(yīng)該由 CSS 創(chuàng)建。
原文作者：Matt Ward
原文地址：http://blog.echoenduring.com/2010/08/14/are-we-taking-css-too-far/
【編輯推薦】
- 純CSS無hacks的跨流覽器多列布局
- CSS技術(shù)在網(wǎng)頁設(shè)計(jì)中的運(yùn)用
- 定義未來Web樣式 CSS 3***特性一覽
- CSS 3備受期待的8大功能
- 關(guān)于CSS 3 你應(yīng)該知道的五項(xiàng)新技術(shù)
新聞標(biāo)題：關(guān)于CSS 我們走得太遠(yuǎn)忘了為什么而出發(fā)
本文URL：http://www.5511xx.com/article/djpjedj.html
