Descubre algunas de las funciones interesantes que llegaron en los navegadores web estables y beta en marzo de 2023.
Versiones del navegador estable
En marzo de 2023, se estabilizaron Firefox 111, Chrome 111 y Safari 16.4. Veamos qué significa esto para la plataforma web.
Atributos HTML globales
Firefox 111 agrega compatibilidad con un par de atributos HTML globales útiles. El atributo autocapitalize controla si se pueden usar mayúsculas automáticamente en el texto cuando el usuario escribe en un teclado virtual.
El atributo translate indica si un elemento se debe traducir cuando se localiza una página.
Sistema de archivos privados de origen (OPFS)
Firefox agrega compatibilidad con el Sistema de archivos privados de origen (OPFS) cuando se usa la API de File System Access. Obtén más información sobre OPFS.
API de View Transitions
Chrome 111 agrega la API de View Transitions, lo que simplifica la creación de transiciones mejoradas en apps de una sola página (SPA), ya que permite tomar instantáneas de las vistas y permitir que el DOM cambie sin ninguna superposición entre estados.
Obtén más información en la publicación posterior al lanzamiento Las transiciones de vistas de SPA llegan a Chrome 111.
Nuevos espacios de color y funciones de CSS
En Chrome 111, también se incluye un conjunto completamente nuevo de formas de usar el color en la Web. Chrome ahora admite espacios de color que acceden a colores fuera del gamut RGB, junto con las funciones color() y color-mix(). Obtén más información en nuestra guía de colores de CSS de alta definición y en nuestra entrada de blog sobre color-mix().
La versión de Chrome también incluye nuevas Herramientas para desarrolladores para ayudarte a trabajar con esta nueva funcionalidad de color.
Más control sobre las selecciones de :nth-child()
Chrome 111 agrega la capacidad de pasar una lista de selector a :nth-child() y nth-last-child(). Obtén más información sobre este tema y consulta ejemplos en la entrada Más control sobre las selecciones de :nth-child() con la sintaxis de S.
Navegadores compatibles
- 111
- 111
- 113
- 9
Compatibilidad con la diapositiva anterior y la siguiente en la API de Media Session
Por último, en esta lista de las adiciones de Chrome 111, se encuentran las acciones de presentación de diapositivas para la API de la sesión multimedia: "previousslide" y "nextslide".
Navegadores compatibles
- 111
- 111
- x
- x
Compatibilidad con pseudoclases en Safari
Safari 16.4 es una versión increíble para la plataforma web. Este artículo no abarca todos los elementos agregados, por lo que te recomendamos que consultes la lista completa de funciones en las notas de la versión de Safari 16.4.
Hay una serie de seudoclases adicionales de CSS compatibles con esta versión: :user-invalid, :user-valid, :dir(), :modal y :fullscreen.
Nueva sintaxis de rango para consultas de medios
Esta versión de Safari permite que la sintaxis de rango mucho más elegante y útil para consultas de medios sea interoperable en los tres motores. Consulta ejemplos de esta sintaxis en esta publicación, publicada cuando la sintaxis se envió en Chrome.
Propiedades y valores de CSS
Safari 16.4 agrega compatibilidad con @property, lo que permite el registro de propiedades personalizadas de CSS directamente en una hoja de estilo. Obtén más información al respecto en @property: otorgar superpoderes a las variables de CSS.
Compatibilidad con la API de CSS
Las grandes incorporaciones para CSS siguen llegando, además de la compatibilidad con el OM escrito de CSS. Esta API expone los valores de CSS como objetos escritos de JavaScript en lugar de cadenas. Hace que trabajar con CSS desde JavaScript sea más fácil y tiene un mejor rendimiento que los métodos existentes.
También se admiten las hojas de estilo construyebles con CSSStyleSheet(). Esto permite compartir hojas de estilo entre un documento y sus subárboles de shadow DOM. Con esta versión de Safari, las hojas de estilo constructibles ahora son compatibles con los tres motores.
Web Push y la API de Badging
Safari ahora es compatible con Web Push, junto con la API de Banding, lo cual es una excelente noticia para los desarrolladores de apps. En particular, esta versión significa que las notificaciones push son compatibles con todos los motores principales.
Importar mapas
Otra incorporación que incorpora una función al estado interoperable es la incorporación de la función Importar mapas de JavaScript, que facilita mucho la importación de módulos ES.
Navegadores compatibles
- 89
- 89
- 108
- 16.4
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 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 112, Safari 16.5 y Chrome 112. Estos lanzamientos traen muchas funciones excelentes a la plataforma. Consulta las notas de la versión para conocer todos los detalles. Estos son solo algunos aspectos destacados.
En Firefox 112, se agrega compatibilidad con el atributo inert, lo que permitirá que este atributo útil esté disponible en todos los motores. Puedes obtener más información sobre inert en Introducción a inert. Firefox también habilitará la compatibilidad con la función de aceleración linear().
Tanto Chrome 112 como Safari 16.5 agregan compatibilidad con el Nesting de CSS, una función muy esperada por muchos desarrolladores.
Chrome 112 también es compatible con animation-composition. Obtén información sobre el funcionamiento de esta propiedad en Especifica cómo se deben componer varios efectos de animación con la composición de animación.
Si usas el modo sin interfaz gráfica de Chrome, por ejemplo, con Puppeteer, la versión 112 trae un modo sin interfaz gráfica totalmente nuevo. Obtén más información en el modo sin interfaz gráfica de Chrome se actualiza.
Parte de la serie web "Novedad en la Web"