Descubre algunas de las interesantes funciones que llegaron a las versiones estable y beta. navegadores web en julio de 2024.
Versiones del navegador estable
En julio de 2024, Firefox 128, Safari 17.6 y Chrome 127 se volvió estable. 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 lo siguiente:
Sintaxis de colores relativos de CSS
esto te permite crear un color relacionado con un color de origen.
El siguiente CSS reduce la saturación del color indigo a la mitad con hsl().
.desaturate-by-half {
background: hsl(from indigo h calc(s / 2) l);
}
Navegadores compatibles
- 119
- 119
- 128
- 16.4
Puedes encontrar muchos más ejemplos en la entrada de blog Sintaxis de colores relativos de CSS La sintaxis de color relativo es una de las áreas de enfoque para Interoperabilidad 2024, por lo que esta actualización ayudará a mejorar la puntuación para la versión estable de Firefox.
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 el texto alternativo ahora es compatible con todos los navegadores para content.
Navegadores compatibles
- 77
- 79
- 128
- 17.4
Una actualización en Chrome 127 garantiza que Chrome acepte una cantidad arbitraria de
en lugar de una sola cadena, lo que permite el uso de attr()
la función de inicio de sesión, por ejemplo.
La propiedad font-size-adjust
Chrome 127 incluye font-size-adjust, también un área de enfoque para Interoperabilidad 2024.
Esta propiedad es útil para situaciones en las que se puede producir un resguardo de fuente,
ya que ayuda a hacer coincidir el tamaño de una fuente de reserva con la fuente de primera opción.
Con esta versión de Chrome, la propiedad font-size-adjust pasa a formar parte de
Baseline disponible recientemente.
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. La transición del iframe se omitirá automáticamente. Ahora se ejecutarán ambas transiciones.
Contenedores de desplazamiento enfocables del teclado
A partir de Chrome 127, los desplazadores pueden enfocarse en los clics y de forma programática. de forma predeterminada. De forma predeterminada, los elementos de desplazamiento sin elementos secundarios enfocables pueden hacerlo con el teclado.
Más información sobre este cambio en la publicación Desplazadores enfocables del teclado:
La regla @property
Firefox 128 incluye compatibilidad con la regla @property y JavaScript relacionado
APIs Esto significa que puede crear propiedades personalizadas de CSS que definan una sintaxis,
herencia y un valor inicial.
En el siguiente ejemplo, la propiedad personalizada se define para aceptar un <color>.
solo con el valor predeterminado, para no heredar y para tener un valor inicial de hotpink.
@property --myColor {
syntax: '<color>';
inherits: false;
initial-value: hotpink;
}
La regla @property ahora es parte del modelo de referencia disponible recientemente. Obtén más información en
@property: Las variables de CSS de nueva generación ahora son compatibles con todos los navegadores.
ArrayBuffer de tamaño ajustable y SharedArrayBuffer expandible
Se puede cambiar el tamaño ArrayBuffer y fácil de cultivar SharedArrayBuffer ahora son compatibles con Firefox 128, lo que permite cambiar el tamaño de los búferes sin tener que asignar nuevo búfer y copiar los datos en él. Estas propiedades también se unen al modelo de referencia recién disponible.
La palabra clave safe en las propiedades de Flexbox
Safari 17.6 es, en su mayoría, una versión de correcciones para 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
- 115
- 115
- 63
- 18
La palabra clave safe
impide que una alineación elegida haga que el contenido se muestre fuera del
en el área visible. El siguiente CodePen muestra cómo actúa esto
con los elementos alineados al centro. Si la alineación center provoca la pérdida de datos,
En su lugar, se usa start.
Versiones beta del navegador
Las versiones beta del navegador te ofrecen una vista previa de lo que encontrarás en la próxima versión estable del navegador. Es un buen momento para probar nuevas funciones o que podrían afectar a tu sitio antes de que el mundo reciba ese lanzamiento. Nuevo las versiones beta son Firefox 129 y Chrome 128. El Safari 18 la versión beta aún está en curso. Estos lanzamientos traen muchas funciones excelentes a la plataforma. Consulta la versión notas para todos los detalles. Estos son solo algunos de los aspectos destacados.
Chrome 128 incluye la propiedad ruby-align de CSS, junto con cambios en
hacer posibles saltos de línea en elementos que tienen display: ruby, el
También se actualizó la propiedad zoom 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 transition-behavior
propiedad. Estas propiedades pasarán a formar parte de Baseline Newly Disponible una vez
Lanzamiento de Firefox 129 estable.