iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 1
3
自我挑戰組

每天來點 CSS Specification系列 第 1

先來說點 CSS 誕生的前情提要~(上)

倘若不斷向深處扎根,就能茁壯成長 - 出自 RM

https://ithelp.ithome.com.tw/upload/images/20200321/20111825FnYEcOr0z2.png

為什麼要先知道 CSS 歷史呢? /images/emoticon/emoticon13.gif

知道歷史,便可知道裡面有很多的問題。一切事不是痛痛快快一句話講得完。歷史終是客觀事實,歷史沒有不對的,不對的是在我們不注重歷史,不把歷史作參考。 - 出自 錢穆

我很喜歡錢穆的這一段話。對於現在學習 CSS 的我們來說,它已經不是最初的樣貌,而是經過多次調整及修改,若要更加貼近 CSS ,或許要了解其最初誕生的理由。那麼在進入正文之前,我們先簡單聊聊 CSS 的歷史吧~

讓你在一分鐘內記下所有車子的顏色排列一定是件苦差事,好比剛接觸 CSS 就馬上背那一大坨的屬性。

通常在剛開始學習 CSS 時,我們總是有點焦慮,要學習各種不同的屬性名稱、各種屬性又有什麼不同的值,這可是佔了不少的腦容量,光是 display 就高達了好幾種:(因為實在很多,以下只列舉部分)

  1. inline
  2. block
  3. table
  4. inline-block
  5. flex
  6. list-item
  7. grid
  8. ........。

甚至有些見都沒見過的東西 /images/emoticon/emoticon04.gif

  1. inline-table
  2. inline-flex
  3. ......。

等等諸如此類,實在是沒有什麼心力了解更多,好比 CSS 的歷史、過往、發明的緣由、過程這些概念通常比較模糊,往往在學習一定程度後才會或多或少更加深入理解。不過先了解一些歷史,能夠更幫助我們學習,就好比在想要說服某人當你的男/女朋友前,你得先了解這個人的喜好才能好下手一樣 ,於是我便產生整理過往歷史的念頭,也透過這篇文讓自己更加了解整個 CSS 發展的軌跡。

CSS 的誕生

好,讓我們開始吧!首先先了解一下它落地的那一刻~

1994 年某個夜黑風高的夜晚,Håkon Wium Lie 在產房外焦急的等待著,突然,產房的門打開了,醫生帶著微笑走了手術門,手裡抱著健康的新生兒,醫生告訴 Håkon Wium Lie:「恭喜您先生,是個健康的 CSS!」。(大誤

好吧我知道這不太好笑。

/images/emoticon/emoticon21.gif

總之,在 1994 年,CSS 被它的發明者 Håkon Wium Lie 發明及提出,解決的當時網頁開發者苦於沒有方法能調整 document(HTML)樣式的問題。在當時是這樣的,在 Web 發明後,它開始被人們作為電子出版平台,然而作為出版發布平台缺少了一個至關重要的部分,HTML 本身不具備調整 document 外觀風格的功能,造成在當時網頁開發者光是要調整文字顏色就是一件麻煩的事情,需要依照當時各家瀏覽器如何覺決定各自的樣式表支援度,好比當時一款名為 Viola 的瀏覽器就有自己的樣式表語言。

放在現在來看其實還蠻難想像的,這是因為 HTML 並不是因此誕生( 就好像你不會拿 Word 去修改照片上需要除掉痘疤的臉一樣,你應該找的是 Photoshop )。當時的情況是,網頁設計者期望能夠將 Web 上的 document 如同我們一般的報章雜誌排版,讓網頁的樣式更加的豐富、完整,這樣作為一個電子出版平台才有它的專業度及完整度,使用者也能更方便地閱讀這些 document。

拿到現在來看的話就好比我們今天打開某商業雜誌,裡面卻素面朝天,一篇好好的成功業界人物訪談變得好像在看英漢字典一樣密密麻麻,文字都擠在了一塊(怎麼到哪都是新細明體),這樣的確是挺讓人看不下去的。想想當時的開發者提出期望能夠修改樣式的要求也理所當然。於是在這樣的情境下,帶有能夠調整文檔風格樣式的 CSS 誕生了。

CSS 並非當時候唯一的樣式表語言,在當時也存在著其他的樣式表語言如同 Argo style language

在此提及的 document 包含如 HTML、XML。在初期 HTML 文檔的結構、樣式便有著要分離的目標。

Håkon 提出 CSS 是在當時 Netscape 預計推出新瀏覽器的三天前,而當時正在建構 Argo 的 Bert 被 Håkon 的點子所吸引,於是便一起合作發想接下來更完善的 CSS,CSS 和當時的樣式表語言相比有個特色便是文檔樣式能來源於不只一個,使得網頁樣式能夠被作者、讀者更動。

CSS 與出版

在說到其他東西之前,還有一項是我還沒說到的,這點我覺得還算是挺重要的小歷史,CSS 在發明至今一直不僅僅是只針對 HTML、XML 這種網頁 document 所存在的,在 Håkon Wium Lie 的網誌中有提到,CSS 有提供關於屏幕、打印甚至是朗讀等等的呈現方式,而在他本人的出版著作中,也有使用 CSS 去進行編排的。

說來也有趣,在 Håkon Wium Lie 的網誌中有下面這一段話:

Our goal is to convert the book-publishing industry to use HTML and CSS.
意思是希望 CSS 不只應用在 document(HTML) 上,更希望將圖書出版業轉化成使用 CSS 去編排。

他本人使用打印的著作購買直通車:Cascading Style Sheets: Designing for the Web (3rd Edition)
HTML 轉 PDF 使用:princexml

https://ithelp.ithome.com.tw/upload/images/20190916/20111825D9u2iUwlxo.png =100

小結

以上大略的介紹了有關 CSS 的簡約誕生過程,在下一篇章中我們來看看看看它與瀏覽器、W3C 又有些什麼過往淵源吧~


資料來源:

  1. Håkon Wium Lie 個人網站
  2. W3C 上的有趣介紹:A brief history of CSS until 2016

以上的部分有任何錯誤的地方,歡迎指正呦~非常感謝~~XD


下一篇
先來說點 CSS 誕生的前情提要~(下)
系列文
每天來點 CSS Specification30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 則留言

0
Chris
iT邦新手 4 級 ‧ 2019-09-16 14:28:31

金南俊語錄?

沒錯~那是本文精華~XD

0
tsuifei
iT邦新手 4 級 ‧ 2019-09-17 07:53:52

好精彩有趣的解說,跟完這系列,一定會對現任男女友暸如職掌!

我要留言

立即登入留言