css简史

2018-03-19 本文已影响107人迷缘火叶

css 简史

简述 CSS 的前世今生未来，如何成为和html,javascript并称为web前端的三大技术基石；又是如何出现我们相爱相杀（:boom:）的样式兼容问题的。

前世 :running:

自从在1991年，蒂姆·伯纳斯·李首次提出 HTML 的时候，也就是前端界面宇宙混沌初开，一片荒芜，并没有页面样式添加的方式。因此，群雄并起，逐鹿web端，出现了一大堆各式各样的样式方案，其中很多方案的特性为现在css的形成诞生提供了帮助。

浏览器标签样式

页面的样式设计，取决于使用的标签在浏览器的默认样式

<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的邮件列表中给出了一个提案, 不支持层叠样式，单位决定于他们使用的上下文。

@BODY fo(fa=he,si=18)

PWP：ViolaWWW 创建者Pei-Yuan Wei 创建了一个样式表语言，支持某种嵌套式的结构

<LINK REL="STYLE" HREF="URL_to_a_stylesheet">
...
(BODY fontSize=normal
      BGColor=white
      FGColor=black
  (H1   fontSize=largest
        BGColor=red
        FGColor=white)
)

FOSI: 1987年，美国国防部CALS 团队创造了一门语言来定义 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: 基于函数式语言 Scheme 创建一门新的语言，基于强大的能力，能对文档进行任何你可以想到的转换

(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
}

支持如此的功能或许真的可以实现完美拆分内容和样式的代码。遗憾的是这门语言让人望而生畏，毕竟太易于扩展了。这意味着对于不同的浏览器很可能实现会很不一样。而且，它以学术界中的数篇论文发表出现，并没有 www-talk 邮件列表上进行研讨，要知道大部分的工作都是在这邮件列表里确定的。因此这门语言并没有被集成到主流的浏览器中。

CHSS：1994年由 Håkon W Lie 提出，提出了样式权重渲染, 样式是可以重叠的

h1.font.size = 24pt 100%
h2.font.size = 20pt 40%

例如，如果之前的样式表定义h2的字体大小为30pt，有60%的权重，而加上这个样式表h2 20px的40%，根据权重将这两个值合到一起大概就是26pt。

浏览器支持

Mosaic：标签样式
ViolaWWW：PWP
网景Netscape ：标签样式 ——> JSSS
IE: 标签 ——> css
...

今生 :car:

css 规范

CSS 最值的一提的就是它的简单。它易于解析、编写和阅读。这种例子在互联网的历史里屡见不鲜。最终取胜的技术是那些初学者容易入门的，而不是那些给专家用的。

css1.0: 1996年12月， Håkon Lie 简化他的提案，并与 Bert Bos 合作，W3C推出了CSS规范的第一个版本
css2.0: 1998年
css3: 2001年5月W3C开始进行CSS3标准的制定，到目前为止该标准还没有最终定稿。

h1{
  font-size: 20px;
  color: red;
}
a:hover {
  color: #e4393c;
}

css预处理

less: http://lesscss.cn/
sass: https://www.sass.hk/
...

css 目前一些浏览器发展的历史原因，有些兼容问题，可通过不同hack或一些技巧、插件autoprefixer进行解决

未来 :rocket:

在未来的CSS中将会支持更多的属性以及函数，其中不乏有变量，嵌套，值计算等, 浏览器们也将统一规范，不再需要为了兼容而hack了
css 布局已经出现 flexbox, grid等友好的方式，也已经被css标准采纳，期待着css3的正式发布吧:smile:

2017年前端有什么样变化？即将来临的2018有什么样的期待？- 知乎