首页 > 评论 > 关键词 > CSS最新资讯 > 正文

CSS 二十年发展简史

2019-06-26 15:17 · 稿源:CSDN公众号

病毒、代码 (4)

声明:本文来自于微信公众号CSDN(ID:CSDNnews),作者:夏之安然,授权站长之家转载发布。

在 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 之父哈肯·维姆·莱(Håkon 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 年,Håkon 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和解决方案(图片来自飘零雾雨 CSS 参考手册)

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

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

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

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

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

只需要使用一个额外的 <div> 标签

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

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

2016 年,Chrome 浏览器占据全球浏览器排行榜首位。随着 Hybrid、React Native 等技术的兴起,互联网进入移动端时代,前端工程师开始新的挑战,忙碌于适配各种端。

我回首自己做前端开发的这十年来,记得印象最深刻是,电脑中安装的浏览器软件是最多的,IE家族、遨游、QQ、360、Chrome 浏览器等。

我一般写完一个项目后,自己先在所有浏览器跑一遍 CSS 的兼容性测试,直到所有浏览器没有大问题才能进行项目提测发布。也正是有这样的严谨的工作态度,使我在工作中也在不断进步。有时候,回过头想想有过这样的经历也是一种技术财富的积累。

结语

CSS 经历了 20 多年的发展,从 PC 端到移动端,在前端工程化不断进步的今天,随着CSS的规范不断的完善升级,前端业务复杂度越来越高,带来的工程也越来越庞大,我们前端开发者对 CSS 工程化的方案也不断地探索。

现在一大批 CSS 预处理和后处理工具涌现,比较流行的 CSS 预处理器有 Sass、Less,CSS 后处理器诸如 clean-css、AutoPrefixer、Rework、PostCSS 等。

那么关于 CSS 将来发展会怎么样?未来 CSS 还能不能胜任自己的角色,会不会有新的模型代替它?对于这些问题,Håkon Wium Lie 认为 CSS 目前还能够胜任,还没有看到能够取代它的新模型出现,新的技术肯定会层出不穷,但应该是对 CSS 的扩展而不是代替。他还表示,我们今天写的 CSS 代码,500 年后的计算机仍然能看懂。

参考资料:

CSS 发展历史及新特性 A Look Back at the History of CSS CSS: It was twenty years ago today — an interview with Håkon Wium Lie

作者简介:夏之安然,目前就职于国内领先旅游行业互联网公司,十年前端开发老兵。对中后台管理系统有深入研究,在团队主导多个管理系统架构设计,并且研发多款效率工具。

  • 相关推荐
  • 大家在看
  • 清华大学研发类脑计算机 类脑计算是什么意思

    类脑计算是什么意思?据央视新闻报道,北京时间 10 月 14 日 23 点,清华大学计算机系张悠慧团队和精密仪器系施路平团队与合作者在《自然》(Nature)杂志发文,首次提出“类脑计算完备性”以及软硬件去耦合的类脑计算系统层次结构。目前,清华大学正在开发新型类脑计算机。

  • 研究人员找到了世界上现存最古老的计算机操作手册

    现存最古老的(数字)计算机名为“Zuse Z4”,创建于 1945 年,其大小占用了一个房间的大部分空间,需要几个人共同操作。目前,这台机器被安置在慕尼黑的德国博物馆,已经有很长一段时间没人使用它了。

  • 海云天计算机智能考试系统助力证券业从业人员资格考试圆满完成

    2020 年 9 月 12 日- 13 日,历时两天的 2020 年 9 月证券业从业人员资格考试圆满结束。国内领先的考试评价、教育测评及教育大数据公司,深圳市海云天科技股份有限公司为本次考试提供计算机智能考试技术服务,共计五万多考生、七万多科次,覆盖深圳、广州、南宁、武汉、长沙、南昌、赣州、杭州、宁波、温州、福州、厦门、泉州、贵阳、成都、拉萨、银川、呼和浩特、西宁等 19 个考区,有力保障了考试的公平性、权威性和先进性,为国

  • Caviar展示基于Apple I计算机设计风格的iPhone12 Pro改装方案

    ​虽然苹果已经推迟了 iPhone 12 系列 5G 智能机的新品发布,但这并不妨碍外界继续对其展开大胆的构想。有趣的是,知名高端改装品牌 Caviar,竟然想到了借鉴 40 年前的 Apple I 计算机的设计风格,来为 iPhone 12 Pro(Max)打造个性化外形的新创意。

  • 欧盟委员会拟投80亿欧元开发下一代超级计算机

    9月22日消息,据国外媒体报道,欧盟委员会提议在未来13年内投资80亿欧元(合94亿美元),用于开发下一代超级计算机。目前,超级计算已被确定为欧洲的战略投资重点,它将支撑包括大数据分析、人工智能(AI)、云技术和网络安全在内的整个数字战略。此外,在同时通过的一项建议书中,欧盟委员会呼吁会员国加快建立超高速网络连接,并联合推进5G技术。据悉,欧洲处理器计划(European Processor Initiative,简称EPI)正?

  • 原神语言交流Odomu成就任务攻略 丘丘人语言交流怎么触发

    ​原神中是有一个语言交流的成就可以完成,叫做“...odomu”,成就的需求是在语言交流中与丘丘人交谈成功,很多玩家还不清楚这个语言交流的任务怎么做,下面就来为大家详细的介绍一下。

  • 云安全日报200929:云计算热门语言Python发现注入漏洞,需要尽快升级

    Python是一种跨平台的计算机程序设计语言。它结合了解释性、编译性、互动性和面向对象的诸多特性,最初设计用于编写自动化脚本,然而随着版本的不断更新和语言新功能的添加,越多被用于独立的、大型项目的开发。近些年,Python尤其在云计算,人工智能(AI)领域,应用十分广泛。不过最近Python爆出了比较严重的注入漏洞,需要尽快升级。以下是漏洞详情:漏洞详情CVE ID: CVE-2020-26116 CVSS评分: 5.0 中Python http.client(Pytho

  • 当美食成为社交语言,品牌可以擦出火花么?

    十一期间,国内旅游超6亿人次,如此海量的人群跨越山水,去往不同的城市和地域,把所见所闻的体验,又全部生成海量的社交内容。据抖音发布的「2020国庆中秋假期数据报告」显示,上海问鼎今年抖音热门旅游城市榜首,相关的旅游视频点赞数超4515万,累计播放次数超14.5亿,重庆和深圳分别位列二三。除此外还有新上榜的黑马城市苏州和东莞。两个城市相关的旅游视频点赞量也分别高达2761万和1784万,播放量分别突破10亿和6亿。可见每一

  • 中国听力语言康复研究中心联合北大医疗脑健康开展《儿童言语语言治疗师专业技能培训》

    语言康复行业发展的关键标志之一,就是言语治疗师数量与专业化水平的提升。为共同推进国内语言康复专业人员的在职培训,近期,中国听力语言康复研究中心(简称:中语康)联合北大医疗脑健康开展了关于儿童言语语言治疗师的专业技能培训,旨在借助双方专业力量,夯实语言康复的专业建设,探讨并建立国内言语治疗师的认证和考核标准。我国言语治疗师人才极度匮乏。近年来,我国言语障碍患者数量日趋增长。据今年国际聋人日发布的数据

  • 十年后可能消失的五种编程语言

    随着时间的流逝,程序员们发现了更新、更简单的工作方式,新的编程语言如雨后春笋般出现,但只有少数编程语言能成为社区的新宠。这种进步的一个副作用是一些古老的编程语言必然会跟历史一样被人们遗忘。如果一个编程语言无法随着时间的推移提升其价值,那么它的用户群终将会流失,并逐渐淡出人们的视线,或者成为更新一代编程语言的基础。

  • Google宣布了新的云功能:更多的语言支持、增强安全性等

    谷歌在其云平台上提供的功能即服务(FaaS)是云功能,允许开发者构建与第三方服务和api或物联网后端集成的无服务器解决方案。最近,这家公共云供应商宣布了一些云功能的新功能,如更多的语言支持、改进的开发体验、每个功能标识的增强安全性以及更多地区的可用性。谷歌在2018年的下一届云大会上宣布,自其全面可用以来,谷歌继续通过新的更新来增强云功能。这些更新包括对Java、Go、Node.js、还有python。现在,公司进一步扩展了?

  • 为什么Java、Python会成为程序员最害怕的编程语言?

    最不受欢迎 / 最令人畏惧的编程语言有哪些?这些编程语言为什么令人畏惧?对它们的评价是否公正?在 StackOverflow 的 2020 年度开发者调查中,有一张表格,显示的是“最受欢迎、最令人畏惧和最想要的编程语言”。最受欢迎的和最想要的编程语言,嗯,是有点无聊。倒是那个最令人畏惧的就有意思多了。正如托尔斯泰(Tolstoy)所说的:“幸福的家庭都是相似的,而不幸的家庭则各有各的不幸。”

  • 华为方舟编译器正式支持C语言:完全开源

    2019年8月底,华为方舟编译器(OpenArkCompiler)正式开源,迈出了跨越性的一步。一年多来,方舟编程体系陆续实现了编译器、引擎、调试器的开源,其中编译器的重点功能主要集中在Java应用程序静

  • 国际高性能计算和人工智能咨询委员会全力打造以数据为中心的计算生态

    网络计算成为HPC China热门话题2020 年 9 月 28 日, 国际高性能计算和人工智能咨询委员会(HPC-AI Advisory Council)第 12 届中国年会,暨中国HPC大会(HPC China)大会分论坛 — 面向高性能HPC和AI云的新一代计算技术,向广大听众和观众介绍了当前最热门的两大计算技术,以数据为中心的计算技术和网络计算(In-Network Computing)技术,这和本次HPC China大会的主题不谋而合,展示出了提升计算性能和能力、提高处理数据的效率,成为?

  • Python有望超越Java排第二?风变编程解析编程语言新趋势

    随着人工智能时代的来临,编程语言的热度居高不下,随着智能机器人的出现,在2020年更是迎来一波新的高峰。在这样的大环境下,关于谁是人工智能最流行编程语言的讨论也十分热烈,C、C++、Java、Python等编程语言不断被拿出来做比较。那么接下来,风变编程来解析一波当下编程语言的新趋势。Python受欢迎度有望超越Java?近日,TIOBE编程语言社区公布了2020年10月编程语言排行榜。榜单数据显示,Python的受欢迎程度十分逼近排在第二?

  • 和平精英ss11赛季什么时候开始 ss11赛季具体上线日期时间

    和平精英目前还是在SS10赛季中,但是不少玩家已经在期待下一个SS11赛季了,很多玩家还不清楚S11赛季什么时候开始,下面就来为大家详细的介绍一下。

  • 宝德鲲鹏携手并进,谱写计算产业新篇章

    当前,数字化大潮正在重塑全球经济格局,与此同时,不同的产业发展阶段对计算能力和IT基础架构提出了不同的挑战和需求,一场前所未有的计算革命正席卷而来,未来也将改变千行百业。多样化计算时代的新机遇随着以5G、人工智能、大数据中心、工业互联网等为代表的“新基建”快速落地,应用呈现场景化和多样化趋势,传统的单一架构捉襟见肘,计算架构多样性发展成为必然。具体而言,应用场景的多样性,以及数据的多样化决定了,没有哪

  • 谷歌与诺基亚达成五年云计算协议

    Google Cloud周三宣布已与诺基亚达成了为期五年的云计算协议。作为交易的一部分,诺基亚将其现场IT基础架构(包括数据中心和服务器)迁移到Google Cloud基础架构。两家公司均未透露交易条款。诺基亚的基础架构将在公共云中运行,并且诺基亚向云的迁移已经开始。迁移所有诺基亚现有服务器预计将需要24个月的时间。通过这笔交易,谷歌为其不断增长的客户群增加了另一个全球公认的品牌,这些客户还包括沃尔玛,汇丰,贝宝

  • 外媒:高盛已与云计算公司Snowflake续签合同

    10月13日消息,据国外媒体报道,此前,在今年7月份,云计算公司Snowflake与高盛签署了一项价值数百万美元的合同。如今,高盛已与Snowflake续签合同。 Snowflake成立于2012年,总部位于加州圣马特奥。最近一个财季,该公司的营收达到了1.33亿美元,同比增长121%。今年9月中旬,该公司在纽约证券交易所挂牌上市,成为2020年规模最大的IPO,而高盛是此次IPO的主要承销商之一。该公司此次IPO共发行了2800万股股票,发行价?

  • 原神如何搭配圣遗物最大化收益 圣遗物属性收益计算攻略

    原神中圣遗物的选择至关重要,圣遗物算是大幅度提升人物属性的最好途径,那么圣遗物要怎么搭配才能使得人物属性的收益最大化呢?下面就来为大家分享一下攻略。

  • 参与评论
文明上网理性发言,请遵守新闻评论服务协议
  • 热门标签