Mejora progresiva limpia
-
26-10-2019 - |
Pregunta
Estoy usando una mejora progresiva para construir un sitio web. Esto incluye menú, presentación de diapositivas, etc. Los elementos se incluyen en la página como listas desordenadas, luego JavaScript aplica el formato.
Mi preocupación: ¿Cómo puedo evitar el flash de contenido sin formato, donde las listas desordenadas son visibles antes de aplicar el formato? ¿Hay mejores prácticas para esto?
IMPORTANTE: El sitio debe seguir siendo amigable con SEO y accesible (es por eso que estoy usando una mejora progresiva en primer lugar). Entonces, por ejemplo, está fuera de cuestión establecer el estilo inicial de las listas desordenadas para mostrar: Ninguna.
Solución
Entonces, por ejemplo, está fuera de cuestión establecer el estilo inicial de las listas desordenadas para mostrar: Ninguna.
Puede indirectamente hacer que el estilo se ajuste a display: none
Cuando detectas que JavaScript está disponible usando CSS y se ejecuta algún script antes de que se incluya cualquier contenido:
<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>
Otros consejos
Use CSS para formatear en lugar de JavaScript.