网页设计黑客名人堂

我们网页设计师一直是一群狡猾的人。 如果我们需要实现特定的外观或功能，我们通常可以拼凑出一个解决方案。 即使没有特定的标准或工具来指导我们，情况也是如此。 这就是网页设计黑客概念发挥作用的地方。

黑客是一种创造性的，通常是迂回的方法，可以使网站看起来或以某种方式工作。 有时，它们带有负面含义。 例如，基于 HTML 表格的布局被正确地嘲笑为屏幕阅读器无法访问。 但并非所有的黑客都是坏事。

事实上，它们的部署是出于推动可能性极限的需要。 网络总是有其局限性，设计师们使用黑客来尝试绕过它们。

有了这个，让我们来看看过去几年中一些最有用和最流行的网页设计技巧，这些技巧是受 Twitter 与其他设计师讨论的启发。 虽然他们不一定能达到我们今天的标准，但他们在他们自己的时代是名人堂。

布局：HTML 表格和 CSS 浮动

我们的第一个选择将一起进入这个虚拟的名人堂。 尽管它们各自的峰值使用相隔数年，但它们基本上用于完成相同的事情：多列布局。

HTML 表格

在 CSS 出现之前，早期的网页都是单栏的。 没有填充或边距，也没有将内容放置在水平列中的标准方法。 也就是说，直到一些有进取心的人决定为此目的使用表格。

当然，HTML 表格是用来保存表格数据的，而不是页面布局。 但在 CSS 出现之前，它们实际上是完成工作的一种有效方式。

CSS 浮点数

表格有很多缺点——包括前面提到的可访问性问题。 它们在浏览器中的渲染速度也很慢。 因此，当 CSS 浮动被引入时，它被视为网页设计师的游戏规则改变者。

浮点数不是 HTML 标记，因此它们更易于访问并且可以提高性能。 突然之间，多列布局可以通过 CSS 实现，并且可以更好地适应屏幕大小等内容。

然而，花车并没有把我们带到应许之地。 如果您希望列的高度相同，则必须实施额外的 clearfix hack。

这些项目中的每一个在用于其最初预期目的时仍然非常有用。 但是对于布局，他们的日子已经结束了。

元素间距：不间断空格 (   ) 和 Spacer.gif

注重细节的网页设计师经常寻找将元素空间缩小到精确像素的方法。 再一次，这在当时并不容易。 因此，不间断空格 ( ) 和 spacer.gif 用于获得对间距的更多控制。

非中断空间 (   )

想要水平碰撞元素，但不居中或右对齐？ 添加一些不间断的空格就可以了。

然而，这并不是一门精确的科学。 每个空间的实际大小取决于字体系列和字体大小。 即使考虑到这些差异，根据访问者使用的浏览器和操作系统，这种 hack 的外观仍然可能有所不同。

间隔.gif

这种更准确的间距技巧是通过创建透明的 .GIF 图像（通常命名为spacer.gif ）并将其放入页面中来实现的。 简洁的方面是，因为它是一个透明的图像，设计师可以将高度和宽度设置为任何像素量，而不会对外观或性能产生负面影响。

CSS 使这两个黑客都过时了。 但是你不知道 WordPress Gutenberg 编辑器有一个 Spacer 块，它几乎可以做同样的事情吗？ 它只是表明需求仍然存在。

排版：基于图像的文本

对这个的需求非常简单。 早期的网络基本上仅限于安装在用户系统上的字体。 当然，设计师无法知道用户可以使用的所有字体——除了 Times New Roman、Georgia、Arial 和 Helvetica 等基本字体。

随之而来的是一种糟糕的决定，即在 Photoshop 中创建充满文本的图像。 虽然这允许使用几乎任何字体，但它是以牺牲可访问性为代价的。 此外，使用图像代替 HTML 标题标签也会破坏页面的语义——可能会破坏 SEO。

粘性标题和导航：框架

HTML 框架可能领先于他们的时代，因为我们曾经使用它们的许多任务现在都通过 CSS 和 JavaScript 完成。

这个概念相当简单。 布局中的每个单独的“框架”实际上都是它自己的页面。 这是一种将页眉、页脚或导航与网站其余内容分开的简单方法。 例如，对导航进行更改意味着单个文件中的单个更改。 它类似于服务器端包含的功能，只是包含了一些其他设计优势。

其中最主要的是创建“粘性”标题和导航的能力。 当用户滚动浏览内容时，他们仍然可以轻松地浏览网站。

这种技术达到了它的目的，但远非理想。 就不同的屏幕尺寸而言，它的适应性不是很好，对 SEO 也不是很好。 还有一些关于可能从恶意 URL 加载框架的安全问题。

图像优化：切片图像

在宽带普及之前的日子里，图像优化至关重要。 即使是 50kb 的图像也可能会因连接速度较慢而使页面变重。

软件巨头 Adob​​e 提供了一个有趣的解决方案。 使用他们的 ImageReady 软件，设计师可以将单个图像分割成任意数量的小块。 然后可以优化每个单独的切片，理论上可以快速下载。

但这还不是全部。 然后，该软件可以将切片导出到 HTML 表格中。 从那里，您可以将该 HTML 复制并粘贴到您的页面中。

这种技术的问题是双重的。 首先，表格布局可能需要额外的时间来渲染 - 可能会破坏您已实现的任何优化。 其次，维持它可能是一种真正的痛苦。 例如，将导航项添加到大型标题图形可能需要从一组全新的切片重新开始——因此需要更改模板。

虽然图像优化仍然很重要，但值得庆幸的是，宽带让我们在处理大文件时有了更多的回旋余地。 即便如此，现代版本的 Photoshop 仍然提供图像切片和 HTML 导出功能。

放置 Internet Explorer： <!--[if IE]>

直到今天，听到网页设计师（包括我自己）诅咒 Internet Explorer 的顽固存在仍然很平常。 它的遗产继续存在，部分原因是一些用户根本不会放弃它。

正因为如此，我们似乎永远在破解 IE 的许多专有怪癖和限制。 多年来，这包括使用条件注释来检测 IE 用户并提供替代样式。

它有点通用，因为您可以将样式应用于所有版本的 IE <!--[if IE]> ，或者针对那些使用旧版本的<!--[if lt IE 11]> 。 您也可以反向使用它，寻找大于或等于特定版本<!--[if gte IE 10]>的版本。

微软一定对网页设计师有些同情，因为它使这些条件注释在 IE 中起作用。 值得庆幸的是，他们的新 Edge 浏览器不需要这样的废话。

要记住的网页设计技巧

我们名人堂中的黑客当然不是网页设计师使用的唯一黑客。 有无数的变通方法帮助我们完成了看似不可能的事情。 但是，这份清单的不同之处在于它们的大量使用，在某些情况下，还得到了大公司的支持。

也许我们能说的关于它们的最好的事情就是它们起作用了。 我们用它们作为达到目的的手段。 当然，它们可能是通过磨损的胶带粘在一起的，但是让这种高尚的设计在浏览器中实际呈现感觉就像是一项真正的成就。

更好的是，他们帮助为今天的网络铺平了道路。 此列表中的大多数项目已被 HTML 和 CSS 标准取代，这对每个人都有好处。