CSS 二十年发展简史

2016-08-19    分类: 网站建设

在2019年的今天,我们能在网上看到炫酷的动画加载,精彩绝伦的交互效果,以及从 PC 端到移动端的响应式交互,大家觉得习以为常。可你不知道的是,在 20 多年前,网页仅仅提供了文档展示能力,没有装饰的它就像一张黑白报纸那样简陋。

你是否会问:网页是如何变成像今天这样精美的?

这就归功于 CSS 了。

CSS 的诞生

20 世纪 90 年代蒂姆·伯纳斯·李(Tim Berners-Lee)发明万维网,创造 HTML 超文本标记语言。此后网页样式便以各种形式存在,不同的浏览器有自己的样式语言来控制页面的效果,因为最原始的 Web 版本中根本没有提供一种网页装饰的方法。

ViolaWWW浏览器中的网页

在HTML迅猛发展的 90 年代,不同的浏览器根据自身的 HTML 语法结构来支持实现不同的样式语言。在最初的 HTML 版本中,由于只含有很少的显示属性,所以用户可以自己决定显示页面的方式。

但随着 HTML 的发展,HTML 增加了很多功能,代码也越来越臃肿,HTML 就变得越来越乱。网页也失去了语义化,维护代码很艰难,因为代码很混乱:

于是装饰网页样式的 CSS(层叠样式表,Cascading Style Sheets)诞生了。

语法的确定

早期 CSS 的语法设计看上去类似后来的 JavaScript 语法(当时 JavaScript 尚未存在),实际上,CSS 的这个写法借鉴了 X11 Window System 中的 X 资源。

早期CSS语法提案

在第一稿建议中,有一个影响百分比的说明符:h1.font.size = 20pt 80%。

行尾百分比的作用是想要通过这个百分比来控制该值的权重,如字号设置为 20pt,权重设置 80%,最终将字号值与权重组合在一起,值为 16pt。

这个写法的设计初衷是想将开发者与用户的要求与偏好组合到一起,CSS 之父哈肯·维姆·莱(Hkon Wium Lie) 提议 CSS 应该有一把滑尺,这样开发者与用户都有完全的控制力。当时这个提议引起了大家的讨论,但由于这个办法对如 font-size 等属性管用,但对另一些属性如 font-family 就不好用了,所以最终这个百分比的用法还是被舍弃了。

至于 CSS 的语法由 font.size 改成font-size,是怎么设计来的呢?首先,连字符读起来更像书面英语,简单易懂。其次,DSSSL(Document Style Semanticsand Specification Language,文档样式语义和规范语言) 和 DSSSL-Lite就使用这种连字符属性名。于是,CSS 也从中借鉴了连字符。

经过多年的努力 ,到1996年底,最终CSS语法变成了现在这个样子:

当前CSS语法

CSS 历史大事记

1994 年,Hkon Wium Lie 最初提出了 CSS 的想法,联合当时正在设计 Argo 的浏览器的Bert Bos,他们决定一起合作设计 CSS,于是创造了 CSS 的最初版本。

紧接着,他们在芝加哥的Mosaic and the Web 大会上第一次正式提出了 CSS 的建议,1995 年他们一起再次展示了这个建议。当时 W3C 刚刚建立,W3C 对 CSS 很感兴趣,为此专门组织了一次讨论会。

1996 年 12 月,W3C 推出了 CSS 规范的第一版本。

1997 年,W3C 颁布 CSS1.0 版本 ,CSS1.0 较全面地规定了文档的显示样式,可分为选择器、样式属性、伪类 / 对象几个部分。

这一规范立即引起了各方的关注,随即微软和网景公司的浏览器均能支持 CSS1.0,这为 CSS 的发展奠定了基础。

1998 年,W3C 发布了 CSS 的第二个版本,目前的主流浏览器都采用这标准。

CSS2 的规范是基于 CSS1 设计的,包含了 CSS1 所有的功能,并扩充和改进了很多更加强大的属性。包括选择器、位置模型、布局、表格样式、媒体类型、伪类、光标样式。

2005 年 12 月,W3C 开始 CSS3 标准的制定,到目前为止该标准还没有最终定稿。

IE6,前端工程师的痛

2001 年,微软发布了 IE6,在 Windows 普及的年代 IE6 浏览器占据了高达 80% 的市场,这对 CSS 的标准推广起着重要作用。

因为 IE6 的用户量大,开发者们就选择了以大众为准,许多开发者竭尽全力把 IE6 下的页面做好,甚至一些开发者的口号很响“Only IE6”。

这样导致许多页面根本不是 W3C 标准,因为 IE6 有一套自己的解析渲染体系。最终 IE6 的庞大市场最终成为了 Web 开发者的一大绊脚石。

作为当时的开发者,必须掌握的一系列浏览器 Hacks,网页开发和面试必备。印象中当时经典的 Bug是“江湖匪号:一只猪的故事”。

IE6 Hacks和解决方案

如今我们在当下高级浏览器中实现一个圆角按钮是很简单的事,但在当时不支持 CSS3 属性的浏览器(IE6/7/8)中还得通过图片背景切图方法实现,如果按钮的长度不确定的话,还得实现按钮自适应长度,这也是考验前端工程师的 CSS 使用技巧和磨练我们的耐性。

那些年我们前端工程师的收藏夹不仅收藏 CSS Hacks,还会收藏各种布局攻略,如圣杯布局,也叫双飞翼布局,就是实现一个两侧宽度固定,中间宽度自适应的三栏布局,实现这些布局需要各种技巧和攻略。当时大牛们总结出的一些要点:

两侧宽度固定,中间宽度自适应

中间部分在 DOM 结构上优先,以便先行渲染

允许三列中的任意一列成为高列

只需要使用一个额外的

标签

就这样,我们前端开发者练就了一身黑技能,直到微软发布 IE6 死亡倒计时。最先开始放弃 IE6 支持的是一线互联网大公司,如淘宝等,直到 2014 后,大家逐渐放弃了对 IE6 的支持,这简直是对前端工程师大的福音。

随着 IE6 退出市场,2014年,微软发布 IE10 版本。

本文题目:CSS 二十年发展简史
分享网址:https://www.cdcxhl.com/news/45747.html

成都网站建设公司_创新互联,为您提供做网站云服务器网站改版企业网站制作定制网站网站排名

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联