Changelog

27 de julio de 2026

Se ha añadido un nuevo lab de HTML para probar Popover API con los modos auto, hint y manual. Permite comparar el control declarativo con popovertarget y popovertargetaction frente al control con JavaScript, configurar la posición, el ::backdrop y las transiciones, partir de presets y copiar el HTML, CSS y JavaScript generado. También incluye una opción para desactivar todo el CSS personalizado y observar el popover únicamente con los estilos predeterminados del navegador.

Nuevo lab de tablas HTML

Se ha añadido un nuevo lab de HTML para crear y probar tablas semánticas con <table>, <caption>, encabezados, secciones y grupos de columnas. Permite editar filas y columnas, configurar scope, colspan y rowspan, destacar columnas con <colgroup>, partir de presets y copiar el HTML y CSS generado con la tabulación correcta.

Nuevo lab de listas HTML

Se ha añadido un nuevo lab de HTML para probar listas no ordenadas, ordenadas y de descripción con <ul>, <ol> y <dl>. Permite crear listas sueltas, mezclarlas y anidarlas mediante sangría, ajustar los atributos de <ol>, partir de presets y copiar el marcado semántico generado.

Nuevo lab de `<datalist>`

Se ha añadido un nuevo lab de HTML para probar el elemento <datalist> con distintos tipos de input. Permite editar sugerencias y etiquetas, configurar atributos y límites, comparar menús, marcas de rango y selectores nativos, y copiar el HTML generado.

Nuevo lab de `<progress>`

Se ha añadido un nuevo lab de HTML para probar el elemento <progress>. Permite editar su etiqueta accesible, ajustar max y value, comparar los estados determinado e indeterminado y copiar el HTML generado con contenido fallback opcional.

23 de julio de 2026

Nuevo lab de `@function`

Se ha añadido un nuevo lab de CSS para crear y probar funciones personalizadas con @function. Permite definir la firma, añadir o eliminar parámetros con tipos y valores por defecto, configurar el valor devuelto y probar resultados condicionales con @media, con previsualización y código HTML y CSS listos para copiar.

Presets en los labs

Los labs compatibles incorporan ahora presets con configuraciones completas y representativas que se pueden aplicar como punto de partida y seguir ajustando desde cualquier control. Al elegir un preset se actualizan al instante los controles, la previsualización y el código generado.

20 de julio de 2026

Favoritos para tus labs

Ahora puedes añadir o eliminar cualquier lab de tus favoritos desde el propio lab o desde el menú de navegación. Los favoritos se guardan en el almacenamiento local del navegador, por lo que permanecen disponibles en futuras visitas desde el mismo dispositivo y navegador.

Se ha añadido un acceso rápido en la cabecera con el número total de favoritos y un desplegable en el menú que muestra los cinco más recientes. Cuando hay más, un enlace permite abrir la nueva página de favoritos.

Esta página reúne todos los labs guardados en una cuadrícula y permite buscarlos por nombre o filtrarlos por tecnología. La experiencia incluye además animaciones al añadir y eliminar favoritos, tanto en los botones como en las cards y en el desplegable.

16 de julio de 2026

Nuevos labs de Scroll snap, scroll-padding, scroll-margin y Carrusel CSS

Se ha añadido un lab dedicado a Scroll snap para probar scroll-snap-type, los dos ejes de scroll-snap-align, scroll-snap-stop, scroll-padding y scroll-margin en desplazamientos horizontales, verticales y bidimensionales.

La versión incluye además dos labs más focalizados para probar scroll-padding y scroll-margin de forma independiente. Permiten aplicar un valor común o valores distintos por lado, cambiar entre las unidades válidas para cada propiedad y visualizar la región del snapport o el área exterior de cada destino.

También se ha incorporado un lab para crear carruseles nativos sin JavaScript combinando scroll snap con ::scroll-button(), ::scroll-marker y ::scroll-marker-group. Permite probar el carrusel en horizontal y vertical, personalizar los controles generados por el navegador y mostrar u ocultar la barra de scroll.

Mejoras visuales en los labs

Además, se han realizado varias mejoras visuales en los labs, con previsualizaciones más claras, un mejor aprovechamiento del espacio en tamaños intermedios y controles y estados interactivos más consistentes.

