设计禁用 CSS 的页面答案

【问题标题】：Designing pages with CSS disabled设计禁用 CSS 的页面
【发布时间】：2009-01-28 11:29:43
【问题描述】：

我目前正在设计一个使用深色背景的网站，出于兴趣，我禁用了 CSS 并查看了它。因为它已经在语义上进行了标记，没有样式，它仍然是一个连贯的文档，除了我的标题图像是白色的，因为默认的背景颜色也是白色的，所以你根本看不到标题。（标题被标记为 h1/h2/h3，然后 Javascript 将它们替换为图像）。

现在我知道对于没有 CSS 但有 javascript 的用户来说，这是一个很小的边缘案例，所以这是一个非常理论而非实际的问题，但我应该回到旧的和过时的方式吗设置背景颜色：

<body bgcolor="#333333">

..这样你仍然可以看到白色图像？

【问题讨论】：

嗯，白色文本上的白色图像。你没有使用透明的PNG是吗？如果你是，那么你有更大的问题。
对于需要符合第 508 节的网站来说，这不是一个理论上的问题。
老实说，我不明白你为什么要这样做。正如 Eddie 所说，这些方法被贬值是有原因的，并且很少有用户使用无法处理 CSS 的浏览器。
没有启用 javascript 比没有启用 css 更常见。您应该使用 css 而不是使用 javascript 将标题替换为图像。
@simon，回复：透明 PNG .. 是的，它们是 .. 搞砸 IE6。 @Kristian，如果 JS 被禁用，那么用户仍然会得到标题文本，这对我来说很好。

标签： html css

【解决方案1】：

我通常也通过 CSS 插入标题图像。

<h2 class="my-heading"><span class="hide">My Heading</span></h2>

然后

.my-heading {
    width: 100px;
    height: 24px;
    display: block;
    background: #fff url(image/my-heading.jpg) top left no-repeat;
}

.hide {
    display: none;
}

让非 CSS 环境中的用户获得文本版本一。

编辑：感谢d03boy 提供了更好的替代方法（文本缩进：-9999px;）和Karan Bhangui 指出丢失的东西（我的错）。检查评论部分。

编辑 2：谢谢Traingamer。下次我一定会仔细检查。 ;)

【讨论】：

我使用 text-indent: -9999 隐藏文本
是的，如上所述，跨度是不必要的。其次，标题不需要display: block吗？
是的，这也是一个不错的方法。只要隐藏文本并通过 CSS 引入图像，您就明白了。 :)
呃哦，我忘了。谢谢卡兰。
我确定您的意思是 .my-heading 而不是 #my-heading - 不过答案很好。对背景和默认背景颜色使用 css 将得到所需的结果。

【解决方案2】：

不，你不应该。这些属性被弃用是有原因的。有更好的方法来解决这些问题。正如其他人建议的那样，让 Javascript 检测 CSS 是否被禁用，这样它就不会在这些情况下进行更改。

禁用 CSS 的普通用户期望看到的东西与创建者所期望的不完全一样。要处理使用替代浏览器的用户（例如盲人用户），请确保您完全准确地填充图像的 ALT 标签等。

【讨论】：

什么！如果有人没有启用 css，他们可能会启用 javascript
这是问题作者所问的情况。我同意这不太可能。

【解决方案3】：

为您的 JS 添加一些智能。我不知道如何在 JS 中做到这一点，但检测 CSS 是否被禁用，然后做一些不同的响应。 JS 是让你的页面不可读的罪魁祸首，所以它应该有解决方案。将修复放在样式标签中只会导致更多复杂性。

例如，没有 CSS 的人可能也不支持样式标签！此外，它可能是一个有屏幕阅读器的盲人用户，他们根本没有任何文字，而图像反而是相当侮辱性的。最好设置您的 ALT 文本等。

【讨论】：

【解决方案4】：

非编码解决方案：
在标题图像周围添加暗边怎么样？在正常的深色背景下，标题图像/文字周围的深色边缘不会太突兀；同时，当 css 被禁用时，标题图像/文本仍然可以作为轮廓读取。

【讨论】：

如果网站使用非纯色背景（例如渐变），那会很头疼。不过，好点。