清洁渐进增强答案

【问题标题】：Clean Progressive Enhancement清洁渐进增强
【发布时间】：2011-06-11 09:22:36
【问题描述】：

我正在使用渐进增强来构建网站。这包括菜单、幻灯片等。这些项目作为无序列表包含在页面中，然后 JavaScript 应用格式。

我的担忧：如何避免未格式化内容的闪烁，在应用格式化之前无序列表是可见的？有这方面的最佳做法吗？

重要提示：网站必须保持对 SEO 友好且易于访问（这就是我首先使用渐进增强的原因）。因此，例如将无序列表的初始样式设置为 display:none 是没有问题的。

【问题讨论】：

您是真的看到了一些没有样式的内容，还是只是假设您会看到一个？
完全错过了关于 JavaScript 应用格式的部分……不要那样做，这不是渐进增强。使用 CSS 进行样式设置，然后为行为添加 JavaScript。
嗯......两者兼而有之。我实际上在某些情况下会看到它，具体取决于浏览器（例如 Firefox）、内容（例如图像）或应用格式的时间（例如 document.ready）。
z-index 可能是你的朋友。给出无样式的内容 z-index:0;。给页面正常的背景 z-index:1;。然后，使用 JavaScript，给出现在样式的内容 z-index:2;。这对我有用，而且我没有注意到排名有任何变化。

标签： javascript css seo accessibility progressive-enhancement

【解决方案1】：

使用 CSS 而不是 JavaScript 进行格式化。

【讨论】：

但是，对于幻灯片或内容滑块，您将如何做到这一点？正如我在问题中所说，“显示：无”不符合要求。
只传输一张带有原始响应的图像。提供下一张和上一张幻灯片的链接。使用 JavaScript 将链接替换为 XmlHttpRequest 调用。
嗯，这实际上是我试图避免的（参见我关于 SEO 和可访问性的观点）。
特别是 SEO 和可访问性从我描述的方法中受益：该网站可以在没有 CSS 和 JavaScript 的情况下使用。了解 CSS 的客户可以获得更好看的版本。了解 JavaScript 的客户端获得了更多的交互性。这就是渐进增强的全部意义所在。您可以用任何您想要的精美导航替换上一个和下一个链接。
我的理解是搜索引擎只会看到幻灯片/滑块的第一张图片（或第一个html内容）。他们不会看到其他幻灯片，因为稍后将通过 AJAX 加载这些幻灯片。最好的情况是，他们会在导航后面找到上一张和下一张幻灯片。

【解决方案2】：

例如，将无序列表的初始样式设置为 display:none 是没有问题的。

当您使用 CSS 检测到 JavaScript 可用并且在包含任何内容之前运行一些脚本时，您可以间接导致样式设置为 display: none：

<head>
    <style type="text/css">
        body.withjs #menu { display: none; }
    </style>
</head>
<body>
    <script type="text/javascript">
        document.body.className= 'withjs';
        window.onload= function() {
            ...do stuff with menu...
            document.getElementById('menu').style.display= 'block';
        };
    </script>
    ...
    <ul id="menu">
        ...
    </ul>
</body>

【讨论】：

我喜欢这样！附带问题：您如何看待其他隐藏技术，例如可见性隐藏或左 -9999px，而不是不显示？还是按照 Pete Wilson 的建议使用 z-index？
它在可访问性或 SEO 方面没有任何区别。使用定位或 z-index 通常用于解决显示或可见性的其他问题，特别是当内容包含与隐藏交互不良的插件时。
@Christophe, @bobince 我认为隐藏方法有所不同，但这取决于您优化的对象或对象。我真的不确定它是否会对 SEO 产生太大影响，但这实际上取决于 SE 在他们的算法中构建的内容，但众所周知，display:none 和 visibility hidden 可能不是辅助技术用户可访问性的最佳方法：为此，我更喜欢 text-indent 方法或 clip.. further reading with more links
@clairesuzy 感谢您的评论！又找到了关于裁剪方法的补充资料，还是没那么简单：yaccessibilityblog.com/library/css-clip-hidden-content.html