HTML5Boilerplate和图像替换类text-indent -999em

Question

我一直在为我的大多数项目使用HTML5Boilerplate,因为它是一个很棒的框架,但我和其他开发人员一直在关于图像替换类和text-indent:-999em的使用.

他给我发了这两个链接:

我知道HTML5Boilerplate团队在整理样式表时做了很多研究,我知道这是许多开发人员使用的常用技术.你们怎么看待它？我应该开始使用其他技术,以便我们的网站不会受到惩罚,还是可以继续使用它？

谢谢!

Answer 1

这两个链接都特指徽标，其中最语义化的路线是将徽标添加为具有 alt 属性的图像标签：

<img src="/path/to/logo.png" alt="Foo bar baz! The best way to fizz buzz" />

它们没有涵盖您可能想要使用普通旧图像替换的情况。随着嵌入字体变得越来越普遍和受支持，图像替换不再是一个问题，因为它不太常见，但是，在许多情况下，唯一的出路就是使用替换图像。

这在标题上尤其常见，因为艺术家往往想要华丽的装饰。

如果可能，请使用带有 alt 属性的内联图像，因为这是最语义化的显示方式。问题是，如果您使用 CMS，您可能无法直接访问标记，因此在许多情况下，解决办法是使用 CSS 或 JS 图像替换。

如果您必须使用 CSS，请不要太担心text-indent: -9999px;. 合法的替代品不会让你被谷歌列入黑名单，只是不要试图通过试图向用户隐藏只有谷歌可见的内容来欺骗系统。