清洁渐进增强

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

我担心的是：如何避免未格式化内容的闪现，即在应用格式化之前，无序列表是可见的？有最佳实践吗？

重要提示：网站必须保持SEO友好和可访问性（这就是为什么我首先使用渐进增强）。因此，例如，设置无序列表的初始显示样式是毫无疑问的：none。

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

因此，例如，设置无序列表的初始显示样式是毫无疑问的：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>

相关内容

最新更新

热门标签：