作者：陈大鱼头github：KRISACHANHTML的诞生HTML是怎么来的？1982年，万维网的发明者蒂姆·伯纳斯-李爵士创建了HTML（超文本标记语言），以便让全世界的物理学家能够方便地协作和共享信息。1991年3月，TimBerners-Lee向他在CERN（欧洲核研究中心）工作的朋友们介绍了HTML，当时世界各地的成员都使用Web浏览器来浏览CERN庞大的电话簿。然后，八年后的1990年，博士发明了世界上第一个浏览器WorldWideWeb，推动了互联网的飞速发展。1993年WorldWideWeb问世后，NCSA推出Mosaic浏览器并迅速流行起来，成为世界级应用的第一浏览器，推动了互联网的发展。然后就是当时的两大霸主，Netscapede网景浏览器和微软的InternetExplorer浏览器。这两款浏览器在当时掀起了互联网浏览器大战。这场战争的结果以InternetExplorer获胜而告终。但也极大地推动了互联网的发展。CSS的诞生CSS是如何产生的？在搭载HTML的浏览器飞速发展的20世纪90年代，CSS（CascadingStyleSheet）也应运而生。不同的浏览器结合自己的HTML语法结构，实现了很多不同的外部样式语法。但是随着HTML的发展，加入了很多显示功能来满足设计者的要求。随着这些功能的增加，外部样式语法的作用变得越来越没有意义。1994年10月10日，CSS之父H?konWiumLie提出了CSS的初步提案，并在芝加哥的一次会议上正式提出了HTML样式的CSS。1996年12月，W3C经过多方讨论推出了CSS1.0。这个规范一出现就引起了各方的关注，随后微软和Netscape都表示他们的浏览器可以支持CSS1.0。CSS各版本CSS各版本的更新CSS1.0于1997年由W3C发布，第一个版本主要规定了选择器、样式属性、伪类/对象几大部分；CSS2.0/2.1于1998年由W3C发布，CSS2规范是在CSS1的基础上设计的，并扩展和改进了许多更强大的属性。包括选择器、位置模型、布局、表格样式、媒体类型、伪类和光标样式；由于CSS2用了9年时间（从2002年8月到2011年6月）达到Recommendation（推荐）状态，此后W3C为了加快那些已经确认没有问题的特性的标准化，做出了一个叫做北京主义的决定来模块化CSS，根据每个模块的进度进行标准化。所以从形式上讲，CSS3已经不存在了。CSS现在包括修订后的CSS2.1及其扩展模块，模块层数不一致。可以在每个时间点为CSS标准定义一个快照。下图展示了CSS模块化的发展过程。它来自MDN，几乎成为了CSS的语言。现在的CSS也经过一番挣扎才脱颖而出。在浏览器1.0发布之前，现有的浏览器已经开始独立处理HTML，但是它们并没有办法自定义标签的样式，也就是说你看到的标签就是它看起来的样子，不能变了。于是在1993年6月，RobertRaisch向www-talkmail发送了一份提案，希望创建“一种易于解析的格式，可以为Web文档提供样式信息”，并将其命名为RRP。格式如下：`@BODYfo(fa=he,si=18)`看不懂上面的代码也无可厚非。在gzip之前的时代，网络传输速度只有14.4K，所以尽量压缩格式是合理的。此特定规则是将字体系列(fa)设置为helvetica(he)，将字体大小(si)设置为18磅。Viola和原始浏览器之战与流行的看法相反，Mosaic并不是第一个图形浏览器，ViolaWWW才是。魏培元用4天时间写的。这是Pei-YuanWei创建的样式表语言：(BODYfontSize=normalBGColor=whiteFGColor=black(H1fontSize=largestBGColor=redFGColor=white))在这个例子中我们添加了一个颜色选择器到主体，并添加样式到正文中的h1。值得一提的是，PWP也是引用外部样式表方法的作者，他提出的方法一直沿用至今。不幸的是，ViolaWWW只能在XWindow系统上运行，该系统仅在Unix中流行。在Mosaic移植到Windows后不久，ViolaWWW就被抛在了后面。Web出现之前的样式表早在Internet出现之前，就存在对文档样式进行修改的语言要求。如您所知，HTML起源于一种在Internet出现之前就存在的语言，SGML。早在1987年，美国国防部就决定研究SGML是否可以使文件存储和传输更方便，他们有大量的文件需要处理。就像任何好的政府项目一样，他们没有时间浪费时间命名它。这个团队最初称为计算机辅助后勤支持团队，后来称为计算机辅助采购和后勤支持团队，最后称为持续采购和生命周期支持计划。不管怎样，缩写是CALS。CALS为SGML创建了一种语言，叫做FOSI（这是一个四字的缩写，但是因为年代久远，不知道是哪四个字）语言来给文档添加样式。示例：如果你感到困惑关于docdescorcharlist，那么你要知道www-talk的成员和你有同样的困惑。唯一提供上下文信息的是e-i-c，上下文中的元素。FOSI以引入em作为字体单位而著称，现在这已成为许多熟悉CSS的人中更流行的方法。图灵完备样式表由于其复杂性，FOSI被认为是解决文档格式问题的临时解决方案。长期的解决方案是创建一种基于函数式编程语言Scheme的新语言，它可以做任何你能想象到的文档转换。这种语言称为DSSSL。语法如下：(elementH1(makeparagraphfont-size:14ptfont-weight:'bold'))因为它是一种编程语言，所以你可以让它发挥作用：(define(create-headingheading-font-size)(makeparagraphfont-size:heading-font-sizefont-weight:'bold))(elementh1(create-heading24pt))(elementh2(create-heading18pt))并在样式中使用数学结构，例如"Striped"tablerows:(elementTR(if(=(modulo(child-number)2)0)...;even-row...));odd-row最后，为了让你嫉妒，DSSSL可以转换inheritedValues被视为数学变量：(elementH1(makeparagraphfont-size:(+4pt(inherited-font-size))))不幸的是，DSSSL与所有Scheme-like语言有相同的致命弱点：括号太多了。此外，当它最终发布时，它可能会如此完整以至于吓到浏览器开发人员。DSSSL规范包含210多个可以设置样式的独立属性。为什么样式表脱颖而出？CSS没有父选择器（一种根据子元素的样式来设置父元素样式的方法）。这个问题在StackOverflow上经常被问到（这是其中之一）。但事实证明，缺少此功能是有原因的。特别是在互联网的早期，在网页完全加载之前呈现网页非常重要。这意味着大家都希望加载的部分能够在HTML加载之前渲染出来。父选择器意味着样式必须在加载HTML文档时更新。如果像DSSSL这样的语言实现了这个特性，既然可以对文档进行操作，不可用的可能性不大。1995年3月，BertBos第一个提出这个问题，并给出了一个可能的解决方案。他的提议中还包括一个早期的笑脸包:-)。语言有点像面向对象：*LI.prebreak:0.5*LI.postbreak:0.5*OL.LI.label:1*OL*OL.LI.label:A使用.指定直系子节点，*指定祖先节点。他的语言的另一个很酷的特性是超链接在样式表中定义如下：*A.anchor:!HREF在上面的示例中，链接的目标被指定为它的HREF值。像这个可控链接这样的元素的行为在许多提案中都很流行。在Javascript出来之前，没有办法控制元素，所以看起来很合理。功能性提案，1994年由一位名叫C.M.Sperberg-McQueen，包含类似的行为。(stylea(block#f);formatasinlinephrase(colorblue);inblueifyou'vegotit(click(follow(attval'href)));andonclick,followurlHislanguagealsointroduced内容关键字是作为控制样式表中HTML元素内容的一种方式而引入的，这个概念后来在CSS2.1中引入。在我谈到真正成为CSS的语言之前，可能还有另一种语言值得一提，因为它对某些人来说扩展了早期Web开发者的梦想，它就是PSL96，按照当年的命名约定，PresentationSpecificationLanguage的1996版。PSL的核心和CSS非常相似：H1{fontSize:20;}不过，它这很快就会变得有趣。例如，您不仅可以根据元素的宽度来渲染元素的位置，还可以根据浏览器的实际宽度来渲染。LI{VertPos:Top=LeftSib.ActualBottom;}即使你可以使用元素左边的Siblings来自定义，也可以添加log样式的ical表达式。例如，只设置带有href的锚元素的样式：下划线编号=1;endif}这种风格可以扩展到我们今天所拥有的各种用风格完成的事情：LI{if(ChildNum(Self)==round(NumChildren(Parent)/2+1))thenVertPos:Top=Parent.Top;HorizPos：Left=LeftSib.Left+Self。宽度;elseVertPos:Top=LeftSib.ActualBottom;HorizPos:Left=LeftSib.Left;endif}如果支持这个功能，内容和样式分离的梦想或许真的可以实现。不幸的是，这种语言的可扩展性太强，这意味着没有浏览器的实现可能会有所不同。此外，它作为系列文章出现在学术界，并没有在www-talk邮件列表中讨论，因此它永远不会出现在主要浏览器中。CSS的灵魂是一门语言，至少从名字上看，它直接引向了CSS。它被称为CHSS（层叠HTML样式表），该提案由H?konWLie于1994年提出。与许多好主意一样，这个最初的提案很疯狂。h1.font.size=24pt100%h2.font.size=20pt40%注意行尾的百分比，这个百分比指的是当前样式表所占值的“权重”。例如，如果之前的样式表将h2字体大小定义为30pt和60%，而此样式表将h2s设置为20px40%，这两个值将根据它们的权重百分比合并，大致为26pt。显然，这个提议是在基于文档的HTML页面时代，基于拖鞋的设计在我们面向应用程序的世界中是行不通的。然而，它已经有了样式表应该是可堆叠的基本思想。换句话说，应该可以将多个样式表应用于同一页面。它的原始形式被认为很重要，因为它让用户可以控制他们所看到的内容。页面有一个样式表，网络用户将有自己的样式表，两者一起呈现在页面上。支持多个样式表被视为保护网络个人自由的一种方式，而不是一种支持开发人员（他们仍然手工编写单独的HTML页面）的方式。用户可以控制页面作者建议的权重，就像建议中的ASCII图一样。UserAuthorFonto-----x------------o64%Coloro-x----------------o90%Margino--------------x--------o37%音量o--------x------------o50%喜欢喜欢许多这样的提案，它包含了CSS几十年来不可能实现的功能。例如，可以根据用户的环境编写逻辑表达式。年龄>3d?background.color=pale_yellow:background.color=whiteDISPLAY_HEIGHT>30cm?http://NYT.com/style:http://LeMonde.fr/style在一个比较乐观的未来场景中，浏览器会根据给定内容与您的相关性做出响应，它允许它显示给您更大的尺寸。相关性>80?h1.font.size*=1.5你知道接下来会发生什么H?konLie继续简化他的提案，并与BertBos合作，于1996年11月发布了CSS规范的第一个版本。他最终为他的博士论文创建了CSS，这份文件帮助我写了这篇文章。与许多其他提案相比，CSS的一个显着事实是它的简单性。它易于分析、易于编写和阅读。与Internet历史上的许多其他示例一样，需要的是最适合初学者的技术，而不是更强大的专业人士的技术。它本身就在提醒人们，这是一项偶然发生的创新。例如，添加对上下文选择器(bodyolli)的支持只是因为Netscape已经有一种方法可以从超链接图像中删除边框，而且似乎有必要实现流行浏览器可以做的所有事情。仅此功能就大大减慢了CSS的执行速度，因为大多数浏览器在解析HTML时不会保留标签“堆栈”。这意味着必须重新设计解析器才能完全支持CSS。像这样的挑战（以及非标准HTML标签的广泛使用来定义样式）使CSS直到1997年才被使用，直到2000年3月才有浏览器完全支持它。就像每个开发人员都会告诉你的那样，浏览器只是在最近几年，距离CSS首次发布已经21年（原文如此，15年）。最后，BOSSIE3以（有点可怕的）CSS支持而著称。为了竞争，Netscape4还考虑了CSS。但它仍然决定通过将CSS转换为JavaScript并执行它而不是第三方（想想HTML和JavaScript）来做到这一点。更重要的是，Web开发人员应该可以使用这种“JavaScript样式表”中间语言。语法是直接使用JavaScript，然后添加一些特定于样式的API：tags.H1.color="blue";tags.p.fontSize="14pt";with(tags.H3){color="green";}classes.punk.all.color="#00FF00"ids.z098y.letterSpacing="0.3em"你甚至可以定义一个在每次遇到标签时执行的函数：evaluate_style(){if(color=="red"){fontStyle="斜体";}else{fontWeight="粗体";}}tag.UL.apply=evaluate_style();我们应该简化样式和脚本之间的分界线的想法是合理的，并且仍在React社区中出现各种类似的想法。当时，JavaScript本身是一种非常新的语言，但是通过一些逆向工程，IE在IE3中添加了对它的支持（如“JScript”）。更大的问题是社区已经团结在CSS周围，此时Netscape被大多数标准社区视为恶霸。当Netscape确实将JSSS提交给标准委员会时，它被置若罔闻。三年后，Netscape6放弃了对JSSS的支持并自我安乐死。由于W3C的一些公开羞辱，IE5.5还能在2000年推出几乎完整的CSS1支持。当然，我们现在所知道的浏览器CSS在未来10年内将变得粗糙且难以使用。幸运的是，今天情况已经有了很大的改善，让开发者编写出可以在不同浏览器中运行的代码的梦想已经（几乎）实现了。我个人的结论是，这些决定是拍大腿还是刻意，决定了现在的工具形态。如果CSS的设计方式能够满足1996年的限制，那么20年后我们的做法应该会有所不同。参考资料：CSS之父访谈基于CSS3的下一代Web应用开发，上篇差点成为CSS的语言CSS3（MDN）【HelloCSS】系列【HelloCSS】是以CSS基础为主题的系列文章概念，旨在帮助大家更深入地了解CSS，提高CSS在开发者心目中的地位。由于本人鱼头水平有限，文笔水平有限，如果您发现文章中有不合理或不正确的地方，欢迎指出。我将不胜感激；如果您通过文章有什么想法或疑问，希望您能积极留言，我们共同探讨；如果你通过这一系列的文章有所收获，这会让鱼头大喜过望！如果你也喜欢CSS，喜欢讨论技术，或者对本文或本系列有什么意见或建议，非常欢迎你加鱼头微信好友一起讨论。当然，鱼头也希望和大家聊聊生活和爱好。谈论一切。鱼头微信公众号是：krisChans95，也可以扫描二维码加好友，备注“顺丰”即可
