Nuevo en la plataforma web en junio

Descubre algunas de las interesantes funciones que se incorporaron a los navegadores web estables y beta durante junio de 2022.

Versiones del navegador estable

En junio, Chrome 103 y Firefox 102 se volvieron estables.

Transmisiones de transformación y flujos de bytes legibles

Firefox 102 es compatible con transmisiones de transformación. Esto habilita la canalización de ReadableStream a un WritableStream, mediante la ejecución de una transformación en los fragmentos. Es bueno ver que esta función está disponible en los tres motores, por lo que es un buen momento para aprender sobre las transmisiones.

Las transmisiones de bytes legibles ahora también son compatibles con Firefox 102, lo que permite un lector de tipo BYOB (usa tu propio búfer) con la interfaz ReadableStreamBYOBReader. Se puede usar para transmitir datos que proporciona el desarrollador.

Cómo acceder a las fuentes instaladas de forma local

Chrome 103 incluye la API de Local Font Access, que permite el acceso a las fuentes instaladas localmente por el usuario. Después de solicitar acceso a las fuentes instaladas en el dispositivo, llama a window.queryLocalFonts() para obtener un array de las fuentes instaladas.

const pickedFonts = await window.queryLocalFonts();
for (const fontData of pickedFonts) {
  console.log(fontData.postscriptName);
  console.log(fontData.fullName);
  console.log(fontData.family);
  console.log(fontData.style);
}

La función multimedia update

Firefox 102 incluye la función multimedia update. Se usa para consultar si el dispositivo de salida puede modificar la apariencia del contenido una vez renderizado.

Un nuevo código de estado HTTP: 103 sugerencias anticipadas

Chrome 103 agrega un nuevo código de estado HTTP 103 Early Hints. Si el servidor o la CDN saben que se requiere un conjunto determinado de subrecursos para cargar una página, pueden recomendar al navegador que se conecte previamente a los orígenes o incluso que precargue los recursos a medida que llega la página que los requiere. Para aprovechar la función, es necesario que actualices tu servidor o CDN. Obtén más información sobre las sugerencias anticipadas.

Versiones del navegador Beta

Las versiones de navegador beta te ofrecen una vista previa de los elementos que estarán disponibles en la próxima versión estable del navegador. Es un buen momento para probar nuevas funciones, o eliminaciones, que podrían afectar a tu sitio antes de que el mundo la implemente.

Las nuevas versiones beta de abril fueron Chrome 104, Firefox 103 y Safari 16.

Nueva sintaxis para consultas de medios de rango

Chrome 104 incluye la nueva sintaxis para las consultas de medios por rango, de la especificación de consultas de medios de nivel 4. Por ejemplo, una consulta de medios escrita anteriormente de la siguiente manera:

@media (min-width: 400px) { … }

Ahora se puede escribir de la siguiente manera:

@media (width >= 400px) { … }

API de Region Capture

Chrome 104 en computadoras también incluye la API de captura regional. De esta manera, puedes recortar o quitar el contenido del video capturado antes de compartirlo.

Safari 16 incorpora varias funciones clave al navegador

Safari 16 parece ser otro lanzamiento emocionante del equipo de Safari. En esta versión, se agregan muchas de las funciones que se incluyen en Interoperabilidad 2022, por lo que es estupendo ver tanto aterrizaje a mitad de año. A continuación, destaco algunas de mis funciones favoritas, pero consulta las notas de la versión para obtener más información.

Junto con muchos desarrolladores, me entusiasma ver la compatibilidad con las consultas de tamaño para las consultas de contenedores, una función que actualmente también está detrás de una función experimental en Chrome.

También en Safari 16 se admite el valor subgrid para grid-template-columns y grid-template-rows. Esta función ya está en Firefox y en desarrollo en Chrome, y permite que las cuadrículas anidadas hereden el tamaño de los seguimientos de cuadrícula.

Además, para el diseño de cuadrícula, se encuentra la capacidad de animar recorridos de cuadrícula.

Se incluye el método showPicker(), que habilita una forma canónica de mostrar un selector de navegador para fechas, hora, color y archivos. Puedes obtener más información al respecto en Cómo mostrar un selector del navegador para fecha, hora, color y archivos.

También se solucionaron los problemas de accesibilidad para display: contents, lo que hace que sea seguro usar esta función útil sin el peligro de quitar elementos del árbol de accesibilidad.

Estas funciones beta pronto estarán disponibles en navegadores estables.

Parte de la serie de novedades en la Web