Nuevo en la plataforma web en mayo

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

En mayo de 2023, Firefox 113, Chrome 113, Chrome 114 y Safari 16.5 se volvieron estables. Veamos qué significa esto para la plataforma web.

WebGPU

Chrome 113 incluye WebGPU, el sucesor de las APIs de gráficos WebGL y WebGL 2 para la Web. Proporciona funciones modernas, como el procesamiento de GPU, un acceso con menor sobrecarga al hardware de GPU, la capacidad de renderizar en varios lienzos desde un solo dispositivo gráfico y un rendimiento mejor y más predecible.

Navegadores compatibles

  • Chrome: 113.
  • Edge: 113.
  • Versión preliminar de tecnología de Firefox: Compatible.
  • Versión preliminar de tecnología de Safari: Compatible.

Origen

Conjuntos propios

First-Party Sets (FPS) es parte de Privacy Sandbox. Es una forma para que las organizaciones declaren relaciones entre sitios, de modo que los navegadores puedan decidir cuándo permitir el acceso limitado de cookies de terceros para los sitios dentro de un conjunto. FPS comenzó un lanzamiento en etapas en Chrome 113.

Funciones de medios de CSS y mucho más

En el caso de CSS, Chrome 113 incluye las funciones de medios overflow-inline y overflow-block.

Navegadores compatibles

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

Origen

Y la función de contenido multimedia update.

Navegadores compatibles

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

Origen

También se incluye la función de suavización linear(), sobre la que puedes obtener más información en el artículo Cómo crear curvas de animación complejas en CSS con la función de suavización linear().

Navegadores compatibles

  • Chrome: 113.
  • Edge: 113.
  • Firefox: 112.
  • Safari: 17.2.

Funciones de nivel 4 de color de CSS

Firefox 113 incluye las notaciones funcionales color(), lab(), lch(), oklab(), oklch() y color-mix(), junto con la propiedad forced-color-adjust. Esto significa que los nuevos espacios de color y funciones ahora son compatibles con los tres motores principales. Puedes obtener más información sobre estos espacios de color y funciones en la Guía de colores de CSS de alta definición.

Navegadores compatibles

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 113.
  • Safari: 16.2.

Origen

Más control sobre las selecciones de :nth-child()

Firefox 113 también agrega la capacidad de pasar una lista de selectores a :nth-child() y nth-last-child(). Obtén más información sobre esto y consulta ejemplos en la publicación Más control sobre las selecciones :nth-child() con la sintaxis de S.

Navegadores compatibles

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 113.
  • Safari: 9.

API de Compressions Streams

Ahora que se incluye en Firefox 113, la API de Compressions Streams es compatible con los tres motores principales y permite la compresión y descompresión de flujos. Esto significa que las aplicaciones de JavaScript ya no necesitan agrupar una biblioteca de compresión.

Navegadores compatibles

  • Chrome: 80.
  • Edge: 80.
  • Firefox: 113.
  • Safari: 16.4.

Origen

Anidación de CSS

Safari 16.5 resolvió la mayoría de los problemas, pero también agrega compatibilidad con la anidada de CSS, con el nuevo selector de anidación >, que se usa para anidar reglas de estilo relacionadas de una manera que resultará familiar para los desarrolladores que hayan usado preprocesadores:

.nesting {
  color: hotpink;

  > .is {
    color: rebeccapurple;

    > .awesome {
      color: deeppink;
    }
  }
}

Navegadores compatibles

  • Chrome: 120
  • Edge: 120
  • Firefox: 117.
  • Safari: 17.2.

Origen

Cómo equilibrar los títulos con text-wrap: balance

A partir de Chrome 114, puedes usar text-wrap: balance. Esto te permite equilibrar los títulos, evitando el problema de tener una sola palabra en la línea final, lo que proporciona un resultado más agradable y legible. Puedes obtener más información en text-wrap: balance de CSS.

Navegadores compatibles

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 121.
  • Safari: 17.4.

Origen

CHIPS: Cookies con estado particionado independiente

Como parte del trabajo para eliminar gradualmente las cookies de terceros, CHIPS permite habilitar las cookies de terceros que se particionan por sitio de nivel superior con el nuevo atributo de cookie Partitioned. CHIPS está disponible en Chrome 114.

La API de Popover

También en Chrome 114, se incluye la API de popover, que facilita la compilación de elementos transitorios de la interfaz de usuario (IU) que se muestran sobre todas las demás IU de la app web.

Estos incluyen elementos interactivos para el usuario, como menús de acción, sugerencias de elementos de formulario, selectores de contenido y una IU de enseñanza.

El nuevo atributo de cuadro flotante permite que cualquier elemento se muestre automáticamente en la capa superior. Esto significa que el desarrollador ya no tendrá que preocuparse por el posicionamiento, la apilamiento de elementos, el enfoque ni las interacciones del teclado.

Obtén más información en Presentamos la API de popover.

Navegadores compatibles

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 120.
  • Safari: 17.

Origen

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 son Firefox 114, Chrome 115 y Safari 16.6. Estas versiones ofrecen muchas funciones excelentes a la plataforma. Consulta las notas de la versión para obtener todos los detalles. A continuación, se incluyen algunos aspectos destacados.

Chrome 115 incluye varios valores para la propiedad display de CSS. Esto significa que display: flex se convierte en display: block flex y display: block se convierte en display: block flow. Los valores únicos se mantienen como palabras clave heredadas y, una vez que se implementan en Chrome estable, los valores múltiples están disponibles en todos los motores.

También en Chrome 115, se incluyen las extensiones ScrollTimeline y ViewTimeline a la especificación de animaciones web. Estos permiten animaciones basadas en el desplazamiento a través de CSS y JavaScript.

Firefox 114 incluye la API de WebTransport, una actualización moderna de WebSockets que admite múltiples transmisiones, transmisiones unidireccionales y entrega fuera de orden.

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