Cómo evitar el Flash de Contenido sin Estilo (FOUC) en tu sitio web
Seguramente has visto páginas web que cargan con contenido sin estilos y luego tardan unos segundos (o minutos) en mostrar el aspecto y la apariencia que realmente deberían tener. En diseño web, esta anomalía se conoce como el Flash de Contenido sin Estilo (FOUC, por sus siglas en inglés). La Figura A muestra un ejemplo de la anomalía FOUC en la portada de CNN Edición Estados Unidos donde no se cargó el CSS correctamente.
Figura A
Ver una vista ampliada de la Figura A.
En este artículo, compartiré algunos antecedentes sobre el FOUC y luego describiré formas de evitar que ocurra en tus sitios web o al menos reducir la posibilidad de que tus sitios se vean afectados por él, sin importar el navegador o dispositivo.
Una breve historia
Cuando se documentó por primera vez el FOUC en el artículo de 2001 "Flash of Unstyled Content", el problema parecía ser único de Internet Explorer. Luego, el fallo se extendió a Safari en 2006 y fue descrito en el artículo "El problema del FOUC". Ambos artículos expusieron la naturaleza de la irregularidad inherentemente relacionada con la representación del CSS correctamente en estos dos navegadores y su incapacidad para mostrar contenido estilizado de manera consistente. Indicaciones recientes muestran que el FOUC también ocurre con ciertas implementaciones de JavaScript y jQuery donde los scripts se utilizan para estilos, imágenes y contenido que generalmente tardan más o se quedan colgados después de la carga de la página.
Técnicas para minimizar el FOUC
La primera técnica se presenta en un tutorial sobre el FOUC de Brad Baxter. En este tutorial, se describe un método simple para minimizar el FOUC ocultando toda o parte de la página web hasta que se carguen todos los estilos y JavaScript, aplicando una clase llamada "js" como selector que oculta todo el contenido dentro de un contenedor con un id="fouc". El elemento "fouc" se muestra utilizando una función JavaScript getElementById que establece el valor de visualización a nivel "bloque".
Los ejemplos presentados en la breve presentación incluyen sugerencias de clases y nombres de id para los elementos <style> y <script>, así como la ubicación de los ejemplos de código dentro de los elementos <head> y <body> de la página web. La presentación también está disponible para su descarga como un PDF desde Google Docs. La captura de pantalla mostrada en Figura B muestra dos páginas del documento que representan los fragmentos de código que Brad comparte para manejar el FOUC.
Qué es la especificidad en CSS y cómo afecta a tus reglas de estiloFigura B
Ver una vista ampliada de la Figura B.
Otro tutorial breve sobre el FOUC que utiliza la misma técnica es presentado por John Polacek. Él utiliza el <style> y <script> con un método de JavaScript para establecer una clase "no-fouc" con una visualización igual a "ninguna", que oculta el contenido especificado hasta que la página se haya cargado por completo. El código también está disponible en GitHub Gist.
Otra lección sobre el FOUC que utiliza una técnica similar es la de Karl Swedberg. Él demuestra una forma de utilizar jQuery para evitar el FOUC cuando se utiliza JavaScript para aplicar estilos en la carga de la página web; incluso proporciona una página de prueba de demostración que muestra una lista resaltada en amarillo que está inicialmente oculta al cargar la página. En otra página de prueba de Karl, el FOUC se elimina virtualmente al colocar los scripts al final de la página. Uno de los principales puntos a tener en cuenta con la técnica <script> es asegurarse de colocar todos los scripts al final de la página web.
Una técnica similar se describe en la publicación del blog de Paul Irish "Avoiding the FOUC v3.0". Él utiliza un CSS único para los usuarios que no tienen JavaScript, por lo que no es necesario escribir ".js" delante de cada selector para funciones populares como acordeones, deslizadores de imágenes, entre otros. Su solución es agregar una clase "no-js" a la etiqueta html y luego agregar un <script> dentro de la etiqueta <head> que cambia nuevamente la clase a "js". No he probado este método, pero según Paul, este enfoque también se utiliza en Modernizr para establecer las clases en el elemento HTML cuando se carga el <body>.
Una técnica que es un "de cajón" para la mayoría de los desarrolladores web es incluir la etiqueta de enlace a las hojas de estilos dentro del <head> de los documentos de las páginas web. Steve Souders enfatiza este punto en su Regla #5: Coloca las hojas de estilos en la parte superior (que forma parte de su lista de 14 Reglas para Sitios Web con Carga más Rápida). En su página de la Regla #5, demuestra esto agregando la hoja de estilos al final del <body> justo antes de la etiqueta de cierre </body>. El FOUC en acción en esta página se puede ver como se muestra en Figura C con las capturas de pantalla antes y después.
Cómo Twitter ha cambiado mi vida y la forma en que consumo informaciónFigura C
Ver una vista ampliada de la Figura C.
Estoy seguro de que esta última técnica se utiliza en la mayoría de los desarrolladores web. Si bien algunas de las técnicas de JavaScript pueden estar en uso, es probable que no se utilicen tanto como podrían utilizarse. Te sugiero que pruebes estos métodos poco utilizados de evitar el FOUC y veas si puedes ganar la batalla con tus sitios web.
En Newsmatic nos especializamos en tecnología de vanguardia, contamos con los artículos mas novedosos sobre Desarrollo, allí encontraras muchos artículos similares a Cómo evitar el Flash de Contenido sin Estilo (FOUC) en tu sitio web , tenemos lo ultimo en tecnología 2023.
Artículos Relacionados