Descubre algunas de las interesantes funciones que se incorporaron a los navegadores web estables y beta durante marzo de 2023.
Versiones del navegador estable
En marzo de 2023, Firefox 111, Chrome 111 y Safari 16.4 se volvieron estables. 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 el texto se puede escribir en mayúscula automáticamente cuando el usuario escribe con un teclado virtual.
El atributo translate indica si se debe traducir un elemento 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.
La API de View Transitions
Chrome 111 agrega la API de View Transitions, lo que simplifica la creación de transiciones perfeccionadas en apps de una página (SPA) mediante la captura de instantáneas de las vistas y permite que el DOM cambie sin superposición entre estados.
Obtén más información en la publicación posterior al lanzamiento Las transiciones de la vista de SPA llegan a Chrome 111.
Nuevos espacios de color y funciones de CSS
Además, en Chrome 111 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 de la gama 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 nuestra entrada de blog en color-mix().
La actualización de Chrome también incluye nuevas Herramientas para desarrolladores que te ayudarán 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 selectores a :nth-child() y nth-last-child(). Obtén más información al respecto y consulta ejemplos en la publicación Más control sobre las selecciones :nth-child() con la sintaxis de S.
Navegadores compatibles
- 111
- 111
- 113
- 9
Compatibilidad con la diapositiva anterior y siguiente en la API de Media Session
Por último, en esta lista de las incorporaciones a 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 de seudoclase en Safari
Safari 16.4 es una versión increíble para la plataforma web. En este artículo, no se abarcan todos los elementos adicionales, así que echa un vistazo a la lista completa de las funciones en las notas de la versión de Safari 16.4.
Existen varias seudoclases de CSS adicionales compatibles en esta versión: :user-invalid, :user-valid, :dir(), :modal y :fullscreen.
Nueva sintaxis de rango para consultas de medios
En esta versión de Safari, la sintaxis de rango, mucho más elegante y útil, es interoperable en los tres motores. Consulta ejemplos de esta sintaxis en esta entrada, publicada cuando se envió la sintaxis 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: cómo otorgar superpoderes a las variables de CSS.
Compatibilidad con la API de CSS
Las grandes adiciones para CSS siguen llegando gracias a la compatibilidad con CSS Typed OM. Esta API expone los valores de CSS como objetos JavaScript escritos en lugar de cadenas. Facilita el trabajo con CSS desde JavaScript y tiene un mejor rendimiento que los métodos existentes.
También se admite la construcción de hojas de estilo con CSSStyleSheet(). Esto permite compartir hojas de estilo entre un documento y sus subárboles del shadow DOM. Con esta versión de Safari, las hojas de estilo construibles 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 Badging, que es una gran 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
Otro elemento que aporta 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 de ES.
Navegadores compatibles
- 89
- 89
- 108
- 16.4
Versiones del navegador Beta
Las versiones de navegador beta 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 a tu sitio antes de que el mundo la implemente. Las nuevas versiones beta son Firefox 112, Safari 16.5 y Chrome 112. Estos lanzamientos aportan muchas funciones increíbles a la plataforma. Consulta las notas de la versión para obtener todos los detalles. Estos son solo algunos aspectos destacados.
Firefox 112 agrega compatibilidad con el atributo inert, lo que hará que este atributo útil esté disponible en todos los motores. Obtén 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().
Chrome 112 y Safari 16.5 incluyen compatibilidad con Nesting de CSS, una función muy esperada por muchos desarrolladores.
Chrome 112 también incluye compatibilidad con animation-composition. Obtén información sobre el funcionamiento de esta propiedad en Cómo especificar cómo se deben componer varios efectos de animación con una composición de animación.
Si utilizas el modo sin interfaz gráfica de Chrome, por ejemplo, con Puppeteer, la versión 112 ofrece un modo sin interfaz gráfica completamente nuevo. Obtén más información en Actualización del modo sin interfaz gráfica de Chrome.
Parte de la serie de novedades en la Web