HTML的誕生
HTML是怎么來的挤渔?
在1982年的時候荠察,萬維網(wǎng)的發(fā)明者Tim Berners-Lee爵士為了讓全世界的物理學(xué)家能夠方便的進(jìn)行合作與信息共享,造了HTML(HyperText Markup Language) 超文本置標(biāo)語言耗式。
在1991年3月昔馋,Tim Berners-Lee
把HTML
介紹給了給他在CERN(歐洲核子研究中心) 工作的朋友,當(dāng)時網(wǎng)頁瀏覽器被其世界各地的成員用來瀏覽CERN
龐大的電話薄猛频。
然后在8年之后的1990年狮崩,博士發(fā)明了世界上第一個瀏覽器WorldWideWeb,也因此推動著互聯(lián)網(wǎng)高速發(fā)展鹿寻。
在WorldWideWeb
問世之后的1993年NCSA推出了Mosaic瀏覽器并且迅速火了起來睦柴,成為第一個世界級應(yīng)用的瀏覽器,推動著互聯(lián)網(wǎng)發(fā)展毡熏。隨后跟著的有當(dāng)時的兩大霸主Netscape
de Netscape瀏覽器與MicroSoft
的Internet Explorer瀏覽器坦敌,這兩個瀏覽器在當(dāng)時掀起了一場互聯(lián)網(wǎng)瀏覽器大戰(zhàn)。這場戰(zhàn)爭的結(jié)果是以Internet Explorer
全勝告終。但也因此大大的推動了互聯(lián)網(wǎng)的發(fā)展狱窘。
CSS的誕生
CSS是怎么來的杜顺?
就在承載HTML
的瀏覽器迅猛發(fā)展的90年代,CSS (Cascading Style Sheet)也應(yīng)運而生蘸炸。不同的瀏覽器結(jié)合各自HTML
語法結(jié)構(gòu)實現(xiàn)了很多不同的外部樣式語法躬络。但隨著HTML
的發(fā)展,為了滿足設(shè)計師的要求而增加了很多顯示功能搭儒,隨著這些功能的增加洗鸵,外部樣式語法作用越來越?jīng)]有意義。
在1994年10月10日仗嗦,CSS之父H?kon Wium Lie提出了 CSS 的最初建議膘滨,并且為 HTML 樣式在芝加哥的一次會議上正式提出了 CSS 。
在1996 年 12 月稀拐,W3C
在經(jīng)過多方的討論之后火邓,推出了CSS1.0
。這一規(guī)范一出現(xiàn)就引起了各方的注意德撬,隨即 MicroSoft 公司和 Netscape 公司紛紛表示自己的瀏覽器能夠支持 CSS1.0
铲咨。
CSS的各個版本
CSS各版本的更新
-
CSS1.0
在1997 年 由W3C
發(fā)布,第一版主要規(guī)定了選擇器蜓洪、樣式屬性纤勒、偽類 / 對象幾個大的部分; -
CSS2.0/2.1
在1998 年 由W3C
發(fā)布隆檀,CSS2 規(guī)范是基于 CSS1 設(shè)計的摇天,擴(kuò)充和改進(jìn)了很多更加強大的屬性。包括選擇器恐仑、位置模型泉坐、布局、表格樣式裳仆、媒體類型腕让、偽類、光標(biāo)樣式歧斟; - 由于
CSS2
經(jīng)歷了 9 年的時間(從 2002 年 8 月到 2011 年 6 月)才達(dá)到 Recommendation(推薦) 狀態(tài)纯丸,此后W3C為了加快那些已經(jīng)確認(rèn)沒有問題的特性的標(biāo)準(zhǔn)化速度,便作出了一項被稱為 Beijing doctrine 的決定静袖,將CSS模塊化觉鼻,并且按照每個模塊的進(jìn)度來標(biāo)準(zhǔn)化。所以從形式上來講勾徽,CSS3
已經(jīng)不存在了』梗現(xiàn)在CSS 包括了修訂后的 CSS2.1 以及完整模塊對它的擴(kuò)充,模塊的 level(級別)數(shù)并不一致喘帚〕╂ⅲ可以在每個時間點上為 CSS 標(biāo)準(zhǔn)定義一個 snapshots(快照)。
下圖為CSS模塊化的發(fā)展進(jìn)程圖吹由,來自MDN
差點要成為CSS的語言
現(xiàn)在的CSS也是經(jīng)過一番爭斗才脫穎而出的
以下內(nèi)容翻譯于The Languages Which Almost Became CSS
第一個提案
早在1993年Mosaic
瀏覽器1.0發(fā)布之前若未,當(dāng)時現(xiàn)有的瀏覽器已經(jīng)開始獨立處理HTML
了,但是它們并沒有能給標(biāo)簽定制樣式的方式倾鲫,這就意味著你看到的標(biāo)簽長什么樣就長什么樣粗合,不能改。
所以在1993年的6月乌昔,Robert Raisch
給www-talk
郵件發(fā)了一個提案隙疚,希望創(chuàng)建一個“一種易于解析可以與Web文檔一起提供樣式信息的格式”,并給它起名叫RRP
磕道。
格式如下:
@BODY fo(fa=he,si=18)
看不懂上面的代碼是情有可原的供屉。在gzipping
之前的時代,網(wǎng)絡(luò)傳輸速度只有14.4K溺蕉,所以格式盡量壓縮都是合理的伶丐。這個特殊規(guī)則是將font family (fa)
設(shè)置為helvetica (he)
,將font size(si)
設(shè)置為18 points
疯特。
Viola 以及原始瀏覽器之戰(zhàn)
和流行的看法不一樣哗魂,Mosaic
并不是第一個圖形瀏覽器,ViolaWWW才是漓雅。由Pei-Yuan Wei花了4天寫的录别。
以下是Pei-Yuan Wei
創(chuàng)建的樣式表語言:
(BODY fontSize=normal
BGColor=white
FGColor=black
(H1 fontSize=largest
BGColor=red
FGColor=white)
)
web前端開發(fā)學(xué)習(xí)Q-q-u-n: 731771211,分享學(xué)習(xí)的方法和需要注意的小細(xì)節(jié)邻吞,不停更新最新的教程和學(xué)習(xí)方法(詳細(xì)的前端項目實戰(zhàn)教學(xué)視頻庶灿,PDF)
在這個例子中我們給body
添加了顏色選擇器,并且給body
中的h1
添加了樣式吃衅。
值得一提的是PWP還是引用外部樣式表的方法提出者往踢,他提出的方法一直沿用至今。
<LINK REL="STYLE" HREF="URL_to_a_stylesheet">
不幸的是徘层,ViolaWWW
只能運行在X Window System系統(tǒng)中峻呕,這個系統(tǒng)只在Unix中受歡迎。當(dāng)Mosaic
移植到Windows
上不久后就把ViolaWWW
拋到身后了趣效。
Web之前的樣式表
早在互聯(lián)網(wǎng)之前就有對文檔樣式進(jìn)行修改的語言要求瘦癌。
正于你所知道的,HTML
源于一個在互聯(lián)網(wǎng)之前就出現(xiàn)的語言跷敬,SGML
讯私。早在1987年,美國國防部就決定研究SGML
是否可以使文檔存儲和傳輸更加便捷,他們有大量的文檔需要處理斤寇。跟其他好的政府項目一樣桶癣,他們沒有時間可以浪費在起名上。這個團(tuán)隊最初叫計算機輔助后勤支持隊娘锁,后來叫計算機輔助采集和后勤支持隊牙寞,最后叫持續(xù)獲取和生命周期支持計劃。反正簡寫都是CALS
莫秆。
CALS
為SGML
創(chuàng)建了一個叫FOSI
(這是一個四字單詞簡寫间雀,但是因為年代久遠(yuǎn),已經(jīng)不知道是哪四個單詞了)的語言來為文檔添加樣式镊屎。
例子如下:
<outspec>
<docdesc>
<charlist>
<font size="12pt" bckcol="white" fontcol="black">
</charlist>
</docdesc>
<e-i-c gi="h1"><font size="24pt" bckcol="red", fontcol="white"></e-i-c>
<e-i-c gi="h2"><font size="20pt" bckcol="red", fgcol="white"></e-i-c>
<e-i-c gi="a"><font fgcol="red"></e-i-c>
<e-i-c gi="cmd kbd screen listing example"><font style="monoser"></e-i-c>
</outspec>
如果你困惑docdesc
或charlist
惹挟,那么你要知道,www-talk
的成員跟你有同樣的困惑缝驳。唯一給出上下文信息的是e-i-c
匪煌,即element in context
。FOSI
值得注意的是引入了em
作為字體單位党巾,現(xiàn)在已經(jīng)成為了很多熟悉CSS的人中更受歡迎的方法萎庭。
圖靈完備的樣式表
由于它的復(fù)雜性,FOSI
被認(rèn)為是格式化文檔問題的臨時解決方案齿拂。長遠(yuǎn)的解決方案是創(chuàng)建一個基于函數(shù)式編程語言Scheme的新語言驳规,它可以做任何你能想象到的文檔轉(zhuǎn)換。這門語言叫DSSSL
。
下面是語法:
(element H1
(make paragraph
font-size: 14pt
font-weight: 'bold'))
因為它是一門編程語言,所以你可以函數(shù)化:
(define (create-heading heading-font-size)
(make paragraph
font-size: heading-font-size
font-weight: 'bold))
(element h1 (create-heading 24pt))
(element h2 (create-heading 18pt))
并在樣式中使用數(shù)學(xué)結(jié)構(gòu)疤剑,例如“條帶化”表的行:
(element TR
(if (= (modulo (child-number) 2)
0)
… ;even-row
…)) ;odd-row
最后,讓你妒忌一下捻勉,DSSSL可以把繼承的值當(dāng)成變量進(jìn)行數(shù)學(xué)運算:
(element H1
(make paragraph
font-size: (+ 4pt (inherited-font-size))))
不幸的是,DSSSL
擁有和跟所有Scheme
類語言一樣的致命弱點:括號太多了刀森。此外踱启,當(dāng)它最終發(fā)布時,它可能過于完整研底,使瀏覽器開發(fā)人員感到害怕埠偿。 DSSSL規(guī)范包含210多個獨立的可以定制樣式的屬性。
為什么樣式表脫穎而出榜晦?
CSS 沒有父級選擇器(一種基于子元素的樣式給父元素設(shè)置樣式的方法)冠蒋。 這個問題在Stack Overflow上被頻繁的提問(這是其中一個)。但是事實證明乾胶,這個特性缺失是有理由的抖剿。特別在互聯(lián)網(wǎng)早期朽寞,讓網(wǎng)頁在完全加載完成之前被渲染,是很重要的斩郎。意思就是脑融,大家希望HTML加載完之前,就可以渲染已經(jīng)加載完的部分孽拷。
父選擇器意味著樣式得在HTML文檔一邊加載時吨掌,一邊更新半抱。像DSSSL這樣的語言如果實現(xiàn)了這個功能脓恕,因為它們可以對文檔進(jìn)行操作,所以也沒很可能就不能用了窿侈。
在1995年3月炼幔,Bert Bos
作為第一個提出這個問題的人,還提供可行方案史简。他的提案中還包括了一個早期的笑臉表情包:-)
乃秀。
這個語言有點像面向?qū)ο螅?/p>
*LI.prebreak: 0.5
*LI.postbreak: 0.5
*OL.LI.label: 1
*OL*OL.LI.label: A
使用.
來指定直接子節(jié)點,使用*
來指定祖先節(jié)點圆兵。
他的語言還有一個很酷的屬性跺讯,就像這樣在樣式表中定義超鏈接:
*A.anchor: !HREF
在上面的例子中,指定link
的目標(biāo)為其HREF
的值殉农。像這種可控制鏈接等元素的行為在很多提案中都很流行刀脏。在Javascript
還沒出來之前,沒有什么可控制元素的方法超凳,所以它們看起來是很合理的愈污。
一個函數(shù)式的提案,1994年被一位叫C.M. Sperberg-McQueen
的紳士提出轮傍,里面包含了類似的行為暂雹。
(style a
(block #f) ; format as inline phrase
(color blue) ; in blue if you’ve got it
(click (follow (attval 'href))) ; and on click, follow url
他的語言還引入了content
關(guān)鍵字作為從樣式表控制HTML
元素內(nèi)容的一種方式,這個概念后來被引入到CSS 2.1
中创夜。
可能還有什么
在我談到實際成為CSS的語言之前杭跪,還有另一種語言值得一提,因為它在某種程度上是早期Web開發(fā)者的夢想驰吓。
它就是PSL96
揍魂,按照當(dāng)年的命名規(guī)范,1996年版的Presentation Specification Language
棚瘟。PSL的核心很像CSS:
H1 {
fontSize: 20;
}
然而现斋,它很快就變得很有趣了。例如偎蘸,你不僅可以根據(jù)元素寬度來渲染它的位置庄蹋,也可以基于瀏覽器的實際寬度來渲染瞬内。
LI {
VertPos: Top = LeftSib . Actual Bottom;
}
甚至你可以使用元素左邊的兄弟姐妹來定制。
你還可以為樣式添加邏輯表達(dá)式限书。例如虫蝶,僅設(shè)置具有href的錨元素的樣式:
A {
if (getAttribute(self, "href") != "") then
fgColor = "blue";
underlineNumber = 1;
endif
}
這種樣式可以擴(kuò)展到我們今天用樣式來完成的各種事情:
LI {
if (ChildNum(Self) == round(NumChildren(Parent) / 2 + 1)) then
VertPos: Top = Parent.Top;
HorizPos: Left = LeftSib.Left + Self.Width;
else
VertPos: Top = LeftSib.Actual Bottom;
HorizPos: Left = LeftSib.Left;
endif
}
web前端開發(fā)學(xué)習(xí)Q-q-u-n: 731771211,分享學(xué)習(xí)的方法和需要注意的小細(xì)節(jié)倦西,不停更新最新的教程和學(xué)習(xí)方法(詳細(xì)的前端項目實戰(zhàn)教學(xué)視頻能真,PDF)
支持這功能的話或許真的可以實現(xiàn)內(nèi)容與樣式分離的夢想。遺憾的是這門語言拓展性太強扰柠,這就以為著不用瀏覽器的實現(xiàn)可能會不一樣粉铐。而且,它是以一系列的文章出現(xiàn)出現(xiàn)在學(xué)術(shù)界卤档,并沒有經(jīng)過www-talk
郵件列表進(jìn)行討論蝙泼,所以,它永遠(yuǎn)不會出現(xiàn)在主流瀏覽器劝枣。
CSS之魂
一門語言汤踏,至少從名字上,直接引出了CSS
舔腾,它叫CHSS (Cascading HTML Style Sheets)
溪胶,提案在1994年被H?kon W Lie
提出。
跟很多好主意一樣稳诚,這個原始提案非常瘋狂哗脖。
h1.font.size = 24pt 100%
h2.font.size = 20pt 40%
注意行尾的百分比,這個百分比是指當(dāng)前樣式表占用該值的“權(quán)重”采桃。例如懒熙,如果之前的樣式表已將h2字體大小定義為30pt,擁有60%普办,并且此樣式表將h2s設(shè)置為20px 40%工扎,則這兩個值將根據(jù)其權(quán)重百分比進(jìn)行組合在一起,大概就是26pt衔蹲。
很明顯肢娘,這個提案是在基于文檔的HTML
頁面的時代,基于拖鞋的設(shè)計是無法在我們面向應(yīng)用的世界里發(fā)揮作用的舆驶。不過橱健,它已經(jīng)具備了樣式表應(yīng)該可以疊加的基本思想。換句話說沙廉,應(yīng)該可以將多個樣式表應(yīng)用于同一頁面拘荡。
它最初的形式被認(rèn)為是重要的,因為它讓用戶可以控制他們所看到的內(nèi)容撬陵。頁面有一個樣式表珊皿,并且Web用戶將擁有自己的樣式表网缝,這兩個樣式表一起渲染在頁面上。支持多個樣式表被視為一種維護(hù)Web個人自由的方法蟋定,而不是支持開發(fā)人員(他們?nèi)匀皇謩泳帉憜为毜腍TML頁面)的方式粉臊。
用戶可以控制該頁面作者的建議的權(quán)重,就如提案中的ASCII 圖那樣驶兜。
User Author
Font o-----x--------------o 64%
Color o-x------------------o 90%
Margin o-------------x------o 37%
Volume o---------x----------o 50%
像許多這些提案一樣扼仲,它包含了幾十年來不可能出現(xiàn)在CSS中的特性。例如抄淑,可以根據(jù)用戶的環(huán)境編寫邏輯表達(dá)式屠凶。
AGE > 3d ? background.color = pale_yellow : background.color = white
DISPLAY_HEIGHT > 30cm ? http://NYT.com/style : http://LeMonde.fr/style
在一個有點樂觀的未來場景中,瀏覽器會根據(jù)給定的內(nèi)容對你的相關(guān)性蝇狼,允許它以更大的尺寸展示給你看阅畴。
RELEVANCE > 80 ? h1.font.size *= 1.5
你知道接下來發(fā)生了什么
H?kon Lie
繼續(xù)簡化他的提案倡怎,且和Bert Bos
合作迅耘,并在1996年11月發(fā)布的CSS
規(guī)范的第一版。最終他將創(chuàng)造CSS
寫進(jìn)了他的博士論文里监署,也就是這個文檔幫助我寫了這篇文章颤专。
與許多其他提案相比,CSS的一個值得注意的事實是它的簡單性钠乏。它易于分析栖秕,易于編寫和輕松閱讀。與互聯(lián)網(wǎng)歷史上的許多其他例子一樣晓避,對于初學(xué)者來說簇捍,需要的是最容易上手的技術(shù),而不是那些給更強大的專業(yè)人員用的技術(shù)俏拱。
它本身就給我們一個提醒暑塑,這是一個偶然發(fā)生的創(chuàng)新。例如锅必,僅添加了對上下文選擇器(body ol li
)的支持事格,因為Netscape
已經(jīng)有一種方法可以從超鏈接的圖像中刪除邊框,并且似乎有必要實現(xiàn)流行瀏覽器可以執(zhí)行的所有操作搞隐。這個功能本身就大大拖延了 CSS
的實現(xiàn)驹愚,因為大多數(shù)瀏覽器在解析HTML時沒有保留標(biāo)簽的“堆棧”劣纲。這意味著必須重新設(shè)計解析器才能完全支持CSS逢捺。
像這樣的挑戰(zhàn)(以及廣泛使用非標(biāo)準(zhǔn)HTML標(biāo)簽來定義樣式)導(dǎo)致著CSS直到1997年才可使用,直到2000年3月才有瀏覽器完全支持它癞季。這跟每個開發(fā)者跟你說的一樣劫瞳,瀏覽器近幾年才真正標(biāo)準(zhǔn)化棠耕,這里距首次發(fā)布CSS已經(jīng)過去了21年(原文15年)了。
最終BOSS
IE 3
以(有點可怕的)CSS
支持著稱柠新。為了競爭窍荧,Netscape 4
也考慮了CSS
。但它還是決定通過將CSS轉(zhuǎn)換為JavaScript并執(zhí)行它來實現(xiàn)它恨憎,而不是將第三種(考慮HTML和JavaScript)蕊退。更有甚者,Web開發(fā)人員應(yīng)該可以訪問這個“JavaScript樣式表”中間語言憔恳。
語法是直接使用JavaScript
瓤荔,然后添加了一些特定樣式的API:
tags.H1.color = "blue";
tags.p.fontSize = "14pt";
with (tags.H3) {
color = "green";
}
classes.punk.all.color = "#00FF00"
ids.z098y.letterSpacing = "0.3em"
你甚至可以定義一個每遇到一個標(biāo)簽就執(zhí)行一次的函數(shù):
evaluate_style() {
if (color == "red"){
fontStyle = "italic";
} else {
fontWeight = "bold";
}
}
tag.UL.apply = evaluate_style();
web前端開發(fā)學(xué)習(xí)Q-q-u-n: 731771211,分享學(xué)習(xí)的方法和需要注意的小細(xì)節(jié)钥组,不停更新最新的教程和學(xué)習(xí)方法(詳細(xì)的前端項目實戰(zhàn)教學(xué)視頻输硝,PDF)
我們應(yīng)該簡化樣式和腳本之間分界線的想法是合理的,現(xiàn)在在React社區(qū)還出現(xiàn)了各種類似的思路程梦。
在當(dāng)時点把,JavaScript
本身就是一種非常新的語言,但是通過一些逆向工程屿附,IE
已經(jīng)在IE3
中添加了對它的支持(如“JScript
”)郎逃。