Un destello de contenido sin estilo ( FOUC , o destello de texto sin estilo ) [1] [2] es una instancia en la que una página web aparece brevemente con los estilos predeterminados del navegador antes de cargar una hoja de estilo CSS externa , debido a que el motor del navegador web procesa la página antes de que se recupere toda la información. [3] La página se corrige a sí misma tan pronto como se cargan y aplican las reglas de estilo; sin embargo, el cambio puede distraer. Los problemas relacionados incluyen el destello de texto invisible y el destello de texto falso . [1] [2]
_while_loading_a_HTML,_CSS_page.gif/1280px-Flash_of_unstyled_content_(FOUC)_while_loading_a_HTML,_CSS_page.gif)
El problema se documentó en un artículo llamado "Flash of Unstyled Content" [4] . Al principio, FOUC parecía ser un problema exclusivo de Internet Explorer , pero luego se hizo evidente en otros navegadores [5] [6] y desde entonces se ha descrito como "una epidemia de Safari ". [7]
Un destello de contenido sin estilo es indiferente a los cambios en las versiones CSS o HTML . Este problema, que no afecta al contenido principal, se origina a partir de un conjunto de prioridades programadas en el navegador. [ cita requerida ] A medida que el navegador recopila HTML y todos los archivos auxiliares a los que se hace referencia en el marcado, el navegador construye el Modelo de objetos del documento sobre la marcha. El navegador puede elegir mostrar primero el texto para poder analizarlo más rápidamente.
Los destellos de contenido sin estilo son más frecuentes ahora que las páginas HTML son más propensas a hacer referencia a varias hojas de estilo. Las páginas web a menudo incluyen referencias de estilo a medios distintos de la pantalla del navegador, como reglas CSS para impresoras y dispositivos móviles. Las páginas web pueden importar capas de archivos de estilo y hacer referencia a hojas de estilo alternativas. Los anuncios en línea y otro contenido externo insertado, como videos y motores de búsqueda, a menudo dictan sus propias reglas de estilo dentro de su bloque de código. La naturaleza en cascada de las reglas CSS alienta a algunos navegadores a esperar hasta que se hayan recopilado todos los conjuntos de datos de estilo antes de aplicarlos.
Con la llegada de bibliotecas de JavaScript como jQuery , que se pueden utilizar para definir y aplicar con más detalle el estilo de una página web, los destellos de contenido sin estilo también se han vuelto más prominentes. En un intento por evitar el contenido sin estilo, los desarrolladores front-end pueden optar por ocultar todo el contenido hasta que se haya cargado por completo, momento en el que se activa un controlador de eventos de carga y aparece el contenido, aunque una interrupción de la carga puede dejar una página en blanco, a la que sería preferible el contenido sin estilo.
Para emular un destello de contenido sin estilo, los desarrolladores pueden utilizar complementos del navegador que son capaces de deshabilitar el CSS de una página web sobre la marcha. Firebug y Async CSS son complementos de este tipo. Otras técnicas incluyen detener manualmente una página antes de que complete la carga de los componentes CSS. Otra opción implica el uso de herramientas de bloqueo de scripts.
Si bien, en 2016, se habían desarrollado varias técnicas diferentes para evitar comportamientos de visualización no deseados, [2] un cambio en el comportamiento de representación en la versión 50 de Google Chrome , por el cual se evita que las hojas de estilo inyectadas por JavaScript bloqueen la carga de la página, como lo requiere la especificación HTML5 , trajo la situación a la atención de los creadores de sitios web nuevamente, afectando particularmente a los usuarios de Typekit , un producto de tipografía web de Adobe Systems . [1] En 2 meses, Adobe había cambiado la forma en que sus fuentes se incluían en sitios web de terceros para evitar el comportamiento de representación no deseado. [8]
El problema de FOUC normalmente sería un suceso menor. Sin embargo, con la llegada de
Google AdSense
, FOUC se ha convertido en una epidemia
de Safari
. Debido a que estos anuncios de Google no solo ejecutan secuencias de comandos en línea, sino que también acceden a información de diseño que a menudo ni siquiera terminan utilizando en la página, el problema de FOUC es mucho más grave de lo que debería ser.