[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 加油吧！

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

You might also like...