En Google I/O, compartí noticias sobre cómo Baseline evolucionó desde nuestro anuncio en I/O el año pasado. También anunció el panel de la plataforma web, las integraciones con RUM Archive y la próxima integración. Esta publicación reúne todos los recursos de la charla en un solo lugar.
El panel de plataforma web es una forma nueva y emocionante de ver toda la plataforma web y el recorrido de funciones individuales para la interoperabilidad, y que se convierte en parte de Baseline. Obtén más información en Anuncio del panel de plataforma web.
La integración de Baseline con las herramientas que usas todos los días siempre ha sido parte de la visión de este proyecto. Queremos que lidiar con la compatibilidad con los navegadores sea algo en lo que no tengas que pensar mucho tiempo. Obtén más información sobre la integración del archivo RUM y mira este espacio para conocer las noticias sobre más proveedores de herramientas próximamente.
Usuarios nuevos de Baseline
En I/O, compartí 12 funciones de plataformas web que recientemente se hicieron parte de Baseline Newly available. Estas funciones ahora están disponibles en Chrome, Edge, Firefox y Safari, y van desde pequeñas adiciones que pueden optimizar el desarrollo hasta algunas de las funciones que más desean los desarrolladores, incluidas las consultas de contenedores y :has().
Consulta el tamaño de las consultas del contenedor
Las consultas de contenedor de tamaño te permiten cambiar el diseño en función del ancho o el tamaño intercalado de un contenedor, en lugar de solo poder orientarse al tamaño del viewport con consultas de medios. De esta manera, se permiten componentes reutilizables que, cuando se colocan en un diseño, pueden modificarse por sí solos en función del espacio disponible. Desde hace casi que el concepto de diseño responsivo existe, se encuentran entre las primeras de la lista de funciones más deseadas.
- Disponible en febrero de 2023.
- Ampliamente disponible en agosto de 2025.
Obtén más información sobre las consultas de contenedores en MDN en Las consultas de contenedores se llegan a navegadores estables y descubre cómo otros equipos de desarrollo se benefician de ellas en casos de éxito de consultas de contenedores.
Selector de :has()
El selector :has() nos proporciona algo que ha sido otra solicitud importante de los desarrolladores durante muchos años: un selector superior, una forma de seleccionar un elemento según su contenido. Sin embargo, :has() puede ser mucho más que eso.
Al igual que con las consultas de contenedores, esto es muy útil cuando se crean componentes reutilizables, ya que puedes crear un solo componente que pueda adaptarse a lo que contiene.
- Disponible recientemente en diciembre de 2023.
- Disponible a partir de junio de 2026.
Obtén más información sobre :has() en MDN, en :has() el selector de familia y en los casos de éxito de :has().
Subcuadrícula de diseño de cuadrícula de CSS
La subcuadrícula permite que un diseño de cuadrícula anidado herede los segmentos de su elemento superior. Permite una mejor alineación de los elementos dentro de cuadrículas anidadas.
- Disponible recientemente en diciembre de 2023.
- Disponible a partir de junio de 2026.
Obtén más información sobre la subcuadrícula de MDN y la subcuadrícula CSS que se vincula a una gran cantidad de otros recursos.
Anidación de CSS
En los últimos años, CSS se inspiró en los desarrolladores de funciones que se usan en preprocesadores como Sass. Por ejemplo, las propiedades personalizadas de CSS, conocidas como variables de CSS, son una función ampliamente disponible que permite que variables como los colores se establezcan en un lugar y se usen en todo el CSS, algo que antes solo estaba disponible cuando se usaba un preprocesador.
Otra función de los preprocesadores es la anidación. La anidación ayuda a evitar la repetición de selectores y facilita la legibilidad de CSS, ya que los elementos relacionados se pueden agrupar con mayor facilidad.
- Disponible en agosto de 2023
- Ampliamente disponible en febrero de 2026
Obtén más información sobre la anidación de CSS en MDN y en Anidación de CSS.
El elemento HTML <search>
La búsqueda es algo que aparece en muchos sitios y aplicaciones; sin embargo, hasta hace poco, no había ningún elemento para marcar la funcionalidad que se usaba para buscar o filtrar en una página. El elemento <search> se diseñó con este propósito. Existe como un elemento dentro del cual puedes colocar un formulario de búsqueda o algún otro elemento que se usa para filtrar resultados.
- Disponible recientemente en octubre de 2023
- Disponible en abril de 2026
Obtén más información sobre el elemento <search> en MDN.
Video responsivo
Esta función se refiere a la capacidad de usar el elemento <source> dentro de un elemento <video> para publicar videos con el tamaño adecuado en diferentes dispositivos, de la misma manera que se pueden publicar imágenes de diferentes tamaños.
- Disponible recientemente en noviembre de 2023
- Ampliamente disponible en mayo de 2026
Obtén más información sobre MDN en el elemento Media o Fuente de la imagen y en Cómo usar videos responsivos.
El atributo inert
Cuando un elemento está inerte, no se puede interactuar con él. Por ejemplo, cuando se abre una ventana de diálogo en los elementos que se encuentran en la página detrás del diálogo, no se puede hacer clic en ellos ni se puede usar tabulación. El atributo inerte permite controlar la inercia en cualquier parte de la IU.
Con el atributo inert aplicado a un elemento, los eventos de clic no se activarán si se hace clic en él, este no puede obtener el foco, el elemento y su contenido se ocultan de las tecnologías de accesibilidad, ya que se excluyen del árbol de accesibilidad.
- Disponible recientemente en abril de 2023
- Gran disponibilidad en octubre de 2025
Obtén más información sobre el uso inerte en MDN y también en el artículo El atributo inert.
La función color-mix()
La función color-mix() permite mezclar un color con otro, en cualquier espacio de color disponible. Esto incluye todos los modelos de color nuevos (LCH, Lab, OKLCH y OKLab) que recientemente se convirtieron en parte de Baseline Newly disponible.
- Disponible recientemente en abril de 2023
- Gran disponibilidad en octubre de 2025
Obtén más información sobre color-mix() en MDN y en CSS color-mix(). También tenemos una gran guía de colores para CSS en alta definición que abarca todos los modelos de color nuevos disponibles en CSS. Además, prueba gradient.style para jugar con estos colores nuevos y crear gradientes atractivos.
:user-valid y :user-invalid
Las seudoclases :valid y :invalid están ampliamente disponibles en los navegadores y indican si un elemento de formulario es válido en la actualidad de acuerdo con las reglas de restricciones que se le aplican o si no es válido. Por lo tanto, si tienes un campo con un tipo de correo electrónico y contiene un nombre, la seudoclase :invalid lo selecciona y puedes agregar un color o un ícono para demostrar que se debe corregir.
El problema con las seudoclases :valid y :invalid es que se aplican antes de que el usuario interactúe con un formulario. Por lo tanto, si se requiere un elemento del formulario y el usuario aún no lo completó, se mostrará tu estilo no válido. Por lo general, solo quieres mostrar el diseño no válido una vez que el usuario ingresó algo incorrectamente o lo omitió en un campo y lo dejó en blanco.
Para mejorar la experiencia del usuario en esta situación, usa las seudoclases :user-valid y :user-invalid. Estos se comportan prácticamente de la misma manera, excepto que solo coinciden una vez que el usuario interactuó con el campo. Por lo tanto, en el ejemplo de un campo obligatorio, el usuario debe haber Tabulado o hecho clic en el campo y, luego, alejarse sin completarlo para que el campo muestre el estado no válido.
- Disponible recientemente en octubre de 2023
- Disponible en abril de 2026
Obtén más información sobre :user-valid y :user-invalid en MDN.
Transmisiones de compresión
Muchas aplicaciones web deben proporcionar una descarga al usuario en un formato comprimido, como un archivo ZIP. En el pasado, esto requería que la aplicación incluyera una biblioteca de compresión, código que aumentaba el tamaño de la aplicación para todos los usuarios. La API de Compression Streams te ofrece una forma integrada de comprimir un flujo de datos.
- Disponible recientemente en mayo de 2023
- Ampliamente disponible en noviembre de 2025
Obtén más información sobre la API de transmisiones de compresión en MDN y en Las transmisiones de compresión ahora son compatibles con todos los navegadores.
El Shadow DOM declarativo
El shadow DOM declarativo es una nueva manera de crear un shadow tree a partir de HTML, en el que antes solo podías crear un shadow tree a partir de JavaScript usando attachShadow(). Poder hacer esto desde HTML es particularmente útil en entornos en los que no se puede ejecutar JavaScript, como un cliente de correo electrónico. También es importante para los componentes web que se renderizan en el servidor.
- Disponible recientemente en febrero de 2024
- Ampliamente disponible en agosto de 2026
Obtén más información sobre el Shadow DOM declarativo.
La API de Popover
Las ventanas emergentes se utilizan para muchas tareas diferentes en nuestras aplicaciones web. Por ejemplo, menús, notificaciones de avisos personalizadas y selectores de contenido. Ahora hay una manera integrada de crear estas ventanas emergentes de manera decorativa con la API de Popover.
- Disponible recientemente en abril de 2024
- Gran disponibilidad en octubre de 2026
Obtén más información sobre la API de Popover en MDN, la API de Popover llega a Baseline y en los casos de éxito de Popover.
Estas 12 funciones son solo algunas de las que se incorporaron a la función Baseline Newly disponible. Puedes descubrir más en este sitio. Descubre todas las funciones que se incorporaron a Baseline 2023 y la creciente colección de funciones que forman parte de Baseline 2024.