Noticias semanales de la plataforma: autocompletar de WebKit, uso del puntero del cursor, retraso de la reproducción automática de videos

En el resumen de esta semana, el prefijo de autocompletar de WebKit se convierte en un estándar, el cursor del puntero es para algo más que enlaces y los navegadores se están incorporando para retrasar los videos configurados para reproducción automática hasta que estén a la vista… ¡y más! Saltemos directamente a ello.

CSS ::-webkit-autofillse ha convertido en una característica estándar

Chrome, Safari y prácticamente todos los demás navegadores web modernos, excepto Firefox (más sobre esto más adelante), han soportado la pseudoclase CSS :-webkit-autofilldurante muchos años. Este selector coincide con los campos del formulario que el navegador ha completado automáticamente. Los sitios web pueden utilizar esta función para diseñar campos autocompletados en CSS (con algunas limitaciones) y detectar dichos campos en JavaScript.

let autofilled = document.querySelectorAll(":-webkit-autofill");

Actualmente no existe un estándar autocompleteo autofillevento que se active cuando el navegador completa automáticamente un campo de formulario, pero puede escuchar el inputevento en el formulario web y luego verificar si alguno de sus campos coincide con el :-webkit-autofillselector.

El estándar HTML ahora ha estandarizado esta característica agregando :autofill(y :-webkit-autofillcomo alias) a la lista de pseudoclases que coinciden con elementos HTML. Esta pseudoclasa también se agregará al módulo Selectores de CSS.

Las pseudoclases :autofilly deben coincidir con elementos que el agente de usuario ha completado automáticamente. Estas pseudoclases deben dejar de coincidir si el usuario edita el campo autocompletado.:-webkit-autofillinput

Tras la estandarización, ambas pseudoclases se implementaron en Firefox y se espera que se distribuyan en Firefox 86 a finales de este mes.

Puede utilizar CSS Grid para definir el espacio en botones y enlaces

En el artículo “ ¡Recuperemos los GIF espaciadores! Josh W. Comeau aboga por el uso de un spanelemento “espaciador” en lugar de un simple margen CSS para definir el espacio entre el icono y el texto de un componente de botón.

En nuestro ejemplo del botón de inicio, ¿el margen debería ir en la flecha hacia atrás o en el texto? No me parece que ninguno de los elementos deba ser “dueño” del espacio. Es una preocupación por el diseño distinto.

CSS Grid es una alternativa a estos elementos espaciadores. Por ejemplo, el enlace “Enlace al problema” en la sección del boletín de CSS-Tricks contiene dos espacios continuos ( nbsp;) para aumentar el espacio entre el carácter emoji y el texto, pero el enlace podría convertirse en un diseño de cuadrícula simple para ganar. más precisión. control sobre el espacio a través de la gappropiedad.

Los sitios web coinciden en que el cursor no es sólo para enlaces

El módulo de interfaz de usuario básico CSS define la propiedad CSS cursor, que permite a los sitios web cambiar el tipo de cursor que se muestra cuando el usuario pasa el cursor sobre elementos específicos. La especificación dice lo siguiente sobre el pointervalor de la propiedad:

El cursor es un puntero que indica un enlace.… Los agentes de usuario deben aplicar cursor: pointera los hipervínculos. … Los autores deben utilizarlos pointeren enlaces y pueden utilizarlos en otros elementos interactivos.

En consecuencia, los navegadores muestran el pointercursor (representado como una mano) en los enlaces y el defaultcursor (representado como una flecha) en los botones. Sin embargo, la mayoría de los sitios web (incluida Wikipedia) no están de acuerdo con este estilo predeterminado y cursor: pointertambién se aplican a otros elementos interactivos, como botones y casillas de verificación.

Otro elemento interactivo para el que tiene sentido utilizar el pointercursor es el summaryelemento (el “botón de alternancia” para abrir y cerrar el elemento principal details).

Los navegadores se retrasan autoplayhasta que aparece el vídeo

En comparación con los formatos de vídeo modernos, las imágenes GIF animadas cuestan hasta “el doble en consumo de energía”. Por esa razón, los navegadores han relajado sus políticas de reproducción automática de videos (hace algún tiempo) para alentar a los sitios web a cambiar de GIF a videos silenciosos o silenciados.

!-- a basic re-implementation of a GIF using video --video autoplay loop muted playsinline src="meme.mp4"/video

Si está utilizando video muted autoplay, no se preocupe por pausar dichos videos cuando ya no estén visibles en la ventana gráfica (por ejemplo, usando un Intersection Observer ). Todos los navegadores principales (excepto Firefox) ya realizan esta optimización de forma predeterminada:

video autoplayLos elementos solo comenzarán a reproducirse cuando estén visibles en la pantalla, como cuando se desplazan hacia la ventana gráfica, se hacen visibles a través de CSS y se insertan en el DOM.

(a través de Zach Leatherman)

Chrome presenta tres nuevos @font-facedescriptores

A veces, diferentes navegadores y sistemas operativos utilizan diferentes métricas de fuentes incluso cuando representan la misma fuente. Estas diferencias afectan la posición vertical del texto, lo que se nota especialmente en títulos grandes.

De manera similar, las diferentes métricas de fuente de una fuente web y su fuente alternativa pueden provocar un cambio de diseño cuando las fuentes se intercambian durante la carga de la página.

Para ayudar a los sitios web a evitar cambios de diseño y crear diseños de texto interoperables, Chrome agregó recientemente los siguientes tres nuevos descriptores CSS para anular las métricas predeterminadas @font-facede la fuente:

• ascent-override(el ascenso es la altura sobre la línea de base)
• descent-override(el descenso es la profundidad por debajo de la línea de base)
• line-gap-override

@font-face {  font-family: Roboto;  /* Merriweather Sans has 125.875px ascent    * and 35px descent at 128px font size.   */  ascent-override: calc(125.875 / 128 * 100%);  descent-override: calc(35 / 128 * 100%);  src: local(Roboto-Regular);}

El siguiente vídeo muestra cómo anular las métricas de ascenso y descenso de la fuente alternativa (Roboto) para que coincidan con las mismas métricas de la fuente web (Merriweather Sans) puede evitar el cambio de diseño al intercambiar entre estas dos fuentes.