我们网页设计师一直都是一群狡猾的人。如果有一个特定的外观或功能,我们需要实现,我们通常可以拼凑一个解决方案。即使没有具体的标准或工具来指导我们,情况也是如此。这就是网页设计黑客的概念发挥作用的地方。
黑客是创造性的,通常是迂回的方法,使一个网站的外观或工作以某种方式。有时,它们带有一种消极的内涵。例如,基于HTML表的布局被正确地嘲笑为屏幕阅读器无法访问.但并不是所有的黑客都是坏人。
事实上,他们的部署是出于对可能发生的事情施加压力的需要。网络总是有它的局限性,设计师们用黑客来试图绕过它们。
在此之后,让我们看一看过去几年中最有用和最流行的网页设计黑客,因为它的灵感来自于推特讨论和其他设计师一起。虽然他们不一定与我们今天的标准相一致,但在他们自己的时代,他们却是农民的殿堂。
布局:HTML表和CSS浮动
我们的第一批选择将一起进入这个虚拟的名人堂。虽然它们各自的峰值使用时间相隔数年,但它们本质上是用来完成相同的任务的:多颜色布局。
HTML表
在css到达现场之前,早期的网页只是单列事件。没有填充或边距,也没有将内容放置在水平列中的标准方法。也就是说,直到某个有进取心的灵魂决定使用桌子来达到这个目的。
当然,HTML表是用来保存表格数据的,而不是页面布局。但是,在CSS出现之前,它们实际上是完成任务的有效方法。
CSS浮动
表有许多缺点--包括上述可访问性问题。它们在浏览器中呈现的速度也很慢。所以,当CSS浮动介绍,它被看作是一个改变游戏的网页设计师。
浮点数不是HTML标记,所以它们更容易访问,可以提高性能。突然之间,通过CSS可以实现多颜色的布局,并且可以更好地适应屏幕大小这样的事情。
然而,浮标并没有把我们一路带到应许之地。如果希望列具有相同的高度,则附加清除攻击必须执行。
今天,这些物品中的每一件都是非常有用的,当它们被用于原来的目的时。但对于布局,他们的日子是谢天谢地完成的。
![Sketch of a website UI.](https://speckyboy.com/wp-content/uploads/2020/07/hack-hall-of-fame-01.jpg)
元素间距:不间断空间( )和Spacer.gif
面向细节的网页设计师经常在寻找空间元素到精确像素的方法。再说一次,这在当时可不那么容易。因此,使用非破缺空间( ;)和间隔.gif来获得对间隔的更多控制。
不间断空间( )
想要在水平方向上撞击一个元素,但不需要对中或对齐?增加几个不破坏的空间就能做到这一点。
然而,这并不是一门精确的科学。每个空格的实际大小取决于字体系列和字体大小。即使考虑到这些差异,根据访问者使用的浏览器和操作系统,这次黑客攻击的外观也可能有所不同。
Spacer.gif
这种更精确的间隔攻击是通过创建透明的.gif映像(通常命名为Spacer.gif)并将其放入页面中。整洁的一面是,因为它是一个透明的图像,设计师可以将高度和宽度设置为任何像素量,而不会对外观或性能产生负面影响。
CSS使这两种黑客都过时了。但你难道不知道WordPress古登堡编辑器有一个Spacer块可以做同样的事情吗?这仅仅是为了表明需求仍然存在。
![Resizing arrows.](https://speckyboy.com/wp-content/uploads/2020/07/hack-hall-of-fame-02.png)
排版:基于图像的文本
这个需要很简单。早期的Web基本上仅限于安装在用户系统上的字体。当然,设计师们无法了解用户可以访问的所有字体--除了诸如TimesNewRoman、GeorgiaArial和Helvetica等基础知识之外。
随之而来的是一种可怕的决定,那就是创建满是文本的图像。Photoshop。虽然这允许使用几乎任何字体,但它是以可访问性为代价的。此外,使用图像代替HTML标题标记也会消除页面的语义--可能会对SEO造成损害。
![A person typing on a laptop computer.](https://speckyboy.com/wp-content/uploads/2020/07/hack-hall-of-fame-03.jpg)
粘性标题和导航:框架
HTML框架也许是在他们的时代之前,因为我们曾经用过的许多任务现在都是通过CSS和JavaScript完成的。
这个概念相当简单。布局中的每个单独的“框架”实际上是它自己的页面。这是一种将页眉、页脚或导航从站点的其他内容中分离出来的简单方法。例如,对导航进行更改意味着单个文件中的单个更改。它与服务器端包含的DID类似,只是包含了一些其他的设计好处。
其中最主要的是创建“粘性”标题和导航的能力。当用户浏览内容时,他们仍然可以轻松地浏览站点。
这项技术达到了目的,但远非理想。它在不同屏幕尺寸上的适应性不强,不是很好对于SEO也是如此。对于可能从恶意URL加载框架也存在一些安全问题。
![An assortment of picture frames.](https://speckyboy.com/wp-content/uploads/2020/07/hack-hall-of-fame-04.jpg)
图像优化:切片图像
在宽带普及之前,图像优化是至关重要的。即使是一张50 KB的图像,也能在缓慢的连接过程中称下一页。
软件巨头Adobe提供了一个有趣的解决方案。带着意象准备软件设计人员可以将一幅图像分割成任意数量的小片。然后可以对每个单独的切片进行优化,理论上使它们可以快速下载。
但这还不是全部。然后,该软件可以将切片导出到HTML表中。从那里,您可以复制并粘贴HTML到您的页面。
这种技术的问题有两方面。首先,表布局可能需要额外的时间来呈现--可能会扼杀您已经实现的任何优化。其次,这可能是一个真正的痛苦维持。例如,将导航项添加到大型标头图形可能需要从一组全新的片重新开始,因此需要更改模板。
虽然图像优化仍然很重要,但值得庆幸的是,宽带允许我们在大文件方面有更多的回旋余地。即使如此,Photoshop的现代版本仍然提供图像切片和HTML导出。
![A sliced image in Photoshop.](https://speckyboy.com/wp-content/uploads/2020/07/hack-hall-of-fame-05.jpg)
安抚Internet Explorer:<!--[if IE]>
直到今天,听到网页设计师的声音还是很平常的。包括我自己)诅咒Internet Explorer顽强的存在。它的遗产生命还在继续,部分原因是有些用户根本不愿放弃它。
正因为如此,我们似乎永远都在绕开IE的许多专利怪癖和限制。多年来,这包括使用条件注释检测IE用户并提供其他样式。
它有些多才多艺,因为您可以将样式应用于所有版本的IE。<!--[if IE]>,或者针对那些使用旧版本的用户。<!--[if lt IE 11]>。您还可以反向使用它,查找大于或等于特定版本的版本。<!--[if gte IE 10]>.
微软一定有一些同情的网页设计师,因为它使这些有条件的评论工作在IE。谢天谢地,他们新推出的Edge浏览器不需要这么胡说八道。
![Code displayed on a screen.](https://speckyboy.com/wp-content/uploads/2020/07/hack-hall-of-fame-06.jpg)
网页设计黑客要记住
在我们的名人堂的黑客当然不是唯一使用的网页设计师。有数不清的解决办法帮助我们做了看似不可能的事情。但是,这份清单的不同之处在于它们的大量使用,在某些情况下,它们得到了大公司的支持。
也许我们能对他们说的最好的事情就是他们成功了。我们用它们作为达到目的的手段。当然,它们可能是通过磨损胶带把它们粘合在一起的,但是在浏览器中实现这种高尚的设计感觉是一项真正的成就。
更好的是,他们帮助为今天的网络铺平了道路。此列表中的大多数项已被HTML和CSS标准所取代,这对每个人都有好处。