Un destello de contenido sin estilo ( FOUC , también 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 muestra el página antes de recuperar toda la información. La página se corrige sola tan pronto como se cargan y aplican las reglas de estilo; sin embargo, el cambio puede distraerlo. Los problemas relacionados incluyen destellos de texto invisible (FOIT) y destellos de texto falso (FOFT). [1] [2]
Información técnica
El problema se documentó en un artículo llamado "Flash of Unstyled Content". [3] Al principio, FOUC parecía ser un problema de navegador exclusivo de Internet Explorer, pero luego se hizo evidente en otros navegadores, [4] [5] y desde entonces se ha descrito como "una epidemia de Safari ". [6]
FOUC es indiferente a los cambios en las versiones CSS o HTML . El problema se origina en 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 crea el modelo de objetos de documento sobre la marcha. El navegador puede optar por mostrar primero el texto, que puede analizar más rápido.
FOUC es más frecuente ahora que las páginas HTML son más aptas para hacer referencia a múltiples 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 insertado fuera del sitio, 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 anima a algunos navegadores a esperar hasta que se recopilen todos los datos de estilo antes de aplicarlos.
Con la llegada de las bibliotecas de JavaScript como jQuery que se pueden emplear para definir y aplicar más el estilo de una página web, FOUC también se ha vuelto más prominente. En un intento por evitar el contenido sin estilo, los desarrolladores de aplicaciones para el usuario pueden optar por ocultar todo el contenido hasta que esté completamente cargado, momento en el que se activa un controlador de eventos de carga y aparece el contenido.
Para emular un FOUC, los desarrolladores pueden usar complementos de navegador que son capaces de deshabilitar el CSS de una página web sobre la marcha. Firebug y Async CSS son estos complementos.
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 Google Chrome versión 50, 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, lo que afectó 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 se incluían sus fuentes en sitios web de terceros para evitar el comportamiento de renderizado no deseado. [7]
Referencias
- ↑ a b c Tim Brown (3 de junio de 2016). "Respecto al Flash de texto sin estilo en Chrome 50" . Blog de Adobe Typekit . Adobe Systems . Archivado desde el original el 1 de septiembre de 2016 . Consultado el 9 de agosto de 2016 .
- ^ a b c Chris Coyier (1 de abril de 2015). "FOIT, FOFT" . Trucos CSS . Consultado el 9 de agosto de 2016 .
- ^ "Destello de contenido sin estilo (FOUC)" . Robot azul. 2001. Archivado desde el original el 13 de mayo de 2015 . Consultado el 12 de octubre de 2012 .
- ^ "Destello de contenido sin estilo (FOUC)" . Bugzilla @ Mozilla . Consultado el 14 de octubre de 2016 .
- ^ "Chromium Bugs que contienen 'FOUC ' " . bugs.chromium.org . Consultado el 14 de octubre de 2016 .
- ^ Dave Hyatt (1 de septiembre de 2006). "El problema de FOUC" . Surfin 'Safari . El proyecto de código abierto WebKit . Consultado el 16 de octubre de 2012 .
El problema de FOUC normalmente sería una ocurrencia 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 acceden a información de diseño que a menudo ni siquiera terminan usando en la página, el problema de FOUC es mucho más grave de lo que debería ser.
- ^ Bram Stein (28 de julio de 2016). "Cambios en la publicación de fuentes web en Typekit" . Blog de Adobe Typekit . Adobe Systems . Consultado el 9 de agosto de 2016 .