/ CSS

[CSS Tech.] 再看 CSS 1.0, 2.1, 3.0

之前的文章在這邊,沒事可以當作茶餘飯後的剔牙文章。

這已經不是什麼新玩意,該說的我在雜談裡面也說得差不多了,索性來點 Hint 好了,順便當做是筆記也是不錯。要從 CSS 1.0 開始說,那大概要往回追朔 9 年左右,別懷疑,CSS 1.0 在 W3C 公布以來至今,已經有 9 個年頭了。至於說 CSS 3.0,目前還是屬於未發佈的階段,也不是所有──應該說,沒有一個瀏覽器可以完整支援──的瀏覽器都支援,目前只有 webkit 支援 CSS 3.0 而已,詳情請看 CSS 3 Previews.

從 CSS 1.0, 2.1 至今,主要的差異性在於,彈性。當然這是我主觀的認為,也許有的人會認為,根本就是變複雜,難度提升了許多。只是,到底所謂的難度在哪裡呢?每一種模組都是淺顯易懂的,除了選擇器與繼承這兩方面對於非程式撰寫人員來說有難度,我著實不知道到底有什麼難度。

CSS 2.1 加入了什麼呢?

很多?實際上會應用的,其實也沒多少。Selector 的彈性比 CSS 1.0 要更高,選擇也更多。但是在這裡遇到一個問題,瀏覽器看不看得懂?很多時候,並不是不用 CSS 這樣的工具,而是,在各家瀏覽器所顯示的視覺效果並不大相同,也就變成了對於網頁設計的美編的一大噩夢。

舉個例子來說,Adjacent sibling selector,他跟 Descendant selector 有什麼不同呢?它的效果是一樣的,但是有一個地方不太一樣,就是發生的條件。然而,要達成 Adjacent sibling selector 的效果,Descendant selector 也可以。div + span { … } 與 div span { … } 兩者的呈現效果是一樣的。但是,要產生這樣的效果,兩者的條件是不同的。

  • Adjacent sibling selector (鄰近成員選擇器)

    div + span 表示:<div> 標籤內的 <span> 標籤要發生效果,需要標籤緊鄰才會使用此 selector 的設定。

  • Descendant selector (前後選擇器)

    div span 表示:<div> 標籤內的 <span> 標籤要發生效果,需要標籤包含才會使用此 selector 的設定。

嘿,或許你又會問 Child selector 跟這兩個有什麼差異?

  • Child selector (子成員選擇器)

    div > span 表示:<div> 標籤中的所有子成員 <span> 都使用此效果。可以使用擬似類別 (pseudo-class) 的 :first-child 來改變其中第一個子成員的設定。成員的概念來自於 XML 的 nodes,每一個標籤都可以算是一個父元件 (parent element),其底下包含的子元件 (child),就可以當作是子成員。

選擇器的多樣化,可以上資料結構呈現更為複雜,但精準的效果。唯一苦了的,大概是視覺設計的人們吧。

那麼,CSS 3.0 加入了什麼?我只能說,很多。而且以擬似類別為大宗,針對畫面、文字、區塊又新增了許多的設定方式。雖然目前還是處於發展階段,但我個人是蠻樂見其成的。只是,在這麼強大的工具發展成熟之前,各大瀏覽器能不能先出去打一架統一規格啊?不然面對這些瀏覽器,再怎麼好用的工具,光調適可能就讓人興趣缺缺了。

總之,CSS 加油吧!

想看教學的可以 看看這裡這裡,放心,中文的。萬一你想看英文,本文上面的外連網址絕對沒有中文字。