Tumblr的逐像素箭头

Question

如果你在这里看看：

http://www.tumblr.com/explore

您会注意到“探索”菜单项上的背景框和小三角形。我非常喜欢Tumblr的设计，所以我一直在尝试从中学到什么。当我使用Chrome的方便开发人员的工具时，我看到，对于小三角形，他们逐个像素地“画”了它。他们有6个像素高的div。第一个是11个像素宽，第二个是9个，第三个是7 ......

这引起了我脑子里各种各样的小旗帜，但我刚刚进入网络开发，所以我想我会问那些了解它的人。

那么，你们所有的优点，使用HTML元素而不是使用图像逐像素设计的优缺点是什么？

Answer 1

优点是它在浏览器中是相同的，甚至是IE6，并且它不会为背景图像方法提供额外的HTTP请求。

当然，缺点是增加了HTML和CSS权重，减少了语义，并且代码看起来更加混乱。即使使用图像，更好的替代方案是使用伪元素，其形状看起来像三角形。它不会带走干净的代码或语义。

Answer 2

虽然这确实在其他人指出的IE6中实现了透明度，但这并不是很有说服力，因为你总是可以为这个应用程序使用透明的GIF。

我想说这个hack在这里只需少量调用服务器。这有两个主要好处：

• 即时可见性。如果渲染图像所需的所有信息都在CSS和HTML中，则可以尽快呈现。没有额外的网络电话。
• 走出关键路径。此页面有很多要加载的文件。由于浏览器限制了与服务器的并发连接数，因此您可以从启动过程中删除的任何文件都会缩短加载时间。

另一种方法是使用包含透明PNG的数据URL。这更好，因为它不依赖于黑客，但更糟糕的是IE6和IE7不能支持它。更常见的做法是将页面使用的所有图像捆绑在精灵图像中，并使用带有background-position的CSS背景裁剪出精确的图像。这样做的缺点是仍然需要网络呼叫，但如果您不需要IE6或IE7，则可以与数据URL捆绑在一起。

缺点当然是这是一种黑客行为，并不是正确的做事方式。

总结：

赞成

• 快速渲染
• 无需网络电话
• 改进了页面加载时间
• 跨浏览器支持

CONS

• 这不是你应该做的事情。

我个人喜欢它，如果必须的话，我会完全做类似的事情。