清洁渐进增强

发布于 2024-11-14 18:06:20 字数 209 浏览 7 评论 0原文

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

我关心的是：如何避免出现未格式化内容（在应用格式之前无序列表可见）？有这方面的最佳实践吗？

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

入画浅相思 2024-11-21 18:06:20

使用 CSS 代替 JavaScript 进行格式化。

回复收藏 0 原文

败给现实 2024-11-21 18:06:20

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

So for example it is out of question to set the initial style of the unordered lists to display:none.

You can indirectly cause the style to get set to display: none when you detect JavaScript is available by using CSS and some script run before any of the content is included:

<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>

回复收藏 0 原文

~没有更多了~