Noticias semanales de la plataforma: movimiento reducido, CORS, WhiteHouse.gov, ventanas emergentes y 100vw

En el resumen de esta semana, destacamos una propuesta para un nuevo popupelemento, verificamos el uso de prefers-reduced-motionen sitios galardonados, aprendemos cómo optar por el aislamiento entre orígenes, vemos cómo WhiteHouse.gov aborda la accesibilidad y advertimos sobre los peligros de 100vh.

¡Entremos en las noticias!

El nuevo popupelemento HTML está en desarrollo.

El 21 de enero, Melanie Richards del equipo de la plataforma web Microsoft Edge publicó una explicación de un elemento HTML propuesto popup(el nombre no es definitivo ). Unas horas más tarde, Mason Freed de Google anunció su intención de crear un prototipo de este elemento en el motor del navegador Blink. El trabajo en la implementación se está llevando a cabo en el número 1168738 de Chromium .

Una ventana emergente es un elemento de interfaz de usuario temporal (transitorio) y “desechable por luz” que se muestra en la ” capa superior ” de todos los demás elementos. El objetivo del popupelemento es que sea totalmente estilizable y accesible de forma predeterminada. A popuppuede anclarse a un elemento activador, como un botón, pero también puede ser un elemento independiente que se muestra al cargar la página (por ejemplo, una interfaz de usuario de enseñanza).

A popupse oculta automáticamente cuando el usuario presiona la Esctecla o mueve el foco a un elemento diferente (esto se llama despido ligero ). A diferencia del dialogelemento, solo popupse puede mostrar uno a la vez y, a diferencia del menuelemento obsoleto, popuppuede contener contenido arbitrario , incluidos elementos interactivos:

Nos imaginamos popupque es útil para varios tipos diferentes de IU emergente. Hemos elegido utilizar un menú de acciones como ejemplo principal, pero la gente usa patrones tipo ventana emergente para muchos tipos diferentes de contenido.

Los sitios web galardonados deberían respetar la preferencia de “reducir el movimiento”

A principios de esta semana, AWWWARDS anunció los ganadores de sus premios anuales a los mejores sitios web de 2020. Se premiaron los siguientes sitios web:

• Sitio del año: cornrevolution.com
• Sitio de desarrollador del año: kodeclubs.com
• Sitio de comercio electrónico del año: eiger-extreme.mammut.com
• Sitio móvil del año: sincronizado.studio
• Sitio del año, elegido por los usuarios: darknetflix.io

Todos estos sitios web son muy dinámicos y muestran movimiento de pantalla completa al cargar y durante el desplazamiento. Desafortunadamente, este tipo de animaciones pueden provocar mareos y náuseas en personas con trastornos vestibulares . Por lo tanto, se recomienda a los sitios web que reduzcan o desactiven las animaciones no esenciales a través de la prefers-reduced-motionconsulta de medios, que se evalúa como verdadera para las personas que han expresado su preferencia por el movimiento reducido (por ejemplo, la opción “Reducir movimiento” en las plataformas de Apple). Ninguno de los sitios web ganadores hace esto.

/* (code from animal-crossing.com) */@media (prefers-reduced-motion: reduce) {  .main-header__scene {    animation: none;  }}

Un ejemplo de un sitio web que hace esto correctamente es el sitio oficial del juego Animal Crossing del año pasado. El sitio web no solo respeta las preferencias del usuario a través de prefers-reduced-motion, sino que también proporciona su propio botón de alternancia “Reducir movimiento” en la parte superior de la página.

( a través de Eric Bailey )

Los sitios web ahora pueden optar por el aislamiento entre orígenes

El aislamiento entre orígenes es parte de una ” mejora de la seguridad a largo plazo “. Los sitios web pueden optar por el aislamiento entre orígenes agregando los siguientes dos encabezados de respuesta HTTP, que ya son compatibles con Chrome y Firefox:

Cross-Origin-Embedder-Policy: require-corpCross-Origin-Opener-Policy: same-origin

Una página aislada de orígenes cruzados renuncia a su capacidad de cargar contenido de otros orígenes sin su consentimiento explícito (a través de encabezados CORS) y, a cambio, la página obtiene acceso a algunas API potentes, como SharedArrayBuffer.

if (crossOriginIsolated) {  // post SharedArrayBuffer} else {  // do something else}

La Casa Blanca vuelve a comprometerse con la accesibilidad

El nuevo sitio web WhiteHouse.gov de la administración Biden se creó desde cero en solo seis semanas con la accesibilidad como máxima prioridad (“la accesibilidad era una prioridad”). El director de accesibilidad de Microsoft revisó el sitio y le dio el visto bueno .

La declaración de accesibilidad del sitio web (vinculada desde el pie de página del sitio) declara un “compromiso con la accesibilidad” y hace referencia directa a la última versión de las Pautas de accesibilidad al contenido web, WCAG 2.1 (2018). Esto es notable porque a las agencias federales de EE. UU. solo se les exige cumplir con las WCAG 2.0 (2008).

Las Pautas de Accesibilidad al Contenido Web son los estándares más ampliamente aceptados para la accesibilidad a Internet. … Al hacer referencia a las WCAG 2.1 (la última versión de las directrices), la administración Biden puede estar indicando una aceptación más amplia del modelo WCAG.

El valor CSS 100vwpuede causar una barra de desplazamiento horizontal inútil

En Windows, cuando una página web tiene una barra de desplazamiento vertical, esa barra de desplazamiento consume espacio y reduce el ancho del elemento de la página html; esto se llama barra de desplazamiento clásica . No ocurre lo mismo en macOS, que utiliza barras de desplazamiento superpuestas en lugar de las barras de desplazamiento clásicas; una barra de desplazamiento superpuesta vertical no afecta el ancho del htmlelemento.

Los usuarios de macOS pueden cambiar de barras de desplazamiento superpuestas a barras de desplazamiento clásicas configurando “Mostrar barras de desplazamiento” en “Siempre” en Preferencias del sistema General.

El valor de longitud de CSS 100vwes igual al ancho del htmlelemento. Sin embargo, si se agrega una barra de desplazamiento vertical clásica a la página, el htmlelemento se vuelve más estrecho (como se explicó anteriormente), pero 100vwpermanece igual . En otras palabras, 100vwes más ancha que la página cuando hay una barra de desplazamiento vertical clásica.

Esto puede ser un problema para los desarrolladores web en macOS que lo utilizan 100vwpero desconocen su peculiaridad. Por ejemplo, un sitio web puede configurar width: 100vwel encabezado de su artículo para que tenga ancho completo , pero esto generará una barra de desplazamiento horizontal inútil en Windows que algunos visitantes del sitio pueden encontrar molesta.

Los desarrolladores web en macOS pueden cambiar a las barras de desplazamiento clásicas para asegurarse de que los errores de desbordamiento causados ​​por 100vwno pasen desapercibidos. Mientras tanto, le pedí comentarios al Grupo de Trabajo de CSS.