14 de julio de 2026

Nuevo lab de Flexbox

Se ha añadido un nuevo lab de CSS para Flexbox, con controles interactivos para experimentar con sus propiedades, previsualizar los cambios en tiempo real y copiar el código generado.

Mejoras en la navegación y al compartir

El menú de navegación ahora se puede colapsar en cualquier ancho de pantalla, lo que permite adaptar el espacio de trabajo a las preferencias de cada usuario.

También se ha añadido un nuevo menú de compartir desde el que se puede copiar la URL del lab, compartirla en X o compartirla en LinkedIn. La URL conserva mediante query parameters todos los cambios realizados en el lab, por lo que quien la abra verá la misma configuración.

9 de julio de 2026

Nuevos labs de pseudoclases multimedia

Se han añadido nuevos labs de CSS para probar pseudoclases de estado en elementos <audio> y <video>:

:playing
:paused
:seeking
:buffering
:stalled
:muted
:volume-locked

También se ha mejorado el diseño de los labs en diferentes anchos de pantalla para que los controles, la previsualización y las salidas de código se adapten mejor en desktop, tablet y móvil.

1 de julio de 2026

16 nuevos labs de textos CSS

Se ha ampliado la categoría de textos con 16 labs nuevos para probar propiedades tipográficas y de composición de texto con controles interactivos, previsualización en tiempo real y salida HTML, CSS y Tailwind CSS v4+ lista para copiar.

Labs añadidos:

text-box
line-height
font-size
font-weight
font-style
text-decoration
letter-spacing
word-spacing
font-variant
font-size-adjust
font-stretch
text-transform
text-align-last
text-indent
text-wrap
font-smooth

También se han incorporado iconos específicos para los nuevos labs, ayudas contextuales en propiedades que requieren explicación, soporte de rutas en español e inglés y contexto para el asistente de IA. Las salidas Tailwind priorizan clases nativas cuando existen y recurren a valores arbitrarios solo cuando la propiedad o el valor lo necesita.

24 de junio de 2026

Salida Tailwind CSS v4+ en labs de CSS

Se ha añadido salida de código Tailwind CSS v4+ a todos los labs de CSS para facilitar la prueba de las funcionalidades con utilidades modernas y valores arbitrarios cuando aplica.

También se han mejorado la mayoría de salidas de código HTML, CSS y JavaScript para que el código copiado sea más completo, claro y fácil de pegar en pruebas independientes.

16 de junio de 2026

Nuevo lab de custom select

Se ha añadido un nuevo lab de CSS para customizable select, con controles para probar appearance: base-select, selectedcontent, ::picker(select), ::picker-icon, ::checkmark y estilos de compatibilidad mediante @supports.

10 de junio de 2026

Salida CSS con nesting

Se ha añadido un selector en el bloque de código CSS para alternar entre la salida sin nesting, por defecto, y la salida con CSS nesting en los labs con varios selectores.

8 de junio de 2026

Nuevos labs de selectores CSS

Se han añadido nuevos labs de CSS para probar pseudoelementos y pseudoclases de forma visual:

Labs de CSS para pseudoelementos: ::search-text y ::selection.
Labs de CSS para pseudoclases: :current, :empty, :hover, :active, :link, :visited y :any-link.

4 de junio de 2026

Nuevo lab de espaciado

Se ha añadido un nuevo lab de CSS para gap decorations, disponible desde Chrome y Edge 149. Permite probar decoraciones en los gaps de grid y flex sin añadir bordes, pseudo-elementos ni markup extra.

El lab incluye controles para aplicar reglas en columnas, filas o ambos ejes, ajustar row-rule, column-rule, rule-inset, rule-break, rule-visibility-items y rule-overlap, además de generar el HTML y CSS listo para copiar.

27 de mayo de 2026

Nuevos labs de HTML

Se han añadido 3 nuevos labs de HTML:

Lab del elemento <select>, el cual servirá como base para un próximo custom select en CSS.
Labs de <geolocation> y <install>, dos nuevos elementos que nos permites controlar permisos de forma declarativa desde HTML.

