css 簡(jiǎn)史
簡(jiǎn)述
CSS的前世今生未來(lái)，如何成為和html,javascript并稱(chēng)為web前端的三大技術(shù)基石；又是如何出現(xiàn)我們相愛(ài)相殺（:boom:）的樣式兼容問(wèn)題的。
前世 :running:
自從在1991年，蒂姆·伯納斯·李首次提出 HTML 的時(shí)候，也就是前端界面宇宙混沌初開(kāi)，一片荒蕪，并沒(méi)有頁(yè)面樣式添加的方式。因此，群雄并起，逐鹿web端，出現(xiàn)了一大堆各式各樣的樣式方案，其中很多方案的特性為現(xiàn)在css的形成誕生提供了幫助。
瀏覽器標(biāo)簽樣式
頁(yè)面的樣式設(shè)計(jì)，取決于使用的標(biāo)簽在瀏覽器的默認(rèn)樣式
<MULTICOL COLS="3" GUTTER="25">
<P><FONT SIZE="4" COLOR="RED">This would be some font broken up into columns</FONT></P>
</MULTICOL>
各種樣式方案
- RRP：1993年6月，Robert Raisch在www-talk的郵件列表中給出了一個(gè)提案, 不支持層疊樣式，單位決定于他們使用的上下文。
@BODY fo(fa=he,si=18)
- PWP：ViolaWWW 創(chuàng)建者Pei-Yuan Wei 創(chuàng)建了一個(gè)樣式表語(yǔ)言，支持某種嵌套式的結(jié)構(gòu)
<LINK REL="STYLE" HREF="URL_to_a_stylesheet">
...
(BODY fontSize=normal
BGColor=white
FGColor=black
(H1 fontSize=largest
BGColor=red
FGColor=white)
)
- FOSI: 1987年，美國(guó)國(guó)防部CALS 團(tuán)隊(duì)創(chuàng)造了一門(mén)語(yǔ)言來(lái)定義 SGML 文檔的樣式，名為 FOSI
<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>
- DSSSL: 基于函數(shù)式語(yǔ)言 Scheme 創(chuàng)建一門(mén)新的語(yǔ)言，基于強(qiáng)大的能力，能對(duì)文檔進(jìn)行任何你可以想到的轉(zhuǎn)換
(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))
- PSL96: 1996年版的“Presentation Specification Language”，從核心上看，PSL 與 CSS 很像
H1 { fontSize: 20;}
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
}
支持如此的功能或許真的可以實(shí)現(xiàn)完美拆分內(nèi)容和樣式的代碼。遺憾的是這門(mén)語(yǔ)言讓人望而生畏，畢竟太易于擴(kuò)展了。這意味著對(duì)于不同的瀏覽器很可能實(shí)現(xiàn)會(huì)很不一樣。而且，它以學(xué)術(shù)界中的數(shù)篇論文發(fā)表出現(xiàn)，并沒(méi)有 www-talk 郵件列表上進(jìn)行研討，要知道大部分的工作都是在這郵件列表里確定的。因此這門(mén)語(yǔ)言并沒(méi)有被集成到主流的瀏覽器中。
- CHSS：1994年由 H?kon W Lie 提出，提出了樣式權(quán)重渲染, 樣式是可以重疊的
h1.font.size = 24pt 100%
h2.font.size = 20pt 40%
例如，如果之前的樣式表定義h2的字體大小為30pt，有60%的權(quán)重，而加上這個(gè)樣式表h2 20px的40%，根據(jù)權(quán)重將這兩個(gè)值合到一起大概就是26pt。
瀏覽器支持
- Mosaic： 標(biāo)簽樣式
- ViolaWWW：PWP
- 網(wǎng)景Netscape ：標(biāo)簽樣式 ——> JSSS
- IE: 標(biāo)簽 ——> css
...
今生 :car:
css 規(guī)范
CSS 最值的一提的就是它的簡(jiǎn)單。它易于解析、編寫(xiě)和閱讀。這種例子在互聯(lián)網(wǎng)的歷史里屢見(jiàn)不鮮。最終取勝的技術(shù)是那些初學(xué)者容易入門(mén)的，而不是那些給專(zhuān)家用的。
- css1.0: 1996年12月， H?kon Lie 簡(jiǎn)化他的提案，并與 Bert Bos 合作，W3C推出了CSS規(guī)范的第一個(gè)版本
- css2.0: 1998年
- css3: 2001年5月W3C開(kāi)始進(jìn)行CSS3標(biāo)準(zhǔn)的制定，到目前為止該標(biāo)準(zhǔn)還沒(méi)有最終定稿。
h1{
font-size: 20px;
color: red;
}
a:hover {
color: #e4393c;
}
css預(yù)處理
- less: http://lesscss.cn/
- sass: https://www.sass.hk/
...
css 目前一些瀏覽器發(fā)展的歷史原因，有些兼容問(wèn)題，可通過(guò)不同hack或一些技巧、插件autoprefixer進(jìn)行解決
未來(lái) :rocket:
在未來(lái)的CSS中將會(huì)支持更多的屬性以及函數(shù)，其中不乏有變量，嵌套，值計(jì)算等, 瀏覽器們也將統(tǒng)一規(guī)范，不再需要為了兼容而hack了
css 布局已經(jīng)出現(xiàn) flexbox, grid等友好的方式，也已經(jīng)被css標(biāo)準(zhǔn)采納，期待著css3的正式發(fā)布吧:smile:
2017年前端有什么樣變化？即將來(lái)臨的2018有什么樣的期待？- 知乎
