css简史

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预处理

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

未来 :rocket:

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

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

参考

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 144,100评论 1 305
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 61,765评论 1 257
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 95,393评论 0 213
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 41,312评论 0 183
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 49,108评论 1 260
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 38,923评论 1 178
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 30,527评论 2 274
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,280评论 0 168
  • 想象着我的养父在大火中拼命挣扎,窒息,最后皮肤化为焦炭。我心中就已经是抑制不住地欢快,这就叫做以其人之道,还治其人...
    爱写小说的胖达阅读 29,155评论 6 235
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 32,640评论 0 214
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,391评论 2 216
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 30,744评论 1 231
  • 白月光回国,霸总把我这个替身辞退。还一脸阴沉的警告我。[不要出现在思思面前, 不然我有一百种方法让你生不如死。]我...
    爱写小说的胖达阅读 24,292评论 0 32
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,198评论 2 213
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 31,654评论 3 211
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,655评论 0 9
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,070评论 0 169
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 33,654评论 2 233
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 33,800评论 2 237

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,600评论 1 92
  • 十九大上,教育部部长陈宝生表示,到2020年,我国将全面建立起新的高考制度。其实我们已经了解到高考要改革了,但是怎...
    江苏家学宝阅读 635评论 1 2
  • 我就是我,无需为别人做出改变,更无需在人前掩饰,我就是我。 可以欣赏我,可以讨厌我,我都不理会。我就是我。 活的舒...
    陆思恩阅读 82评论 0 2
  • 我是黄菲菲今天听了芳老师的课,很受用、自己需要改进的地方太多了。 今天宝贝睡懒觉睡到十点才起床的,起...
    fab黄菲菲阅读 180评论 0 0
  • 真正懂得 生活的 人,会知道的 柴米油盐酱醋茶 真实的,烟火 幸福,琴棋书画诗酒花 只可以 怡情养性
    昊水长天阅读 156评论 0 4