Descubre algunas de las funciones interesantes que se lanzaron en los navegadores web estables y beta durante julio de 2024.
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);
}
Navegadores compatibles
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
.
Navegadores compatibles
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.
Navegadores compatibles
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.