Nuevo en la plataforma web en junio

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

Rachel Andrew

Versiones estables del navegador

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

Transforma flujos y flujos de bytes legibles

Firefox 102 incluye compatibilidad con Transform Streams. Esto permite canalizar desde ReadableStream a un WritableStream y ejecutar una transformación en los fragmentos. Es genial ver que esta función esté disponible en los tres motores, lo que hace que este sea un buen momento para aprender sobre los flujos.

Navegadores compatibles

  • Chrome: 67.
  • Edge: 79.
  • Firefox: 102.
  • Safari: 14.1.

Origen

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

Navegadores compatibles

  • Chrome: 89.
  • Edge: 89.
  • Firefox: 102.
  • Safari: No se admite.

Origen

Accede a las fuentes instaladas de forma local

Chrome 103 incluye la API de Local Fonts Access, que permite acceder a las fuentes instaladas localmente del 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 de contenido 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 que se renderiza.

Navegadores compatibles

  • Chrome: 113.
  • Edge: 113.
  • Firefox: 102.
  • Safari: 17.

Origen

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 recomendarle al navegador que establezca una conexión previa con los orígenes o incluso que precargue los recursos a medida que llega la página que los requiere. Para aprovechar esta función, debes actualizar tu servidor o CDN. Obtén más información sobre los indicadores anticipados.

Versiones beta del navegador

Las versiones beta del navegador te brindan una vista previa de lo que estará disponible en la próxima versión estable del navegador. Es un buen momento para probar funciones nuevas o eliminaciones que podrían afectar a tu sitio antes de que el resto del mundo obtenga esa versión.

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

Nueva sintaxis para las consultas de medios de rango

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

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

Ahora se puede escribir de la siguiente manera:

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

Navegadores compatibles

  • Chrome: 104.
  • Edge: 104.
  • Firefox: 102.
  • Safari: 16.4.

Origen

API de Region Capture

Chrome 104 para computadoras también incluye la API de Region Capture. Esto te permite recortar y quitar contenido del video capturado antes de compartirlo.

Safari 16 agrega varias funciones clave al navegador.

Safari 16 parece ser otra versión emocionante del equipo de Safari. Esta versión agrega muchas de las funciones que se incluyen en Interop 2022. Es genial ver que se implementan tantas funciones a mitad de año. Aquí 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 que las consultas de tamaño son compatibles con las consultas de contenedor, una función que también está detrás de una marca en Chrome actualmente.

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

Navegadores compatibles

  • Chrome: 117.
  • Edge: 117
  • Firefox: 71.
  • Safari: 16.

Origen

También para el diseño de cuadrícula, puedes animar los segmentos de cuadrícula.

Navegadores compatibles

  • Chrome: 107.
  • Edge: 107.
  • Firefox: 66.
  • Safari: 16.

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 sobre esto en Cómo mostrar un selector de navegador para fecha, hora, color y archivos.

Navegadores compatibles

  • Chrome: 99.
  • Edge: 99.
  • Firefox: 101.
  • Safari: 16.

Origen

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

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

Parte de la serie de artículos para principiantes en la Web