19 de mayo de 2026

Nuevos labs de pseudoclases, pseudoelementos y HTML

Se han añadido nuevos labs para seguir explorando funcionalidades modernas del navegador:

Labs de CSS para pseudoclases: :open y :popover-open.
Labs de CSS para pseudoelementos: ::backdrop y ::details-content.

Nuevo web component `color-input`

Los controles de color de BaselineLab ahora usan el web component color-input, creado por Adam Argyle, para ofrecer una experiencia más completa y moderna al trabajar con inputs de tipo color.

8 de mayo de 2026

Asistente de IA en los labs

Se ha añadido un asistente de IA en cada lab para resolver preguntas sobre la funcionalidad que se está probando, explicar el código generado y revisar posibles riesgos de compatibilidad o accesibilidad.

El asistente utiliza Vercel AI Gateway y está acotado al contexto de cada lab. También se han incorporado medidas básicas de seguridad y control de uso: validación del lab en servidor, límite de longitud para las preguntas, renderizado Markdown sanitizado y preparación para rate limiting desde el Firewall de Vercel.

5 de mayo de 2026

Nuevo lab de filtros

Se ha añadido un nuevo lab de CSS para filtros: mix-blend-mode.

Mejoras en las salidas de código

Se han refinado las salidas HTML y CSS de varios labs para que funcionen mejor al copiar y pegar el código en un documento independiente:

Labs de colores: mejoras en accent-color, color-mix() y contrast-color().
Labs de fondos: salida más completa para background-color.
Labs de bordes: tamaños base más útiles para visualizar border, border-radius, outline y corner-shape.
Labs de filtros: tamaños base y composición más clara en filter, backdrop-filter y mix-blend-mode.
Lab de formularios: salida más clara y acotada para field-sizing.
Labs de espaciado: salidas más visuales para margin y padding.
Lab de textos: salida y previsualización mejoradas para text-align, con un texto más largo para apreciar mejor justify.

1 de mayo de 2026

Nuevos labs de filtros

Se han añadido los siguientes labs:

Labs de CSS para filtros: backdrop-filter y filter.

Además se han mejoras de estilos y correcciones de errores.

29 de abril de 2026

Primeros labs de BaselineLab

BaselineLab nace como un laboratorio interactivo para probar funcionalidades modernas de HTML y CSS de forma visual, ajustar sus configuraciones y llevarte código reutilizable para tus proyectos.

En esta primera versión ya puedes explorar labs organizados por tecnología, categoría y funcionalidad. Cada lab combina controles visuales, previsualización en tiempo real y salida de código para que puedas experimentar sin cambiar de herramienta.

Funcionalidades añadidas:

Labs de CSS para colores: accent-color, color-mix() y contrast-color().
Labs de CSS para fondos: background-color y background-image.
Labs de CSS para bordes: border, border-radius, outline y corner-shape.
Labs de CSS para espaciados: margin y padding.
Lab de CSS para formularios: field-sizing.
Labs de CSS para scroll y textos: scrollbar y text-align.
Labs de HTML para elementos nativos: details, dialog y meter.

Qué puedes hacer en los labs:

Ajustar valores con selectores, campos, rangos, colores y controles específicos de cada propiedad.
Cambiar entre propiedades físicas y propiedades lógicas cuando el lab lo permite.
Probar distintas unidades y direcciones de texto para validar cómo responde el resultado.
Ver la previsualización al instante.
Copiar el HTML, CSS o JavaScript generado según la funcionalidad.
Compartir un lab con los ajustes actuales mediante una URL.
Consultar el estado Baseline de compatibilidad cuando está disponible.

También se ha preparado la base visual de BaselineLab con modo claro y oscuro, navegación por categorías, páginas localizadas en español e inglés, soporte como PWA instalable y una experiencia centrada en usar el navegador como espacio de prueba.

Este lanzamiento deja preparada una base viva para seguir incorporando nuevos labs y refinando la experiencia con el tiempo.

Si tienes alguna sugerencia de mejora, un lab que te gustaría ver implementado, un error que reportar o simplemente quieres contactarme, puedes abrir un issue en GitHub o escribirme un correo electrónico.