以下為本站文章分類清單

  1. AJAXspacer
  2. ASPspacer
  3. CSSspacer
  4. Javascriptspacer
  5. Windows 應用程式spacer
  6. 網頁設計
  7. 評論、短文、雜文spacer
  8. 版主spacer
  9. 最新回應spacer

以下為本頁本文內容

CSS Gradient似乎不該這樣-聊聊 CSS3

11/14 12' icon

Photo by http://www.spreadshirt.com

我曾經聊過"CSS 愈來愈程式化了",那是 2010 年年中的事,時間推進到現在 2012 年年底,許多技術及規格都大大更新,然則,這種更新,一則以喜,一則以憂。

先聊點歷史

如果你是老設計,那以下幾個問題,你會有感觸

在 CSS 未支援這些內容前,第一個情況,你必需用兩層表格完成,第二個情況,你必需作四張圖片,第三個情況,你必需作八張圖片,那個時候,美工佔設計很重要地位。

當 CSS 第一次出現時,為網頁設計帶來一點點驚艷,真正的驚艷,起肇於 HTML4 與 CSS 搭配,開始有了 Layer 概念後,哇,原來可以在網頁上不受行限制,盡情發揮。

排版

許多人相信,包括我,都認為 CSS 規格的推出,是為了網際排版的需求,也就是 CSS 後兩個字 SS (Style Sheet 樣式表) 所表達的函意,而排版的需求,隨便找份報紙、雜誌來看,屬於文字描述的部份,重點在字型、字體、字級、行距、字距、文繞圖、多欄、重點提示、表格強化等功能,屬於 DM 型式的部份,重點在圖形、標題、標題效果、圖形夾文字、圖形夾表格等。

以文繞圖來說,至今仍只能作到繞矩形圖,以多欄來說,CSS3 推出了 column-count 屬性,注意,是 CSS3 才推出,同樣的,普遍用於重點提示的框線加陰影或圓角,也在 CSS3 時才有了固定規範。

回歸到樣式這個名詞

既然是樣式,簡單的說,就是表現手法,好比一句廣告詞"網內互打免費",想強調"免費"這兩個字,就為這兩個字加上特殊的樣式。

而網頁和傳統靜態文宣的編排有個很重要的差別,在於瀏覽網頁是個動態的事情,觀看書報則是一個靜態的動作,看書,最"動"的事情是翻頁,而瀏覽網頁則大大不同,有太多"動作"發生,至少使用者的滑鼠會移來移去,所以,樣式的套用,除了傳統排版的需求外,應該還要再加上和使用者互動這類的內容。

CSS 的便利性

CSS 的排版能力,除了幾個小細節,說實話不輸專業排版軟體

比如說 first-letter 可以針對段落的第一個字元進行樣式設計。

比如 caption-side 讓表格標題的僵化得到抒解。

比如 clear 讓文字環繞得以加強彈性。

比如 list-style 讓清單樣式更豐富了。

但,太 over 了!

比如說 :enabled ,用在 <input> 標籤,適用於所有 enabled 的 <input> 元件,重點是,在不指定元件 disabled 時,所有 <input> 都是 enabled 不是嗎?

比如說 :before, :after 可以在指定樣式前後加點內容,一個專門處理樣式功能的規格,居然涉獵到內容這個工作,豈不怪哉?

比如說 perspective、rotate 這和 box-shadow 不同,很純粹是影像處理的工作,也被納入樣式。

比如說 appearance,可以 讓部份內容"看起來像",例如 appearance:button,看起來像按鈕,那為何不直接作成按鈕?或模擬一個按鈕樣式?

比如說 animation,作動畫,這好比麥當勞賣清粥地讓我大吃一驚。

比如 resize 可以讓使用者調整區塊大小,但設計者往往設成 none 將區塊鎖死。

接下來 filter Effects 又要推出了.......

似乎不該這樣

謝謝你看到這裡,或許你邊看邊點頭,也或許你邊看邊罵,都好,不要打筆戰,很純粹的個人觀點。

我還是要回歸到 CSS 的主要功能性-樣式,在 W3C 的 CSS 主頁上,標題這麼寫的

WHAT IS CSS?
Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents.

(CSS 是一個為網頁文件增加樣式,例如字型、顏色、留白等簡單機制)

我們看到了 CSS 設計的初衷,而演變到現在,我個人認為快變成四不像,尤其當瀏覽器不支援時,一切空談,當瀏覽器支援後,又存在不同瀏覽器表現差異的問題,然後設計師們知道了新規格的推出,不趕緊加入就落伍了,看到種種新規格,一陣興奮,可以少作幾張圖,大大增加網頁的可看性,但激情只維持了三秒,接下來繁瑣的語法、瀏覽器的支援、大量的舊文件作品都要由個人網頁上拿掉,以免被客戶認為技術過時....

如果有一天,CSS 有 3D 這個屬性,我一點都不意外!喔,出現在 HTML6 我也不意外!

 

 

以下為文章回應區

同意轉載,不過麻煩看一下轉載需知

manicure   2017/5/4 上午 08:49:00

Nice post. I learn something new and challenging on websites I stumbleupon on a daily basis.
It's always exciting to read through content from other writers and use something from their
web sites.

manicure   2017/4/11 下午 06:29:00

I love what you guys are up too. This type of clever work and reporting!
Keep up the excellent works guys I've incorporated you guys to blogroll.

Eastpak   2016/11/14 下午 02:07:00

謝謝分享^^

Johnny   2012/11/15 下午 12:34:00

就像閣下把下面那個留言板做成美觀的樣式一樣, 原本單調的 fieldset 元素, 不用寫程式、不用做圖片, 使用 CSS 就能辦到。其實, 你也可以完全使用舊方法來做, 但是, 請想像一下, 萬一你哪天想把「給個回應」四個字改成「請留言」或者變換顏色; 哪天又想把這個留言板底色改成深色系, 那麼, 使用 CSS 套板似乎是平常人會選擇的做法。

再拿 appearance 來說吧! 在某種情況下, 這個功能就不是雞肋了。例如要把一段文字所在地加上按鈕, 卻又希望這個按鈕維持跟文字相同的動態 style (例如字型、底色等), 使用 appearance 確實是一個既快又方便的方法。當然, 你也可以堅持寫程式去動態加入 input 元素, 或者 toggle 兩者的 visibility 等等。

新的技術如果不能為大家帶來方便, 那麼這個技術就是沒用的。不過我個人覺得 CSS3 確實能帶給所有人方便。

Recca Tsai   2012/11/14 上午 12:18:00

如果就樣式的名詞來看
確實CSS3很多新增的屬性
讓CSS複雜化了

不過如果從HTML5的角度來看
似乎是有意讓HTML走向類似FLASH
所以它提供了這些方法
(就像是FLASH可以用程式寫動畫,或是用移動補間等等來設計動畫)
從這個角度似乎又很合理

或許這樣東西最大的問題是......
設計前端頁面設計該怎麼分工了


給個回應
姓名:
佈落格網址:
  如果您是要發問問題, 最好有個問題測試的網址, 這樣比較容易找到您問題所在, 謝謝
內容: