Get best of the week

新旧CSS。网页设计历史

在90年代后期，我开始对Web设计和开发感兴趣。该死的，多久以前。而且那是多么可怕。我的意思是，创建一个网站并发布它是一项棘手的业务，并且可以指望客户。

在我看来，大多数开发人员都记得那些日子，或者至少是下一个十年，但没有。最近，我遇到了一条推文，其作者对在出现之前设置圆角的技术感到惊讶border-radius（为每个圆角单独绘制图片并精确定位）。我仍然记得当它border-radius成为标准并从浏览器中删除前缀时，我们如何屏息等待。

另一方面，许多人在过去只对Web设计进行过一些尝试，并认为此后没有任何变化。

本文适合所有人。我记得CSS和Web设计的历史。

（请记住，本文中的记忆和研究紧密相关。因此，我不能保证所有内容都正确设置，尤其是在因果关系方面。您可以从W3C阅读CSS的官方历史，该历史要短得多，匹配性更好现实，并且包含更少的诅咒）。

（此外，从更多插图中可以极大地受益于这篇文章，但是仅仅写文字花了我太多时间）。

头几天


一开始没有CSS。

非常糟糕。

我当时最喜欢的艺术品是O'Reilly的书，我研究了HTML：权威指南。该指南的多个版本在90年代中期和后期出版。这本书实际上只谈论HTML，根本没有提到CSS。我已经没有了，也无法在Internet上找到扫描结果，但是本书的新版本中有一个页面HTML＆XHTML：权威指南（我们稍后将讨论XHTML）。以下是90年代最先进的网页设计技巧：


“用水平线清楚地突出显示页眉和页脚。”

不，不是这样border-top。那<hr>。页面标题几乎可以肯定以居中<center>。

该页面具有标准的背景，字体和文本颜色。在一定程度上是因为本指南首先介绍了初始概念。一方面是因为它是一本黑白书，另一方面是因为它反映了现实-为页面上的某些东西着色是巨大的痔疮。

假设您要将所有标头设为红色。为此，请放置以下标签：

<H1><FONT COLOR=red>...</FONT></H1>

... 每个标题。希望您永远不要决定切换为蓝色！

哦，HTML标签是用大写字母自定义写的。我不记得为什么我们都认为这是个好主意。也许这是在语法突出显示出现在文本编辑器中之前（我12岁，使用记事本），并且标题标签更容易与主要文本区分开。

因此，维护站点是一个真正的噩梦。许多人认为不使用任何设计（仅使用默认设置）会更容易。从某种意义上说，它甚至还不错：浏览器允许您更改这些默认值，因此您可以按所需的形式在Internet上阅读文本。

我记得许多Geocities网站上出现了一种有趣的替代解决方案：每个新网页的外观都焕然一新。该死的吧？只需在每个新页面上执行您想要的操作即可。

也许这就是网页设计的顶峰。

地狱，我想念那些日子。完全开放的网络，没有推特，没有Facebook。如果您有话要说，则应该创建自己的网站。这是真棒。没有人知道他在做什么。我敢打赌，当时绝大多数的网页设计师都是无知的业余青少年（像我一样），他们从其他无知的业余青少年那里复制页面。互联网的一半是由粉丝制作的有关animorphs的门户网站，带有莫名其妙的警告屏幕，该网站的屏幕分辨率为640x480（该屏幕分辨率不足的每个12岁青少年都应该购买一台新显示器），该网站效果最好。所有帅哥都使用Internet Explorer 3（最先进的浏览器）。但是，有些失败者仍然坐在Netscape Navigator中，因此在主页上，您需要将动画GIF放置为“ Best in IE”。

也是“互联网安全颜色”的时代-216种颜色的调色板，其中每个通道均等于00，33，66，99，cc或者ff，因为有些仍保持256色的显示器！今天，我们不再考虑它，而是理所当然地使用了24位颜色。

实际上，我们现在认为理所当然的许多事情都是难以理解和困难的。想要在网站的每个页面上进行相同的导航吗？好的，没问题：在每个页面上复制/粘贴导航代码。如果更新此代码，请确保刷新每个页面-但很可能您会忘记在某些页面上执行此操作，并且该站点看起来像是一个考古站点，具有来自不同“时代”的几层页面。

使用框架要容易得多。当浏览器窗口分成网格并在每个单元格中加载一个单独的页面时...但是如果人们进入没有框架的单独页面，人们就会感到困惑，就像来自AltaVista这样的搜索引擎的情况通常一样（我不敢相信我解释了帧，但是自2001年以来没有人真正使用过它们……您知道iframe是什么吗？这里的字母“ i”表示inline，即内置帧，用于将它们与整个屏幕上的常规帧区分开。

PHP甚至还没有得到这个名字，也没有人听说过。 Perl和CGI的这种奇怪组合真的很难理解，并且无法在您自己的计算机上运行，​​很难发现和诊断错误，而Geocities也不支持。如果您确实是个幸运和高级的开发人员，那么您的主机可以在Apache Web服务器上工作，然后可以使用其内置的动态汇编语言Server Side Includes编写如下内容：

<BODY>
    <TABLE WIDTH=100% BORDER=0 CELLSPACING=8 CELLPADDING=0>
        <TR>
            <TD COLSPAN=2>
                <!--#include virtual="/header.html" --> 
            </TD>
        </TR>
        <TR>
            <TD WIDTH=20%>
                <!--#include virtual="/navigation.html" --> 
            </TD>
            <TD>
                (actual page content goes here)
            </TD>
        </TR>
    </TABLE>
</BODY>

没关系。 Apache将看到特殊注释，并插入引用文件的内容。缺点是您无法检查计算机上的任何内容，所有导航都丢失了，因为您的网络浏览器在这里将这些说明解释为普通的HTML注释。当然，在家中安装Apache是​​不可能的，因为您有一台计算机，而不是一台服务器。

不幸的是，所有的旧址早已消失，并被历史的灰烬所掩盖，其中本周未完成的所有工作已经过时并被长期遗忘。网络本应使信息永生，但实际上，其中的许多信息都是短暂的。我想念那些几乎所有朋友都有自己网站的时代。您的Twitter和Instagram作为在线存在替代品很差。

...因此，让我们看一下Space Jam网站。


示例：Space Jam


如果您不知道，《太空果酱》是有史以来最伟大的电影。他谈到兔子Bugs Bunny的篮球生涯极其短暂，他与在世的迈克尔·乔丹（Michael Jordan）一起拯救了地球，使其免受外星人的某种威胁。然后是这部电影的一系列非常成功且极其有趣的续集。

而且，我们非常幸运的是，Space Jam网站启动24年后，它仍然可以正常运行！在这里和现在，我们有机会研究1996年模型的最佳Web设计成就。

首先，请注意该网站的每个页面都是静态的。这是一个带有扩展名的静态页面.htm，而不是.html因为在Windows 95之前，我们仍然绑定8.3文件名（名称八个字符，扩展三个字符）。我不知道为什么这在URL中很重要，因为没有人在Web服务器上运行Windows 3.11，但是可以。

这是主页的CSS：

<body bgcolor="#000000" background="img/bg_stars.gif" text="#ff0000" link="#ff4c4c" vlink="#ff4c4c" alink="#ff4c4c">

哈哈，我只是在开玩笑！到底是什么样的CSS？ “ Cosmic jam”发布于该标准发布的一个月之前（实际上，该页面的源代码中只有一行，但是我敢肯定，它的添加要晚得多，以使需要插入的规则的某些链接样式化，因为法律义务）。

注意用于导航的超链接的极其精确的位置。此壮举的实现方式与1996年每个人的实现方式相同：使用表格。

实际上，表在布局方面比CSS具有一个功能优势，这在当时非常重要，因为按下Ctrl可以选择一个单元格表，甚至几个。这样独特的“复古调试器”显示了单元格在布局中的位置。太好了，因为第一个普通的Firebug调试器仅在2006年才问世-整整十年！



出于某些未知原因，此表的标记用空白行填充，但是如果删除它们，它将看起来像这样：

