Clean Progressive Enhancement

StackOverflow https://stackoverflow.com/questions/6315140

Question

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.

Was it helpful?

Solution

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>

OTHER TIPS

Use CSS for formatting instead of JavaScript.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top