Home/ Questions/Q 6011329
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T02:14:41+00:00

I am using progressive enhancement to build a website. This includes menu, slideshow, etc.

  • 0

I am using progressive enhancement to build a website. This includes menu, slideshow, etc. The items are included in the page as unordered lists, then JavaScript applies the formatting.

My concern: how can I avoid the flash of unformatted content, where the unordered lists are visible before the formatting is applied? Are there best practices for this?

Important: the site must remain SEO friendly and accessible (this is why I am using progressive enhancement in the first place). So for example it is out of question to set the initial style of the unordered lists to display:none.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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