<table width=500 border=0>
<TR>
<TD colspan=5 align=right valign=top>
</td></tr>
<tr>
<td colspan=2 align=right valign=middle>
<br>
<br>
<br>
<a href="cmp/pressbox/pressboxframes.html"><img src="img/p-pressbox.gif" height=56 width=131 alt="Press Box Shuttle" border=0></a>
</td>
<td align=center valign=middle>
<a href="cmp/jamcentral/jamcentralframes.html"><img src="img/p-jamcentral.gif" height=67 width=55 alt="Jam Central" border=0></a>
</td>
<td align=center valign=top>
<a href="cmp/bball/bballframes.html"><img src="img/p-bball.gif" height=62 width=62 alt="Planet B-Ball" border=0></a>
</td>
<td align=center valign=bottom>
<br>
<br>
<a href="cmp/tunes/tunesframes.html"><img src="img/p-lunartunes.gif" height=77 width=95 alt="Lunar Tunes" border=0></a>
</td>
</tr>
<tr>
<td align=middle valign=top>
<br>
<br>
<a href="cmp/lineup/lineupframes.html"><img src="img/p-lineup.gif" height=52 width=63 alt="The Lineup" border=0></a>
</td>
<td colspan=3 rowspan=2 align=right valign=middle>
<img src="img/p-jamlogo.gif" height=165 width=272 alt="Space Jam" border=0>
</td>
<td align=right valign=bottom>
<a href="cmp/jump/jumpframes.html"><img src="img/p-jump.gif" height=52 width=58 alt="Jump Station" border=0></a>
</td>
</tr>
...
</table>

这是前两行，包括徽标。你明白了。一切都用align和定位在单元格内valign。经常应用rowspan和colspan，很少有<br>调整在一行上，在必要的垂直位置。

在页面上可以找到其他奇妙的工件，包括包含Apache SSI语法的标头！当网站移交给托管多年后，对于所有人来说，它肯定已经悄然崩溃了。现在，它托管在Amazon S3上。你知道亚马逊吗？书店？

<table border=0 cellpadding=0 cellspacing=0 width=488 height=60>
<tr>
<td align="center"><!--#include virtual="html.ng/site=spacejam&type=movie&home=no&size=234&page.allowcompete=no"--></td>
<td align="center" width="20"></td>
<td align="center"><!--#include virtual="html.ng/site=spacejam&type=movie&home=no&size=234"--></td>
</tr>
</table>

好的，请查看Jam Central页面。为了真实起见，我将浏览器的分辨率降低到640×480（尽管要完全沉浸，我应该为标题栏，任务栏和五到六个IE工具栏保留更多的垂直空间）。

请注意以下框架：左上角的徽标会回到登录页面，正确地在屏幕上保存一个位置，以免重复所有这些导航操作;右上角有一个该死的广告横幅，该横幅用七种不同的方式阻止了。这三个部分都是单独的页面。



还要注意带纹理的背景上完全不可读的红色文本，这是90年代网页设计最可靠的标志之一。您可能会问，为什么不使用普通背景作为文本？你是个白痴。怎么做？毕竟，该属性background仅带有<body>！您可以放一张桌子，但是桌子只支持纯色背景，看起来很无聊！

但是，等等，这个新的导航小部件是什么？您如何设法悬挂所有链接？另一张桌子？好吧，虽然虽然设计师经常在桌子上摆满一张切成薄片的图像。但是在这里，我们有了imagemap，这是一个长期被遗忘的HTML函数。只要向您显示源：

<img src="img/m-central.jpg" height=301 width=438 border=0 alt="navigation map" usemap="#map"><br>

<map name="map">
<area shape="rect" coords="33,92,178,136" href="prodnotesframes.html" target="_top">
<area shape="rect" coords="244,111,416,152" href="photosframes.html" target="_top">
<area shape="rect" coords="104,138,229,181" href="filmmakersframes.html" target="_top">
<area shape="rect" coords="230,155,334,197" href="trailerframes.html" target="_top">
</map>

我认为这里的一切都差不多。该属性usemap附加一个图像映射，该图像映射定义为一组由一些坐标精美编码的可单击区域。

而且仍然有效！在HTML中！您可以立即使用它！虽然，可能不是。

缩略图网格


考虑另一个随机页面。例如，“电影中的照片”。（等等，照片吗？当时还不知道“框架”和“屏幕截图”两个词吗？好吧，好吧……）



另一组框架，但是排列不同。

<body bgcolor="#7714bf" background="img/bg-jamcentral.gif" text="#ffffff" link="#edb2fc" vlink="#edb2fc" alink="#edb2fc">

在这里，开发人员做了一件重要的事情：他们不仅显示了背景图像（不透明），而且还显示了背景颜色。否则，如果未加载背景图像，白色文本将在白色背景上出现。

（与现代开发的另一个有趣的区别。如今，许多设计师认为所有资源都将被下载，有时他们将下载呈现为一些不便之处，需要避免。但并非全部如此，他们都坐在距离旧金山市10米的光纤连接上。渠道）。

但是回到页面本身。缩略图网格是当时的经典Web设计问题。主要问题是您要并排放置图片和HTML默认情况下将它们堆叠在一个大列中。当时，设计师只有一种工具：桌子。在我们的网站上，其结构如下：

<table cellpadding=10>
<tr><td align=center><a href="..."><img src="..."></a></td>...</tr>
<tr>...</tr>
<tr>...</tr>
<table>

3×3缩略图网格的格式由浏览器决定（单独一行中的最后一张图像实际上不是表格的一部分）。列数不取决于屏幕的宽度，但是在那个时候，每个人都有很小的屏幕，因此这并不会给设计者带来太多麻烦。这里的图片没有标题，但是由于它们各自位于单独的单元格中，因此可以轻松添加它们。

这是1996年最先进的缩略图显示方法。我们将再重复几次这个UI难题。您可以在单独的页面上查看实际示例（以及带有示例标记的源代码）。

为了有趣，让我们看一下电影中“全尺寸，全彩色，互联网质量”的帧的大小。



嘿，是的，它们小于16 KB！此图片的加载速度将比9秒钟快！

（我记得嵌入式视频的问题，直到<video>几年后HTML5标签出现，它才得以解决。在那之前，我不得不使用一些专有的插件，而且它们都很糟糕）。

（是的，顺便说一句：默认情况下，在链接内部的图像上添加了一个彩色框。在这里，链接的存在是显而易见的，因此该框看起来多余且令人讨厌。在CSS之前，应使用属性为每个单独的图像禁用它们<img border=0>）。

当时的惯常布局


那是我们开始的地方，很烂。如果要在多个页面上使用通用样式，则可能性非常有限，并且复制粘贴仍然是唯一的工具。与许多其他公司一样，Space Jam网站选择完全不担心设计的一致性。

然后是CSS。这真是一个奇迹。所有这些重复在每页上的代码都消失了。是否要制作特定颜色的所有顶级标题？没问题：

H1 {
    color: #FF0000;
}

am！这就是全部。无论<h1>您的文档中有多少个标题，每个标题都会变成红色，并且您无需再考虑它。更好的是：您可以将此片段放入您自己的文件中，然后毫不费力地将此可疑的美学选择应用于网站的每个页面！这同样适用于表格中宏伟的图块背景，链接颜色和字体大小。

（只需记住将标签的内容包装<style>在HTML注释中，否则，不支持CSS的旧版浏览器会将它们显示为文本）。

不必将标签连续应用于所有内容。 CSS引入了“类”和“ ID”的概念，因此样式仅扩展到带有特殊标记的元素。类型选择器P.important仅适用于类的段落<P CLASS="important">，但#header仅会影响效果<H1 ID="header">（区别在于标识符在文档中必须是唯一的，并且类可以多次使用）。使用这些工具，您可以有效地创建自己的标记，从而获得站点唯一的HTML单独版本！

这是一个巨大的飞跃，但是当时（可能）没有人考虑过使用CSS进行布局。当CSS 1建议在96年12月发布时，它几乎没有涉及布局，它只是将现有的 HTML函数与它们所附加的标签分开。感谢<FONT COLOR>和，我们有了字体颜色和背景<BODY BACKGROUND>。至少在远程上影响页面上对象位置的唯一因素是float等效属性<IMG ALIGN>，该属性将图像拉到侧面并包括周围的文本流，例如报纸。没那么令人印象深刻。

但这并不奇怪。 HTML中没有真正的布局工具，除了表格，表格的属性很难在CSS中进行概括或与标签结构相关，因此CSS 1无需添加任何内容。我们只是稍微自动化了一点，例如使用了标签<FONT>，所以进行了网页设计变得不再那么乏味并且更不容易出错，页面代码变得更整洁并且更容易维护。向前迈出了相当不错的一步，每个人都高兴地接受了它，但是表格仍然是布局的主要工具。

但是，这很正常。总的来说，您的博客只需要标题和侧边栏。表格可以很好地完成此工作，并且此基本结构适用于大多数情况。复制/粘贴几行<TABLE BORDER=0>和<TD WIDTH=20%>。

多年来，这一直是标准。用于布局的表格，用于……的CSS，用于样式。颜色，大小，粗体，下划线。当仅在鼠标光标悬停在链接上时，才强调链接。美丽！

（有趣的事实：大多数电子邮件服务的HTML代码尚未出现在那个时代）。

（然后，我在11岁的成熟年龄进入这个行业，不知道自己在做什么，并且基本上与其他11岁的家伙一起学习，他们也不知道他们在做什么。网络的很大一部分是由11岁的年轻人创建的孩子们制作自己的网站，这太好了。如果您可以熟悉这个星球另一端的某些男孩或女孩的特定爱好，为什么还要去商业网站？）

黑暗时代


一年半之后，即1998年中，我们收到了CSS 2（顺便说一句，我喜欢该页面的背景）。这是一个适度的更新，消除了各个领域的一些缺点，但是最有趣的是添加了一对定位原语：该属性position允许您将元素放置在精确的坐标中，而显示模式则inline-block允许您将块依次排列。

如此诱人的果实，却无法接近！用法position似乎很正常，但是像素的精确定位严重地与灵活的HTML设计相矛盾，并且在调整屏幕大小时，所有内容都必定崩溃或出现其他严重缺陷。这种谦卑inline-block 似乎很有趣;但是，他解决了HTML布局的主要问题，即将对象放置在一行中。但是起初，没有浏览器实现此属性，因此设计人员将其忽略。

我不能肯定地说为什么，也许是由于外观的原因或在其他因素的影响下，但是在那时，发烧友决定尝试使用CSS进行布局。理想情况下，您可以将页面的内容与外观完全分开。甚至还有一个CSS Zen Garden网站（他还活着），将这个想法发挥到了极致。在其上，将相同的HTML代码在应用了不同的样式表后将转换为完全不同的项目。

问题在于早期的CSS支持非常糟糕。回顾过去，我怀疑浏览器开发人员只是重复了HTML标记的处理并最终完成了此操作。RichInStyle网站在那些年的浏览器中仍然有大量的CSS错误列表。这是我的最爱：

  • IE 3会忽略文档中除最后一个以外的所有<style>标记。
  • IE 3会忽略伪类，因此其a:hover读为。
  • IE 3和IE 4将边界auto视为空。实际上，此错误几乎一直存在于IE 6版本。但这是正常的，因为IE 6也被错误地text-align: center用于块元素。
  • 如果为背景图像指定了绝对URL，则IE 3将尝试在本地程序中打开该图像，就像您下载它一样。
  • Netscape 4 , #id, h1#id .
  • Netscape 4  — ! — .
  • Netscape 4 <li> , .
  • float clear ( ), Netscape 4 Mac .

那就是我们必须处理的。人们是否想在CSS中制作整个页面布局？哈。

但是，这种想法越来越流行。对于设计师精英的高级部分-最佳实践，它甚至成了一种统一的口号，被认为是辩论中唯一的真实论点。他们说，使用表格进行布局是不好的。表格使屏幕阅读器（屏幕阅读器）感到困惑，它们在语义上是不正确的，与CSS定位的交互性很差！所有这些都是真的，但是很难接受。

好吧，等一下。首先，让我们看一下2000年开发Web的一些氛围。

浏览器大战的结束和随后的停滞


简短的版本是这样的：Netscape出售Navigator浏览器赚钱了（商务付费，供个人使用免费），然后Microsoft带着完全免费的Internet Explorer进入市场，然后Microsoft大胆地将IE与Windows连接起来。你可以想象？使用浏览器进行操作？那很重要。微软提起诉讼，她输了，但是结果几乎没有任何改变。

微软无论如何都做了它想要的，并且成功了。她几乎摧毁了Netscape。两种浏览器都是令人毛骨悚然的越野车，但是越野车的使用方式不同。因此，在一个浏览器中测试的站点几乎可以肯定会在另一个浏览器中崩溃。这意味着，当Netscape的市场份额下降时，Web设计师对它的关注减少了，因此在其中正常打开的网站也减少了，因此Netscape Navigator的份额下降了更多。

对于Windows以外的操作系统的用户来说，这可能不是一个好消息。这很有趣，因为它是适用于Mac的IE 5.5，并且通常没有IE 6的错误（顺便说一句，当时的比尔·盖茨并不像一个富有进取心和无情的商人那样光辉，故意破坏任何阻碍发展的竞争，最终对整个行业造成损害（顺便说一句，就是这样）。

当带有Internet Explorer 6的Windows XP于2001年中期问世时，Netscape Navigator从庞大的Juggernaut变成了适合小众应用程序的小型设备。

然后，在完全完全占领市场之后，微软停了下来。自成立以来，Internet Explorer大约每年发布一次，但是IE 6之后的发布时间已超过五年。它仍然是越野车，但是在没有竞争对手的情况下，这并不明显。因此，Windows XP看起来也足以占领台式机市场，并且下一版本的Windows也未在同一时间问世。

也停止了接受标准的W3C联盟的工作（不要与W3Schools，SEO水lee相混淆）。在90年代中期，对HTML进行了几次修订，然后将其冻结为HTML4。CSS在短短一年半的时间内从第一版更新到了第二版，但也因此冻结。次要CSS 2.1更新直到2004年初才能达到“候选推荐”的状态，并且又花了七年的时间才接受最终版本。

在完全控制IE 6的情况下，似乎整个网络似乎都被冻结了。标准并不重要，因为实际上只有一个浏览器。他所做的一切都成为事实上的标准。随着Internet的普及，由于IE仅适用于Windows，因此IE的控制力也使其难以使用Windows以外的任何平台。永远无法保证该网站可以在任何其他浏览器上运行。

（有一个想法认为垄断是有害的。必须有某种针对他们的法律！）

同时，Netscape已开始大规模更换引擎，从而恶化了其地位。结果，发布了更加一致的Netscape 6标准，并且价格已经离开市场几年了，那时IE继续在市场上增长。Netscape 6浏览器永远不会达到10％，而IE的峰值将达到96％。另一方面，作为Mozilla Application Suite的一部分，新引擎随开源一起发布，稍后将发挥作用。

但是在那之前还有几年，但是现在...

兼容模式


浏览器中所有早期的CSS实现都充满了错误。其中最臭名昭著的可能是容器模型（盒模型）的错误。

您会看到一个容器（元素所占据的矩形空间）具有多个尺寸：其自身的宽度和高度，然后是填充，然后是可选边框，然后是将其与相邻容器分隔开的字段。 CSS表示所有这些距离堆叠在一起。例如，具有以下样式的容器：

    width: 100px;
    padding: 10px;
    border: 2px solid black;

...从边框到边框的宽度均为124像素。

但是，IE 4和Netscape 4采用了不同的方法：他们将宽度和高度视为从边界到边界的一个尺寸，从中减去边界和边距以获得元素本身的宽度。这些浏览器中的同一字段从边框到边框的宽度为100像素，内容保留为76像素。

IE 6决定纠正与规范的矛盾。不幸的是，仅进行更改将破坏许多在IE和Netscape中都能正常工作的网站的设计。

因此，IE团队提出了一个非常奇怪的折衷方案：他们将旧的行为（以及其他几个主要错误）声明为“兼容模式”（“怪异模式”，字面上“与怪异一起工作”）并默认将其打开。要切换到新的“严格”或“标准模式”，必须在文档的开头，标记之前指定“ doctype” <html>。它看起来像这样：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

多年以来，每个人都必须在每个HTML文档的开头插入这条愚蠢的行（后来的HTML5会将其简化为<!DOCTYPE html>）。如果您考虑一下，这是选择正确的CSS行为的一种非常奇怪的方法。自90年代中期以来，doctype声明已成为HTML规范的一部分，但没有人使用它。我猜微软的想法是允许选择而不引入专有扩展。使用这样的声明可以避免最初是错误的行为。方便IE团队退出！

有趣的是，“怪癖”的兼容模式仍然存在。而且它仍然默认安装在所有浏览器中，二十年后！随着时间的流逝，“怪癖”的确切列表已经改变。特别是，即使在这种模式下，Chrome和Firefox都不使用IE容器模型，但是会模拟许多其他错误。

现代浏览器还具有一种“几乎标准”的模式，只能模拟一个怪癖。也许这是第二个最丑闻的功能：如果表单元格仅包含图像，则下面的空间将被删除。根据通常的CSS规则，图像位于文本的（空）行中，该行下方需要一些空间-用于字母的线性元素，例如“ y”。早期的浏览器无法正常处理此问题，但是，大约在2000年之后创建的某些网站都依赖此功能，尽管其他所有功能都完全兼容。例如，他们将大图像切成小块，然后将它们放置在彼此靠近的表格单元格中。如果按照标准添加空白区域，则图片将分崩离析。

但是回到过去。尽管这些标准正式流行，但却带来了新的问题。由于IE 6在Web上占主导地位，并且DOCTYPE声明是可选的，因此不必考虑在浏览器的“严格模式”下支持这些标准。其他浏览器最终模仿了它，自定义行为成为事实上的标准。关心此类事情的Web设计人员（值得称赞的是，我们当中很多人）发起了一场备受瞩目的活动，以启用严格模式，因为这是确保与其他浏览器兼容的绝对必要的第一步。

XHTML兴衰


同时，W3C对HTML失去了兴趣，转而使用XHTML。这是尝试使用XML语法而不是SGML重新设计HTML。

（您问什么是SGML？我不知道。没人知道。这是建立HTML的语法，这是唯一已知的语法）。

值得财团称赞的是，当时有充分合理的理由做出这一决定。通常，HTML是手动编写的（现在是这样），这意味着必须存在随机错误。浏览器并未拒绝有问题的HTML，而是采用了各种错误修复方法-就像其他所有内容一样，不同的浏览器对错误的处理方式也不同。稍有变形的HTML在IE 6中似乎可以正常工作（“正常工作”表示“达到了预期的效果”），但在其他浏览器中却完全崩溃了。

W3C联盟选择了XML，因为在2000年代初，他们将XML视为解决所有问题的通用解决方案。如果您不知道，XML会提供更为明确和积极的错误处理方法-如果您的文档包含解析错误，则整个文档都是无效的。这意味着，如果您选择了XHTML并输入了一个错字，那么浏览器中将什么也不显示。只是一个错误。

糟透了乍一看，一切似乎都很正常，但请记住：通用XML通常是使用库动态组装的，这些库将文档视为您可以操纵的树，最后将其转换为文本。当数据已经是一棵树并且大多数XML结构简单且可重复使用时，这对于XML序列化数据的常规用法非常有用，因此很容易隐藏在函数中。

HTML不是那样的。 HTML文档几乎没有可靠的重复结构。即使页面上的这篇文章主要通过标签来设置格式<p>，但<em>在正文和随机文本中也包含了意外内容<h3>在段落之间。以树的形式进行编码不是很有趣。这一点很重要，因为大约在同一时间，服务器端渲染正获得发展势头，并且生成的HTML到现在为止！ -提供了将其视为文本流的模板。

如果HTML页面是纯粹的静态文档，那么XHTML可以工作-您编写了一个文档，在浏览器中看到了它，并且知道一切正常。没问题。但是要动态创建文档并冒着在某些临界情况下欺骗整个网站的风险，并且访问者会在浏览器中看到错误吗？糟透了

当然，那时新的Unicode标准的传播也起了作用。然后，并不总是很清楚如何使用它，而且一个错误的UTF-8序列足以将整个XML文档视为失真和“无效”！

因此，经过一些纵容之后，我们几乎忘记了XHTML。他只留下了两条音轨：

  • 每个人都停止使用大写的标签名称！再见<BODY>，你好<body>！XML区分大小写，并且所有XHTML标记都是小写的，因此title标记不起作用（有趣的事实：JavaScript API仍然以大写形式传递HTML标记的名称）。这可能是由于语法突出显示的日益普及。我们不再像1997年那样用记事本书写。
  • . , HTML : , <p>...</p>, <br>. <br> , </br>. XML : , <br/>, <br></br>.

    XHTML , - , <br/> HTML-. XML ; HTML5 , . , <script/> <script> — HTML !

我只想念XHTML中的一件事。在那里，您可以使用XSLT元语言使模板“位于浏览器内部”（即，将页面的内容插入网站的常规布局中）而无需编写脚本。这是唯一可行的方法，如果一切正常，那真是太酷了。但是一些小故障可能会破坏一切。

CSS布局的外观


回到CSS！

您是一名初学者Web设计师，出于某种原因，您想尝试使用CSS样式进行布局，尽管它们显然仅适用于颜色和其他内容。该怎么办？

正如我提到的，主要问题是物体彼此之间的水平位置。垂直定位不是问题-这是正常的HTML行为。每个人都使用表格的唯一原因是因为它们可以将材料分解为单元格并将它们并排排列在列中。

CSS 2引入了一些与表格各部分相对应的显示模式。但是要使用它们，您需要与真实表中相同的三个嵌套级别：表本身，行，单元。它们不在这里，无论如何，IE都不会很快开始支持这种模式。

还有更多position，但他不断寻求将物体放在彼此之上。嗯

剩下什么？

实际上，只有一种工具：float。

我说过，它float使您可以使报纸上的文字随处可见，但这是一个非常笼统的描述。在原则，它可以应用于任何元素。如果需要侧边栏，则可以将其倾斜到左侧边缘，为页面分配20％的宽度，并得到如下所示的内容：

+ --------- +
| 侧边栏| 您好，欢迎来到我的网站！
| |
+ --------- +

不幸的是，这些属性float使得文本将在其周围流动。因此，如果页面上的文本长于侧栏，它将显示在下方-且幻觉将被破坏。但是可以绕开它。CSS规范阐明了内容float不能互相流通，因此再多放一个就足够了float！

+ --------- + + ----------------------------------- +
| 侧边栏| | 您好，欢迎来到我的网站！|
| | | |
+ --------- + | 这是更长的一段显示|
            | 我的银河大脑CSS浮动|
            | 废话可防止文字换行。|
            + ----------------------------------- +

这种方法有效，但是其局限性比表局限性要差得多。例如，如果添加一个页脚，它将添加到正文的右侧，因为对于浏览器，“光标”仍位于浮动块右侧的顶部。因此，您需要使用clear它在所有浮子下钉一个元素。而且，如果将边栏的宽度设为页面宽度的20％，将正文的宽度设为80％，则它们之间的任何空间都会将页面推离屏幕，并显示难看的水平滚动条。您始终需要记住这种愚蠢的算法。如果您有边框或两侧设置的背景，那么他们将具有不同的高度，所以你要做的真的怪诞的事情使这修理它。屏幕阅读器将在阅读主要文本之前先阅读整个侧边栏，这对用户来说是很不礼貌的。因此，你需要使用一个甚至更复杂的设置有三列，其中在HTML中间的第一次出现。

结果，我们得到了一个外观漂亮，可以正常工作且可以正确缩放的设计，但是它的描述非常混乱。您编写的内容 并没有真正符合您的需求 -这些是设计的主要部分，而不是侧框架！很难理解CSS代码是如何连接的以及屏幕上显示的内容。在最终改善之前，情况将变得更加糟糕。

缩略图网格-2


有了新玩具，我们可以改善我们的微型网格。即使您不提供标签语义，原始表的布局也非常繁琐。现在您可以做得更好！

<ul class="thumbnail-grid">
    <li><img src="..."><br>caption</li>
    <li><img src="..."><br>caption</li>
    <li><img src="..."><br>caption</li>
    ...
</ul>

这是理想的：HTML以某种合理的形式存储页面内容，然后CSS描述其实际外观。

不幸的是，实施起来float有点粗鲁。这个新版本可以更好地适应不同的屏幕尺寸，但是需要一些技巧：单元必须具有固定的高度，使整个网格居中非常困难，并且网格效果随着元素的增加而消失。显然，我们得到了几乎相同的表，但列数灵活。我们只是在模仿它。

您还需要clearfix那个时代臭名昭著的奇怪咒语。由于float不会移动“光标”，因此<ul>浮点元素的高度为零。它恰好在其开始处结束，并且所有浮动缩略图都从下面获得足够的睡眠。更糟糕的是，由于所有后续元素都没有相邻的浮动元素，因此它们将完全忽略缩略图，继续在空的“网格”下进行渲染-造成混乱！

解决方案是在列表末尾添加一个虚拟元素，该元素不占用空间，但具有CSS属性clear: both，该属性在所有浮点数下均将其忽略。这有效地将后者推到<ul>缩略图下方，并从下方整齐地附着在缩略图上。

稍后，浏览器将开始支持“生成的内容”的伪元素，::before并且::after，这将完全放弃虚拟元素。2000年代中期的样式表通常包含以下几行：

.thumbnail-grid::after {
    content: '';
    display: block;
    clear: both;
}

但是它比表格要好。

DHTML


作为对JavaScript世界的简要介绍，这种新特性position 真正实现了某种程度上的动态布局。我全心全意地反对这种异端，尤其是因为没有人做得正确，但玩起来很有趣。

这样就开始了“动态HTML”时代，即具有JavaScript效果的HTML。现在，这个词已经完全过时了，因为如果没有JavaScript，我们现在甚至无法创建一个静态的博客。一切都以无害的方式开始：青少年在鼠标光标后的页面上插入了闪光，或者是一个实时滴答的小型模拟时钟。

此类脚本的最受欢迎集合是Dynamic Drive。 -这个网站奇迹般地仍然存在。它可能包含数百种自2000年代初以来未更新的玩具。

如果您不想深入研究此集合，请举一个例子：每年（生日那天除外，我忘记了，很抱歉）在我的生日中，我都喜欢在我的博客中添加五彩纸屑和其他废话。我很懒惰，所以我借助这个脚本开始了我的传统，我在某处找到了这个脚本。它最初是用于雪花的，并使用放在页面上一堆图片position: absolute，然后反复更改其坐标。

将此与我几年前从头开始编写的版本进行比较：这只是很小的JS代码来定制图像，然后浏览器使用CSS对其进行动画处理。这是一个功能稍差的脚本，但是它允许浏览器完成所有工作，甚至在硬件加速的情况下也可以。那就是我们要走的路。

Web 2.0


黑暗时代不可能永远持续。发生了一系列事件，使我们陷入困境。

主要事件之一是Firefox的发布-对于最高级的版本，最初是Phoenix，然后是Firebird。 1.0版出现在2004年11月-开始很好地蚕食IE。该浏览器在重写的Netscape 6内核上工作，该内核从Mozilla Suite的核心提取到单独的应用程序中。它快速，简单，并且在维护标准方面要好得多，尽管绝对没有关系。

真正的事实是Firefox有选项卡。在IE 6中，它们不是。如果要打开第二个网页，则打开一个新窗口。该死的家伙。 Firefox已成为真正的奇迹。

当然，Firefox并不是第一个带有标签的浏览器；它们还存在于Mozilla Suite的完整浏览器中，但是它们在高级Opera中已有很长时间了。但是由于种种原因，是Firefox脱颖而出，这不仅是因为它的顶部没有像Opera这样的巨型广告面板。

当然，设计师在标准支持方面推广了Firefox，但是这种说法只吸引了其他设计师，而不是他们的父母。最流行和最壮观的演示之一是Acid2测试，旨在测试现代Web标准。如果正确地制定了标准，他会表现出很好的笑容，并在IE 6中显示出令人讨厌的画面。

IE 6浏览器中的Acid2测试结果

早期的Firefox并不完美。但是，当然，他对标准的支持要好得多，并且直到浏览器在Firefox 3发行版完全通过所有测试之前，您才能看到进步

。它比IE快得多。例如，据我所记得getElementById，即使在使用唯一标识符的情况下，IE 6也实现了对整个文档的迭代。看看旧的jQuery发布公告，它们通常都带有性能图，并且所有浏览器都比IE 6-8快一个数量级。

哦，然后IE 6成为了一个巨大的安全漏洞，尤其是对任意二进制组件的本机支持，只需要单击详细对话框中的“是”即可完全无限制地访问您的系统。这可能对IE的声誉没有帮助。

无论如何，随着IE的最小替代品的出现，即使是最恶毒的设计师也不能仅仅为IE 6优化站点并以此为终点。现在有理由使用严格模式，有理由考虑兼容性和标准，并且Firefox不断努力尽可能地遵守它们，而IE 6则处于停滞状态。

（我想说这种效果为OS X和iPhone敞开了大门。我不是在开玩笑！请考虑一下：如果iPhone浏览器实际上无法正常工作，因为每个人都还在为IE建立网站在图6中，它仍然只是Palm的昂贵替代品。请记住，起初Apple甚至不想发布自己的应用程序-它依靠Internet。

（顺便说一下，Safari于2003年1月发布，它基于来自KDE Konqueror浏览器的KHTML分支。我想我当时使用KDE，所以它非常有趣，但是没有人真正想到过OSX。可笑的市场份额为2％）。

另一个重要因素出现在2004年4月1日，当时Google发布了Gmail。哈哈这很有趣。方便的网络邮件界面？笑话，谷歌。

妈的。他们不是在开玩笑。这个互动的东西如何工作？

如今，每个Web开发人员都知道答案-这就是XMLHttpRequest，之所以这么命名是因为没有人将它用于XML查询。它是由Microsoft发明的，用于Exchange邮件，然后由Mozilla克隆（我引用了Wikipedia）。

重要的是XMLHttpRequest允许您从JavaScript发出HTTP请求。现在，您可以完全在后台刷新包含新数据的页面的一部分，而无需重新加载。以前没有人听说过这件事，而当Google在其上推出整个电子邮件客户端时，这绝对是不可思议的。

也许所有这一切都是一个错误，这将导致可怕的未来：静态页面无缘无故地使用XHR在后台加载文本的三个段落，但这是另一篇文章的主题。

同样，类似的奇迹jQuery在2006年8月发布。他不仅描述了“ JScript” IE API与其他所有方法所采用的标准方法之间的区别（其他方法更早地完成了这些方法），而且还大大简化了同时处理整个元素组的过程，这在历史上一直是一个巨大的难题。现在，从JavaScript到处都可以很容易地应用CSS！这是一个坏主意，但是在那种情况下，没有更好的选择了！

我听见您介意：再次使用JavaScript！这是有关CSS的文章吗？

你是绝对正确的！我提到JavaScript的日益普及，这是由于另一个重要因素，它直接导致了CSS的现代发展：

野心


Firefox显示浏览器可以快速增长-Acid2的每一项新改进都令人兴奋。 Gmail向我们展示了Web不仅具有显示雪花飘落的纯文本的功能。

人们开始幻想。

问题在于浏览器并没有得到任何改善。 Firefox在某些方面更快，更准确地遵循了CSS规范，但是它基本上没有什么新功能。仅工具箱有所改进，并且这主要影响了JavaScript。 CSS是一种静态语言，因此您无法编写库来对其进行改进。可以使用JavaScript创建CSS，但是该死，这总是一个坏主意。

另一个问题是CSS 2实际上只擅长于矩形样式。在90年代，每个操作系统都有一个矩形样式的界面，这真是太好了。但是Windows XP和OS X的时机已经到来，一切都变得辉煌，光彩和圆润。档案浏览器中的圆角和整齐的带有阴影的复选标记有点尴尬，但是Internet上却没有。

于是黑暗时代又回来了。

CSS Hack时代


设计师想要CSS无法提供的许多功能。

  • 圆角。方形的按钮过时了，现在每个人都想要圆角的纽扣，因为“未来就在他们身上”（本地纽扣也出于某种原因而过时了）。CSS，CSS无法做到这一点。您的选择：

    1. . , . .
    2. , . , .
    3. , 3×3 . JavaScript.
    4. , - lol

    , IE 6 PNG 8- - ; 1-, , , GIF. , :

    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bite-my-ass.png');
  • : ! . .
  • . CSS 3 opacity… IE, filter. , PNG, … , .
  • jQuery , fadeIn, . - , 2000- Linux ( ) .

    , , JavaScript, . , , .
  • ! . , , , . CSS , <tr class="odd"> (, !) - jQuery.
  • CSS 2 >, , ul.foo > li , , IE 6 —  — !

但是所有这些纯粹是出于美学考虑。如果您对布局感兴趣，那么Firefox的出现立即使您的生活变得更加轻松和复杂。

你还记得inline-block吗？ Firefox 2实际上支持它！它是有问题的，并且隐藏在供应商前缀的后面，但是它或多或少都起作用了，这使设计人员可以尝试使用它。然后Firefox 3出现了，它或多或少地正常地支持了它，这似乎是一个奇迹。缩略图网格的第三个版本仅比width和inline-block：

.thumbnails li {
    display: inline-block;
    width: 250px;
    margin: 0.5em;
    vertical-align: top;
}

通常的想法inline-block是，内部的作用就像一个块，但是该块本身放置在纯文本中，例如图像。因此，每个缩略图都放置在一个容器中，但是所有这些容器彼此并排放置，并且由于它们的宽度相等，它们进入了网格。并且由于它在功能上是一行文本，因此与使用float一样，对页面的其余部分也没有任何奇怪的影响。

当然，有一些缺点。例如，剩余空间无法处理，因此存在在非标准大屏幕上右侧出现大视野的风险。还有一个问题是，宽单元会破坏网格。但是至少它不是浮点数。

仍然存在一个小问题：IE6。它在技术上得到了支持inline-block，但仅适用于自然内置的元素，例如<b>和<i>，但不适用<li>。那不是您真正想要（或认为）使用的方式inline-block。嗯

幸运的是，在某个时候，绝对的天才发现了hasLayoutIE中的内部优化，该优化标记了元素是否具有...呃...标记。听着，我不知道。基本上，它会更改元素的渲染路径-因此，这些不是这些而是其他出现的错误，例如基于每个元素的兼容模式！结果，如果添加以下几行，则以上所有内容都可以在IE 6中运行：

.thumbnails li {
    display: inline-block;
    width: 250px;
    margin: 0.5em;
    vertical-align: top;
    *zoom: 1;
    *display: inline;
}

开头的星号会使属性无效，因此浏览器应忽略整行...但是出于某些未知原因，IE 6会忽略星号并接受其余规则（几乎所有有效的标点符号都起作用，包括连字符或-我个人喜欢的下划线）。属性zoom 是Microsoft扩展程序，它可以缩放所有内容，其副作用是将layout属性设置为元素。并且它display: inline 应该强制每个元素将其内容插入到大行文本中，但是IE inline使用“ markup”属性来处理元素，例如inline-block。

在这里，我们看到了CSS骇客的真正潜力。特定于浏览器的规则具有一种浏览器会忽略的故意较差的语法，从而产生的效果仍然与您所编写的内容难以理解。整个教科书都说明了如何使某些事情变得简单，例如网格，但是这种方法在当时的大多数浏览器中都可以使用。你还会看到* html，html > /**/ body和各种其他的废话。这是完整列表！还记得黑客“ clearfix”吗？与所有浏览器兼容的完整版本稍差一些：

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

人们开始抱怨CSS难怪吗？

这是一个盲目的复制粘贴时代，徒劳地试图使这可恶的东西起作用。例如：某人（我曾经发掘过源代码，但现在找不到它）总会安装一个奇怪的想法body { font-size: 62.5% }，因为相对单位被认为是``不错的''，而不是想要覆盖默认的默认浏览器字体大小16px（事实证明是对的）以及处理IE错误的需要。一段时间后，他停止了这样做，但是造成了损害，成千上万的网站都以这种方式行事，认为这是“最佳实践”。这意味着，如果您想在任何方向上更改浏览器的默认字体大小，那么您会胡说八道-如果您缩小浏览器的大小，并且一堆网页变得很小，如果增加它，那么增加它的一切都会变小。 ，那么尊重您决策的网站将变得庞大。我认为至少今天我们有了更好的扩展。

是的，请记住：StackOverflow尚未出现。所有的知识都是从口传来的。如果幸运的话，您会了解一些网站，例如QuirksMode和Eric Meyer's。

实际上，请查看Mayer的CSS / Edge网站。早在2002年，就算有CSS 1，人们也有很多例子。我仍然认为complexspiral  是一个纯粹的天才，尽管如今这些工作都是完成的，opacity并且只有一个图像。Raggedfloat中的方法只是在几年前才获得原生CSS支持的shape-outside！作者还为我们提供了CSS重置，消除了默认浏览器样式之间的差异。

（埃里克·迈耶（Eric Meyer）在CSS中的作用很难高估。当他的小女儿丽贝卡（Rebecca）于六年前去世时，她以自己的CSS肤色而永生，一个独特的案例。这就是他的在线社区的赞赏！好吧，现在我必须为这个故事哭一点。）

未来来了，但是逐渐


设计师和开发人员逐渐突破了浏览器功能的界限。到目前为止，浏览器的管理状况有些差。所有修复程序，变通办法和库都是秘密的，脆弱的，容易出错的和/或繁重的。

显然，浏览器需要新功能。但是仅仅释放它是不够的。微软做了很多事情，基本上导致了新的混乱。

但是进行了几次绝望的尝试。由于W3C的负责人仍然束手无策-甚至拒绝提议的HTML改进以支持XML-一些活跃的浏览器开发人员（Apple，Mozilla和Opera）决定建立自己的俱乐部。 2004年6月，WHATWG工作组成立，并开始研究HTML5标准。最终，它完全消除了对XHTML的需求，并消除了使用常规HTML时的许多安全问题。此外，它还提供了一些新的好处，例如对音频，视频的本地支持以及日期和颜色的表单控件。以及JavaScript控件笨拙地支持的其他功能。而且，嗯，那里仍然很笨拙地支持他们。

然后是CSS3。我不知道发生在什么时候。他慢慢地出现，全力以赴，就像一只从卵上孵出的小鸡，并不着急，该死的，无处可去。

我可以做出很多合理的假设。我认为这始于border-radius。具体来说，使用-moz-border-radius。我不知道它是什么时候首次引入的，但是Mozilla错误跟踪器早在1999年就提到了它。

请参阅，Firefox自己的用户界面是使用CSS呈现的。如果Mozilla想要做CSS无法完成的工作，她会在自己的属性前加上前缀-moz以表明这是他们自己的发明。并且，如果这没有真正的危害，那么它将使该财产可用于网站。

我猜想CSS 3的推动实际上是在Firefox起飞时开始的-设计师发现了该属性-moz-border-radius。突然出现内置的圆角！在Photoshop中不必再大惊小怪了，只写一行！几乎一夜之间，到处都有圆角。

从那里一切都像滚雪球一样滚动。在新的CSS函数的帮助下，常见问题得以一一解决，这些新功能又被组合到新版本的CSS-CSS 3中。主要解决了前面提到的设计问题：

  • 与圆角border-radius。
  • 使用linear-gradient()等的渐变
  • 多重背景本身并不是问题，但可以促进其他一些事情。
  • 透明度使用opacity和Alpha通道中的颜色。
  • 容器处的阴影。
  • , CSS 2, 2.1 .
  • (border image), , .
  • jQuery ( JS ).
  • :nth-child(), CSS.
  • . , ? SVG, , . , , , CSS! . .
  • Web字体已经在CSS中使用了一段时间，但是仅在IE中实现，并且仅使用一些笨拙的DRM加载字体。现在，我们不仅限于Windows附带的四种不良字体，而且没有别人拥有！

太好了！这些功能并没有解决任何布局问题，但确实解决了设计师以前笨拙地避免使用大量图像和/或JavaScript的美学问题。这意味着更少的下载次数和更少的图片（而不是文字）被使用了，这对于网络来说是非常好的。

具有讽刺意味的是，这些设计效果几乎立即就过时了，现在我们又回到了扁平矩形。

浏览器中的地狱供应商前缀


唉!这个世界还不是很好。

其中一些新的小玩意最初是由浏览器制造商开发的，并带有前缀。后来的一些由CSS委员会开发，然后在设计仍在开发中时由浏览器实现。所以这里也有前缀。前缀

的地狱开始了，直到今天。因此，

Mozilla -moz-border-radius在Safari实施时被称为它-webkit-border-radius（“ WebKit”是Apple fork KHTML的名称）。然后CSS 3规范对其进行了标准化并简单命名border-radius。这意味着，如果要使用圆角边框，则实际上需要阐明三个规则：

element {
    -moz-border-radius: 1em;
    -webkit-border-radius: 1em;
    border-radius: 1em;
}

前两个实际上包含了当前浏览器中的效果，最后一个已注册为将来使用：当浏览器实现实际规则并删除前缀时，它将生效。

您必须在该死的每个时间都这样做，因为CSS不是一种编程语言，并且没有宏，函数等。有时，Opera和IE浏览器引入了前缀自己的实现-o-和-ms-，因此，行的总数达到了五位。随着渐变，情况变得更糟。语法经过了许多严重的不兼容修订，因此您甚至不必依靠复制/粘贴和更改属性名称！

好吧，许多设计师搞砸了。我不能怪他们太多。我的意思是，很烂。但是许多页面只显示前缀形式，而不是最终形式，因此浏览器必须将前缀形式保留的时间长于它们不破坏任何内容的时间。而且，如果前缀形式仍然有效，并且您已经习惯了使用前缀形式，那么也许您实际上并不需要通用选项。

更糟糕的是，有些人只会使用在他们喜欢的浏览器中使用的表单。随着移动网络浏览器的兴起，情况变得尤为糟糕。 iOS和Android上的内置浏览器是Safari（WebKit）和Chrome（最初是WebKit，现在是fork），因此您只需要-webkit-前缀。这使得Mozilla在发布Firefox for Android时更加困难。

还记得IE 6的失败吗？我们又来了！这种情况是如此糟糕，以至于Mozilla最终决定实现一些功能-webkit-，即使在桌面Firefox上也仍然受支持。这种情况是如此愚蠢，以至于Firefox现在仅通过这些属性支持某些效果，例如-webkit-text-stroke，该属性尚未标准化。

此外，当前的分叉式Chrome引擎称为Blink，因此从技术上讲，它不应使用properties -webkit-。但是他们是。至少这不如混淆用户代理字符串那么糟糕。

现在，浏览器的创建者基本上已经放弃了前缀。相反，它们将实验功能隐藏在标志的后面（因此，它们将仅在强制使用它们的开发计算机上工作）。理论上，新功能应更小且更易于稳定。

整个混乱局面可能已成为Sass和LESS（两种产生CSS（预处理器）代码的语言）的发展的巨大动力。它们具有非常相似的目标：都向CSS添加变量，函数和某种形式的宏，这使您可以从代码中排除许多重复，浏览器被黑和其他废话。地狱，尽管该行业的整体使用量正在逐渐减少，但我仍然自己使用SCSS。

弹性盒


但是然后，好像一个天使从天堂降下来了…… flexbox。

Flexbox已经存在很长时间了- 据称部分支持早在2006年就已在Firefox 2中恢复！他经历了几次不兼容的修订，这使他永远地稳定下来。 IE多年来无法实现支持，因此您不希望依赖仅可用于一半受众的布局。直到最近（2015年？以后？），Flexbox才获得了足够的广泛支持以确保安全使用。而且我可以发誓，尽管Safari似乎已在5年前删除了前缀，但我仍然会遇到那些Safari完全不知道没有前缀的人。

无论如何，flexbox是相当通用的GUI布局工具的CSS实现：您的父级有多个子级，并且父级有一些可用空间，并且在子级之间自动共享。这使物体彼此相邻。

一般的想法是，浏览器计算父母拥有的可用空间和每个孩子的“初始大小”，计算有多少额外的空间，并根据每个孩子的灵活性进行分配。想象一下一个工具栏：您可以为每个按钮设置一个固定的大小（弹性0），但是要添加分隔符来平均分配剩余空间，所以给它们弹性1。

完成此操作后，您还将具有几个方便的选项：可以在子项之间分配额外的空间，可以将子项拉伸到相同的高度或以不同的方式对齐它们，甚至在所有子项都不适合时甚至可以将它们转移到几行中！

这样，我们可以进一步优化缩略图网格：

.thumbnail-grid {
    display: flex;
    flex-wrap: wrap;
}
.thumbnail-grid li {
    flex: 1 0 250px;
}

这只是一个奇迹。您可以立即忘记inline-block。这段代码非常清楚地表达了我们的需求。

…几乎。他仍然有一个问题，即太宽的单元会撕裂网格，因为这仍然是水平行，已转移到几条独立的线上。但这仍然很酷，并且解决了许多其他布局问题。这可能就足够了。如果只是……

我想说的是，Flexbox的大量引入迎来了CSS的现代时代。只有一个未解决的问题....

IE缓慢而痛苦的死亡


IE 6离开市场很长时间。直到2010年初左右，它不可能跌破市场的10％（仍然是很大的一块）。

Firefox于2004年底达到1.0版。 IE 7仅在两年后问世，它仅提供了适度的改进，因为与IE 6的站点存在兼容性问题，许多IE 6用户（大多是经验不足的用户）都没有看到更新的任何原因。 Vista随附IE 7，但事实证明Vista是一种失败-我不相信在我的一生中，它几乎已经超过了XP。

其他因素包括公司的IT策略，该策略通常采取“从不更新任何内容”的形式-常常是有充分的理由的，因为我听到了无数关于内部应用程序的故事，这些内部应用程序由于各种可怕的原因而只能在IE 6中运行。然后是整个韩国，这在法律上要求使用IE 6，因为它们在法律中规定了一些安全要求，这些要求只能使用IE 6中的ActiveX控件来实现。

因此，如果您支持所使用的网站-或者更糟，要求使用-来自企业或其他国家/地区的人，您对IE 6的支持几乎是固定的。制作小型个人工具和网站的人立即放弃了IE 6的兼容性，并在IE 6用户上显示越来越讨厌的横幅广告...但是，如果您是商人，如何解释20％的潜在受众的即时损失？努力工作吧！

多年来，随着CSS的功能越来越强大，并且IE 6仍然是锚点，压力越来越大。他仍然不了解PNG alpha没有变通办法，与此同时，我们拥有越来越重要的功能，例如HTML5中的本地视频。解决方法变得越来越混乱，并且您无法使用的功能列表也越来越长。我将展示我的博客在IE 6中的外观，但是您甚至都不可能连接到它-它支持的TLS太老了而且坏了，以至于大多数服务器上已经将其禁用！

YouTube小组的各个开发人员分别提出了要求。在没有征求任何人许可的情况下，2009年7月，他们添加了警告标语，恳求IE 6用户切换到某些内容另一个，因为旧版浏览器支持即将终止。在一个月内，IE6流量的全球份额下降了10％以上。并非所有英雄都穿雨衣。

我要在IE6结束的那一天标志着YouTube真正关闭对IE 6的支持。这发生在2010年3月13日，距该版本浏览器发布已近9年了。我不知道YouTube对企业用户或韩国政府有多大影响，但是一家大型网络公司拒绝支持整个浏览器发出了非常强烈的信息。

当然，还有其他版本的IE，其中许多本身就令人头疼。但是，接下来的每一步变得不那么痛苦了，现在您无需对IE（现在称为Edge）中的测试进行过多思考。微软该放弃自己的渲染引擎并转而使用Chrome克隆了。

现在


CSS现在非常好。您不需要怪异的骇客就可以在附近放置物体。浏览器开发工具现已内置并且令人赞叹-当某些CSS属性由于其他属性的值而无效时，Firefox开始特别警告您！现在可以像显式属性一样设置不清楚的隐式副作用，例如“堆栈上下文” isolation: isolate。

实际上，让我只列出有关现代CSS功能的所有想法。这不是所有可能使用样式的指南，但是，如果您的CSS知识自2008年以来没有更新，我希望这会增加您的胃口。而这仅仅是CSS！现在，最初支持的功能很多，以前是不可能的，痛苦的或需要笨拙的插件-音频，视频，徒手画图，3D渲染……更不用说对JavaScript进行了符合人体工程学的巨大改进。

布局


网格 容器几乎可以完成表所做的所有事情，甚至还可以做更多事情，包括自动确定列数。这真是太神奇了。在下面的更多内容。flexbox

容器将其子级分解为一行或一列，从而允许每个人声明其默认大小以及要使用的空间。您可以包装这些容器，在不更改源顺序的情况下重新排列子级，并以几种方式对齐子级。

列可以很好地将文本拆分为多个列。

属性box-sizing如果需要整个元素占据固定的空间，并且可以从总宽度中减去边框和边距，则可以为单个元素选择IE容器模型。

display: contents将元素的内容转储到其父元素，好像根本不存在。display: flow-root-仅十年后，这基本上是自动clearfix。

width现在可以设置为min-content，max-content或者设置为具有fit-content()更灵活行为的函数。

white-space: pre-wrap保留空格，但在必要时可以换行以避免溢出。也很有用pre-line，它可以将空格折叠为一个，但保留原义的换行符。

text-overflow超出限制时，会使用省略号（或自定义字符）截断详细文本，而不仅仅是将其截断。规范中还包括平滑隐藏文本（淡出）的功能，但尚未实现。

shape-outside更改文本流的形状。它甚至可以将图像的Alpha通道用作表单。

resize给任意元素一个调整大小的描述符（如果有溢出）。

writing-mode设置字母的方向。如果你的设计有多种模式进行操作，一些CSS属性支持这一点，你可以用它们来替代标准属性：inset-block和inset-inline定位，block-size并inline-size为宽度/高度，border-block并border-inline以边界，以及类似性质缩进。

美学


无论是由于类型效果:hover还是例如从JavaScript添加的类，CSS Transitions都会在值发生变化时平滑地插值。CSS动画类似，但是会自动播放预定义的动画。两者都可以应用许多不同的“平滑”功能。

border-radius倒圆角容器的角落。所有角的大小可以不同，也可以是圆形或椭圆形。该曲线也适用于矩形的边框，背景和任何阴影。

容器的阴影可用于产生阴影的明显效果。您还可以将多个阴影和阴影inset用于各种智能效果。

text-shadow尽管您还可以添加一些阴影来创建某种文本轮廓，但是它可以做到。

transform允许您对元素应用任意的多步变换-即缩放，旋转，倾斜，移动和/或执行透视变换而不会影响布局。

filter（与IE 6不同）提供了几种可以应用于元素的特殊视觉过滤器。它们中的大多数会改变颜色，但也有blur()和drop-shadow()（与不同box-shadow，它应用于外部元素的思想，而不是应用于其容器）。

linear-gradient()。radial-gradient()，新功能和较少受支持conic-gradient()的选项repeating-* -它们全部创建渐变图像，并且可以在CSS中任何需要图像的地方使用，通常是background-image。

scrollbar-color更改滚动条的颜色，并具有不利的副作用，即当前浏览器中的滚动速度会大大降低。

background-size: cover并且contain它们将按比例缩放背景图像，以使其变得足够大以完全覆盖元素（即使已被裁剪）或足够小以适合内部（即使元素不能覆盖整个背景）。

object-fit 是类似的想法，但对于其他对象，例如<img>。合适的object-position作品如background-position。

可以使用多个背景，这对于渐变特别有用-您可以在底部堆叠多个渐变，其他背景图像和纯色。

text-decoration变得比以前更离奇了；现在，您可以设置线条的颜色并使用几种不同类型的线条，包括虚线，虚线和波浪线。

CSS计数器可用于对任意元素进行任意编号，从而可以在任何元素集上使用<ol>。

伪元素::marker使您可以样式化列表项的标记容器，甚至可以用自定义计数器完全替换它。浏览器支持不完整，但正在改善。同样，规则@counter-style实现了一种全新的计数器样式（例如1 2 3，ii，iii，ABC等），您可以在任何地方使用它，尽管到目前为止，只有Firefox支持它。

image-set()提供可能的图像列表，并允许浏览器根据用户屏幕的像素密度选择最合适的图像。

@font-face定义了一种可以从外部来源下载的字体，尽管您可以使用Google字体。

pointer-events: none使元素完全忽略鼠标；它不会响应指导，而点击会直接转到下面的元素。

image-rendering可能会将图像的插值方法更改为最近邻，尽管浏览器支持仍然是异构的，并且您可能还需要启用某些特定于浏览器的属性。

clip-path将元素修剪为任意形状。还有mask一个任意的alpha掩码，但是浏览器支持不统一，这通常是一个相当复杂的过程。

语法和东西


@supports允许您根据浏览器支持的内容编写不同的CSS代码，尽管目前它远没有2004年那样有用。

A > B选择直系子女。A + B挑选兄弟姐妹。A ~ B选择直属（按元素）兄弟姐妹。方括号可以根据属性做很多选择。最明显的是input[type=checkbox]，尽管可以用相应的部分完成有趣的事情<a href>。

现在有一大堆伪类。其中许多用于表单元素：:enabled和:disabled; :checked和:indeterminate（也适用于<option>）；:required和:optional; :read-write和:read-only; :in-range/ :out-of-range和:valid/:invalid（用于HTML5客户端表单验证）；:focus和:focus-within;和:default（选择默认的表单按钮以及任何预定义的复选框，单选按钮和<option>'）。

对于应用到一组相关元素内的特定元素:first-child，:last-child以及:only-child; :first-of-type，:last-of-type和:only-of-type（其中，“类型”指的是标签的名称）;是:nth-child()，:nth-last-child()，:nth-of-type()和:nth-last-of-type()（选择每个第二，第三，等等元素）。

:not()反转选择器。:empty选择没有子元素和没有文本的元素。:target选择URL片段跳转到的元素（例如，如果地址栏显示index.html#foo，同时选择标识符等于的元素foo。

::before而::after现在两个冒号，表明他们创造伪元素，而不是仅仅定义了它们所连接的选择的区域。::selection调整所选文本的显示方式；::placeholder更改替换文本的外观（在文本字段中）。

媒体查询仅做很多事情，因此您的页面可以根据其查看方式进行调整。媒体查询会prefers-color-scheme告知用户系统是安装在浅色主题还是深色主题上，因此您可以相应地对其进行自动配置。

您可以编写半透明的颜色，例如#rrggbbaa或#rgba以及使用函数rgba()和hsla()。

角度可以描述为一个完整圆的分数turn。当然，deg和rad（和grad）也可用。

CSS变量（正式为``自定义属性''）允许您设置可在任何地方使用的自定义命名值。您可以使用它来减少JavaScript中所需的CSS操作量（例如，通过设置CSS变量而不是手动设置多个属性来重绘页面的复杂部分），或者拥有一个响应父组件设置的变量的通用组件。

calc()计算一个任意表达式并自动更新它（尽管这种计算的需要部分消除了box-sizing）

vw，vh，vmin，并vmax允许您指定的长度视口的宽度或高度的百分比，或以较高者为准/更少。

！我相信我已经忘记了很多，我的同事将在评论中补充清单。现在，我可以退出查看MDN并转到文章的最后一个有趣的部分。

现代缩略图网格


最后，我们介绍了构建缩略图网格的最后一种客观正确的方法：使用CSS网格。即使名称中包含网格，也可以理解正确的选择。现代化的CSS功能非常好：它们可以让您说出自己想要的内容-并且可以按照您说的方式工作，而不是使用晦涩的伏都教徒拼写。

这是多么简单：

.thumbnail-grid {
    display: grid;
    grid: auto-flow / repeat(auto-fit, minmax(250px, 1fr));
}

做完了！它给了我们一个网格。和flexbox一样，您还有许多其他选择可以使用，但这是主要思想。您甚至不需要为元素本身设置样式。大多数布局工作都是在容器中完成的。

速记属性grid看起来有些吓人，但这仅是因为它很灵活。他说：一次填充一行网格，生成尽可能多的行；制作尽可能多的250px列，并平均分配剩余的空间。

CSS网格也方便放置<dl>，这一直是一个令人头疼的问题：一个<dl>包含任意数量的<dt>，其后是任意数量的<dd>（包括零）。以前，唯一的样式设置方法是float，表示宽度固定。现在，您只需在第一列中指定<dt>，并在第二列中指定<dd>，剩下的工作将由CSS网格完成。

它在真实页面上的外观如何？带有边栏的故事？看看有多简单：

body {
    display: grid;
    grid-template:
        "header         header          header"
        "left-sidebar   main-content    right-sidebar"
        "footer         footer          footer"
        / 1fr           6fr             1fr
    ;
}
body > header {
    grid-area: header;
}
#left-sidebar {
    grid-area: left-sidebar;
}
/* ... etc ... */

做完了 简单。在标记中列出详细信息的顺序也无关紧要。

另一方面


网络仍然是一场灾难。许多人甚至不知道flexbox和grid现在几乎得到了普遍支持。但是考虑到从早期的规范到广泛的实施需要花费多长时间，我不能怪他们。就在昨天，我看到了一个崭新的小型站点，主要由大量的各种宽度的“缩略图”组成，并且使用了浮标！甚至没有inline-block！我不知道是谁教给了他们这些棘手的技巧，以及为什么他不对flexbox说话。

但更糟糕的是，我仍然经常遇到使用JavaScript进行整个布局的网站。如果您使用uMatrix脚本阻止程序您的第一个经验是一堆文字与另一堆文字重叠。这真的退后一步了吗？仅在执行脚本时，标题和侧边栏才能正确定位是什么意思？这不像加载没有CSS的页面一样-以纯HTML格式，默认情况下没有任何内容可以重叠！您必须有意这样做！

然后是移动网络，尽管有很多良好的意图，但实际上这是一个坏主意。这个想法是在与常规站点匹配的手机屏幕上使用CSS媒体查询，但是大多数主要站点都具有完全独立的移动版本。这意味着该移动站点没有很多重要功能，而您不得不笨拙地在手机上对其进行导航，或者该站点的完整版本充满了没人真正需要的废话。

即使在Google文档/表格/等版本中。以Android为例，只有网络版功能的5％。我不知道该怎么办。

未兑现的未来期权


我不知道CSS会如何进一步发展，尤其是现在flexbox和grid解决了我们所有的问题。朦胧地意识到，正在进行一些更广泛的数学支持的工作，可能还有一些更改颜色的功能，例如Sass。有一个绘画API，可让您使用Canvas API使用JavaScript动态生成背景，这非常酷。显然，在规范中，我已经attr()可以计算任何属性的值。这看起来很酷，甚至可以允许您完全在CSS中实现HTML表，但是您可以对变量执行相同的操作。我的意思是，“自定义属性”（正式名称）。我更关心:is()匹配选择器列表和子网格用于嵌套子网。

列出计划中尚未执行的事情要容易得多。

  • display：自从版本2（第98版开始）以来，磨合一直是CSS的一部分，但大多数情况下不支持。想法是将一个块插入下一个块。例如，此代码：

    <h2 style="display: run-in;">Title</h2>
<p>Paragraph</p>
<p>Paragraph</p>

    对应于这样的输出：

    标题  段落
    段落

    而且，嗯，我开始理解为什么不支持此功能。它曾经存在于WebKit中，但是它可能无法操作，以至于六年前被删除。

  • « » 2000-, , . , ( ), . , , , , .

    , Chrome , .

  • , CSS , CSS -. 2 :

    … , .

    , . . Firefox userContent.css URL- , .

    , , Stylish, , (, - , . Stylus).

  • (, ) . :checked. :

    <label><input type="checkbox"> Description of what this does</label>

    … CSS <label>, . () jQuery :has():

    /* checkbox label turns bold when checked */
label:has(input:checked) {
    font-weight: bold;
}

    CSS 3, , , , . , , , , “”. :

    label:subject input:checked {
    font-weight: bold;
}

    !:

    !label input:checked {
    font-weight: bold;
}

    , , , , … :has()! , JavaScript, , , . , , .

  • <style scoped> , CSS <style> . , (, ) CSS . , , DOM .

  • , -, , HTML… , JavaScript , , . JS. .

  • <blink> <marquee>. RIP. , CSS-.


你还在这里？现在都结束了。该回家了。

并且，如果出于某种原因您不使用iPhone（通常禁止其他浏览器引擎），则也许可以为使用Firefox（包括在电话上）与Blink单文化的对抗做出贡献。这比微软做过的任何事情都要糟糕得多，但是出于某种原因我们只是接受它...

More articles:


All Articles