Clean Progressive Enhancement

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

Question

J'utilise l'amélioration progressive de construire un site Web. Cela inclut le menu, diaporama, etc. Les éléments sont inclus dans la page sous forme de listes à puces, puis JavaScript applique la mise en forme.

Ce qui me préoccupe: comment puis-je éviter le flash de contenu non formaté, où les listes à puces sont visibles avant la mise en forme est appliquée? Sont les meilleures pratiques là-bas pour cela?

Important: le site doit rester SEO convivial et accessible (ce qui est la raison pour laquelle j'utilise l'amélioration progressive en premier lieu). Ainsi, par exemple, il est hors de question pour définir le style initial des listes à puces pour afficher:. Aucun

Était-ce utile?

La solution

Ainsi, par exemple, il est hors de question pour définir le style initial des listes à puces pour afficher:. Aucun

Vous pouvez indirectement la cause du style à se mettre à display: none lorsque vous JavaScript détectez est disponible en utilisant CSS et une exécution du script avant tout le contenu est inclus: 

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

Autres conseils

Utilisez CSS pour le formatage au lieu de JavaScript.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top