Question

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

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

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

是不可能的

Answer 1

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

Answer 2

因此，例如，将无序列表的初始样式设置为none：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>

清洁渐进增强

2 个答案: