Usuarios nuevos de la plataforma web en julio

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

Rachel Andrew

Versiones del navegador estable

En julio de 2024, Firefox 128, Safari 17.6 y Chrome 127 se volvieron estables. En esta publicación, se analizan las nuevas funciones que se agregaron a la plataforma web.

Sintaxis del color relativo de CSS

Firefox 128 incluye la sintaxis de color relativa de CSS, que te permite crear un color en relación con un color de origen. El siguiente CSS desatura el color indigo a la mitad con hsl().

.desaturate-by-half {
  background: hsl(from indigo h calc(s / 2) l);
}

Puedes encontrar muchos más ejemplos en la entrada de blog Sintaxis de colores relativos de CSS. La sintaxis de colores relativa es una de las áreas de enfoque de Interop 2024, por lo que esta actualización ayuda a mejorar la puntuación de Firefox estable.

Texto alternativo para la propiedad content

Firefox 128 admite texto alternativo para la propiedad content de CSS cuando incluye una imagen. El texto alternativo se expone al árbol de accesibilidad. Esto significa que todos los navegadores ahora admiten el texto alternativo para content.

Una actualización en Chrome 127 garantiza que Chrome acepte una cantidad arbitraria de elementos en lugar de solo una cadena, lo que permite el uso de la función attr(), por ejemplo.

La propiedad font-size-adjust

Chrome 127 incluye font-size-adjust, que también es un área de enfoque para Interop 2024. Esta propiedad es útil para situaciones en las que puede ocurrir un resguardo de fuente, ya que te ayuda a hacer coincidir el tamaño de una fuente de resguardo con la fuente de primera elección.

Con esta versión de Chrome, la propiedad font-size-adjust se convierte en parte de Baseline Newly Available.

Compatibilidad con la API de View Transition en iframes

A partir de Chrome 127, estarán disponibles las transiciones simultáneas de vistas del mismo documento en un marco principal y el iframe del mismo origen.

Anteriormente, la ejecución de una transición de vistas con document.startViewTransition en un iframe del mismo origen no funcionaba si el marco principal ejecutaba una transición al mismo tiempo. Se omitirá automáticamente la transición del iframe. Ahora, se ejecutarán ambas transiciones.

Contenedores de desplazamiento enfocables en el teclado

A partir de Chrome 127, los desplazadores pueden enfocarse en los clics y de forma programática de forma predeterminada. Los desplazadores sin elementos secundarios enfocables se pueden enfocar con el teclado de forma predeterminada.

Obtén más información sobre este cambio en la entrada Desplazadores enfocables del teclado.

La regla @property

Firefox 128 incluye compatibilidad con la regla @property y las APIs de JavaScript relacionadas. Esto significa que puedes crear propiedades personalizadas de CSS que definan una sintaxis, una herencia y un valor inicial.

En el siguiente ejemplo, la propiedad personalizada se define para aceptar solo un valor <color>, no heredar y tener un valor inicial de hotpink.

@property --myColor {
  syntax: '<color>';
  inherits: false;
  initial-value: hotpink;
}

La regla @property ahora forma parte de Baseline Newly Available. Obtén más información en @property: Next-gen CSS variables now with universal browser support.

ArrayBuffer con tamaño modificable y SharedArrayBuffer con tamaño expandible

Ahora se admiten ArrayBuffer y SharedArrayBuffer con cambio de tamaño en Firefox 128, lo que permite cambiar el tamaño de los búferes sin tener que asignar un búfer nuevo y copiar datos en él. Estas propiedades también se incluyen en la sección Baseline Newly Available.

La palabra clave safe en las propiedades de flexbox

Safari 17.6 es, en su mayoría, una versión de correcciones de funciones existentes. Sin embargo, también incluye la palabra clave safe para las propiedades de alineación de flexbox. Esto hace que la palabra clave safe sea interoperable en todos los navegadores.

La palabra clave safe evita que una alineación elegida haga que el contenido se muestre fuera del área visible. En el siguiente CodePen, se muestra cómo actúa esto con los elementos alineados al centro. Si la alineación center causa pérdida de datos, se usa start.

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 nuevas funciones, o eliminaciones, que podrían afectar tu sitio antes de que todo el mundo reciba ese lanzamiento. Las nuevas versiones beta son Firefox 129 y Chrome 128. La versión beta de Safari 18 aún está en curso. Estas versiones ofrecen muchas funciones excelentes a la plataforma. Consulta las notas de la versión para obtener todos los detalles. Estos son solo algunos aspectos destacados.

Chrome 128 incluye la propiedad ruby-align de CSS, junto con cambios para permitir saltos de línea dentro de los elementos que tienen display: ruby. La propiedad zoom también se actualizó para que coincida con la especificación. Hay una actualización de la API de AudioContext para agregar una devolución de llamada asignada a AudiContext.onerror, que informa errores de creación y renderización de AudioContext.

Firefox 129 incluye la regla @starting-style y la propiedad transition-behavior. Estas propiedades pasarán a formar parte de Baseline Newly Available una vez que Firefox 129 se lance en la versión estable.