Nuevo en la plataforma web en mayo

Descubre algunas de las interesantes funciones que llegaron a los navegadores web estables y beta en 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. El 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 selector 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 de :nth-child() con la sintaxis de S.

Navegadores compatibles

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

API de Compressions Streams

La API de Compressions Streams ahora es compatible con los tres motores principales debido a su inclusión en Firefox 113 y permite la compresión y descompresión de transmisiones. 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

En la mayoría de los casos, Safari 16.5 soluciona los problemas, pero también agrega compatibilidad con el Nesting de CSS, con el nuevo selector de anidamiento >, que se utiliza para anidar reglas de estilo relacionadas, de una manera que los desarrolladores que usaron preprocesadores ya conocerán:

.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 Ajuste de texto de CSS: saldo.

Navegadores compatibles

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

Origen

CHIPS: Cookies con estado particionado independiente

Como parte del trabajo para eliminar las cookies de terceros, CHIPS permite habilitar las cookies de terceros particionadas por el sitio de nivel superior a través del nuevo atributo de cookies 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 acciones, sugerencias de elementos de formulario, selectores de contenido e 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 Presentación de la API de ventanas emergentes.

Navegadores compatibles

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

Origen

Versiones beta del navegador

Las versiones beta de los navegadores 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 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 web "Novedad en la Web"