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 结构上优先,以便先行渲染
允许三列中的任意一列成为高列
只需要使用一个额外的 <div> 标签
就这样,我们前端开发者练就了一身黑技能,直到微软发布 IE6 死亡倒计时。最先开始放弃 IE6 支持的是一线互联网大公司,如淘宝等,直到 2014 后,大家逐渐放弃了对 IE6 的支持,这简直是对前端工程师大的福音。
随着 IE6 退出市场,2014年,微软发布 IE10 版本。
文章题目:CSS 二十年发展简史
标题URL:https://www.cdcxhl.com/news47/45747.html
成都网站建设公司_创新互联,为您提供静态网站、用户体验、搜索引擎优化、网页设计公司、手机网站建设、动态网站
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联
猜你还喜欢下面的内容