Changelog

14 de septiembre de 2026

Nuevo lab de estados abiertos

La colección de selectores reúne [open], :open y :popover-open en un recorrido que permite compararlos sin presentarlos como equivalentes.

Alterna entre escenarios reales de details, dialog, select, input type="color" y popover.
Mantiene selector y escenario independientes para mostrar tanto coincidencias como combinaciones que no aplican.
Conserva las rutas anteriores de :open y :popover-open mediante redirecciones permanentes, y migra los favoritos guardados al nuevo destino.

El lab incluye rutas ES/EN, estado compartible, compatibilidad Baseline, especificidad calculada y una guía localizada para cada selector.

Nuevo lab de estados multimedia

Los siete estados de audio y vídeo se reúnen en un único lab de la colección de selectores: :playing, :paused, :seeking, :buffering, :stalled, :muted y :volume-locked.

Conserva los controles nativos de audio y vídeo y añade acciones directas para reproducir, pausar, buscar y silenciar.
Separa las coincidencias reales de una simulación visual explícita para los estados transitorios o dependientes de la plataforma.
Migra cada ruta anterior mediante una redirección permanente que selecciona el estado equivalente en el nuevo destino.

El recorrido incluye estado compartible, código HTML/CSS generado y una guía bilingüe organizada por reproducción, carga y sonido.

9 de septiembre de 2026

Nuevo lab de estados de formularios

La colección de selectores incorpora un sexto lab para comparar dieciséis pseudoclases de formularios sobre controles HTML nativos.

Reúne disponibilidad, edición, elecciones, obligatoriedad, validez y rangos en escenarios donde los estados opuestos comparten el mismo formulario.
Permite cambiar radios, checkboxes, valores y restricciones para observar la respuesta real del navegador, incluidos :user-valid y :user-invalid tras interacción.
Explica la diferencia entre :default y :checked, y usa JavaScript solo para la propiedad indeterminate, que no tiene un atributo HTML equivalente.

El lab incluye rutas ES/EN, estado compartible y una guía con especificidad y ejemplos para cada selector.

Nuevo lab de enlaces, acciones y foco

La colección de selectores reúne :any-link, :link, :visited, los estados de puntero y foco, :target y :scope en un quinto lab con escenarios reales.

Permite probar puntero, pulsación, foco por teclado, foco descendiente y navegación mediante fragmentos sin guardar estados transitorios en la URL.
Explica el orden de cascada de los estados de enlace y por qué el historial de :visited no puede convertirse en un recuento observable desde JavaScript.
Incorpora una guía bilingüe con especificidad calculada y ejemplos por cada selector.

Los cinco labs anteriores de enlaces, :hover y :active se consolidan en este nuevo recorrido; sus rutas y favoritos se migran al destino equivalente.

4 de septiembre de 2026

Nuevo lab de selectores estructurales

La colección de selectores incorpora un cuarto lab para comparar :root, :empty y las pseudoclases que dependen de la posición entre hermanos.

Permite alternar entre los casos de hijo primero, último o único y sus equivalentes por tipo.
Incluye las palabras clave odd y even, fórmulas An+B, conteo desde el final y filtros of <selector-list> para :nth-child() y :nth-last-child().
Añade tres escenarios HTML diferenciados, presets de varias familias y una guía con ejemplos señalados, especificidad calculada y soporte Baseline contextual.

Las guías de selectores distinguen ahora la especificidad de la forma base, visible en cada ficha, de la correspondiente a cada ejemplo concreto. También evitan repetir la sintaxis cuando coincide exactamente con el nombre.

Migración del lab de `:empty`

Los casos de elemento vacío, comentario, espacios en blanco y contenido se han integrado en un único escenario comparativo del nuevo lab. La ruta anterior redirige de forma permanente al destino equivalente y los favoritos guardados se actualizan al nuevo recorrido.

3 de septiembre de 2026

Nueva colección de selectores CSS

BaselineLab estrena la categoría Selectores, concebida como una colección incremental de labs que agrupan sintaxis relacionadas y permiten compararlas sobre escenarios HTML adecuados para cada modelo mental.

Tres labs iniciales

Selectores básicos y de atributo: tipo, universal, clase, ID, selectores compuestos, operadores de atributo y modificadores de mayúsculas y minúsculas.
Combinadores y relaciones: descendientes, hijos y hermanos adyacentes o posteriores.
Selectores lógicos y relacionales: listas como OR, composición como AND, :is(), :where(), :not() y :has().

Playground compartido

Los tres labs incluyen presets y escenarios diferenciados, estado restaurable mediante URL, HTML y CSS listos para copiar y una preview aislada que resalta las coincidencias sin afectar a la interfaz. La cabecera muestra el selector actual, su soporte, el número de elementos seleccionados y la especificidad mediante la tupla (ID, CLASS, TYPE).

Guías para entender cada selector

Cada lab incorpora una guía bilingüe con una ficha por selector. Las fichas explican qué selecciona, cómo se calcula su especificidad, sus restricciones y errores conceptuales habituales, y ofrecen varios ejemplos con las coincidencias señaladas. Cuando un selector tiene soporte particular, también se muestra su estado Baseline y un enlace a la referencia completa.

27 de agosto de 2026

Resaltado de sintaxis mejorado

El código de los labs y las guías comparte ahora una paleta de sintaxis inspirada en VS Code Plus, adaptada automáticamente a los modos claro y oscuro. También se ha mejorado el reconocimiento de unidades y at-rules de CSS moderno, atributos HTML con caracteres especiales y palabras clave actuales de JavaScript, manteniendo la actualización en tiempo real del código generado.

Nueva guía visual de CSS Multicolumn

El lab de CSS Multicolumn incorpora una guía visual para entender el flujo entre cajas de columna, la relación entre anchura y cantidad y el comportamiento de spans y cortes. Incluye una preview interactiva para probar propiedades del contenedor y del contenido, ejemplos de errores habituales y comparativas visuales con CSS Grid y Flexbox.

25 de agosto de 2026

Nueva búsqueda global

BaselineLab incorpora una búsqueda global para encontrar labs, guías y páginas desde cualquier sección. Los resultados respetan el idioma activo, se abren en un diálogo accesible y evitan el contenido interactivo de las previsualizaciones y el código generado para ofrecer coincidencias más claras.

Estados Baseline en las colecciones

Las cards de las páginas de CSS, HTML y Favoritos muestran ahora el estado Baseline de cada lab con la iconografía oficial. También se ha añadido un segundo nivel de filtros para combinar categoría o tecnología con disponibilidad amplia, disponibilidad reciente, disponibilidad limitada o ausencia de datos.

24 de agosto de 2026

Nuevo feed RSS de labs

BaselineLab incorpora un feed RSS para seguir la publicación de nuevos labs de HTML y CSS. Está disponible en español e inglés y se puede abrir desde el enlace RSS situado junto al changelog en el footer.

Nueva guía visual de CSS Grid

El lab de CSS Grid incorpora una guía visual para entender las líneas y tracks, la cuadrícula explícita e implícita y la colocación de los ítems. Incluye una preview interactiva para probar propiedades del contenedor y de los ítems, ejemplos de errores habituales y comparativas visuales con Flexbox y Grid Lanes.

23 de agosto de 2026

Guía visual de Flexbox ampliada

La guía de Flexbox incorpora nuevos diagramas para entender el contexto flex y la negociación del tamaño de los ítems, además de una preview interactiva y fija en pantallas grandes para probar cada propiedad de forma aislada y restablecer sus valores. También se han reorganizado los errores habituales en resultado esperado, causa y solución, añadido una comparativa visual entre Flexbox y Grid con acceso al lab relacionado y renovado las referencias y el diseño responsive para facilitar la lectura y mantener la posición al redimensionar la pantalla.

21 de agosto de 2026

Nuevos iconos visuales en los controles de layout

Los controles de Flexbox, Grid, Grid Lanes, CSS Multicolumn, Scroll Snap y CSS Carousel incorporan nuevos iconos para reconocer de un vistazo la dirección, la alineación, la distribución y el comportamiento de cada opción. Los diagramas comparten un estilo más claro y consistente, distinguen el contenedor de sus elementos y mantienen un contraste adaptado a los modos claro y oscuro.

20 de agosto de 2026

Nueva guía visual de Flexbox

El lab de Flexbox incorpora una guía visual para entender el modelo de ejes, las propiedades del contenedor y de los ítems, su sintaxis, sus valores y los errores habituales. Incluye ejemplos visuales, referencias externas y accesos para volver al playground y comprobar cada concepto de forma interactiva. Este formato de guía se irá incorporando progresivamente al resto de labs en futuras actualizaciones.

Renovación visual y responsive de la interfaz

Se han realizado múltiples mejoras de diseño en la navegación, las cabeceras, el menú lateral, los labs y las páginas de CSS, HTML y Favoritos. Se han unificado alineaciones, espacios, radios, superficies y estados, mejorado el comportamiento en Safari y la adaptación a pantallas pequeñas, y ajustado el scroll, los footers y la distribución de los labs y sus guías para ofrecer una experiencia más consistente en toda la web.

17 de agosto de 2026

Nuevas páginas de colección para CSS y HTML

Se han añadido nuevas páginas para explorar todos los labs de CSS y HTML organizados por categoría. Ambas incluyen buscador, filtros con contadores, cards con acceso a favoritos y una navegación responsive que permite compartir enlaces directos a cada categoría, cambiar entre ellas y recuperar el estado al avanzar o retroceder en el historial.

13 de agosto de 2026

Labs relacionados en toda la colección

Todos los labs incorporan ahora tres enlaces contextuales a otras herramientas relacionadas, con iconos y descripciones específicas para cada destino. En pantallas grandes se abren desde un popover junto a las acciones del lab y, cuando la página dispone de scroll, se muestran como un bloque integrado.

Previsualizaciones y código más consistentes

Las previsualizaciones usan ahora dos alturas compartidas: una compacta para las demos sencillas y otra ampliada para las que necesitan más espacio o generan scroll. Los labs compatibles también permiten cambiar el ancho desde la propia preview para probar comportamientos responsive sin redimensionar toda la ventana. Se han ajustado el scroll, el espaciado y el estirado de los paneles para aprovechar mejor el espacio disponible, y el código generado incorpora numeración de líneas y tabs con una altura uniforme.

Acciones de los labs reorganizadas

Las acciones de la cabecera siguen ahora un orden común: Preguntar a la IA, Labs relacionados, Compartir y Favoritos. Todos los botones comparten altura y superficie visual, mientras que el acceso para reportar un issue se ha trasladado al footer para reducir ruido en la zona principal del lab.

Nuevo lab de CSS Grid Lanes

Se ha añadido un nuevo lab de CSS para experimentar con display: grid-lanes e inline-grid-lanes. Permite alternar entre layouts waterfall y brick, combinar tracks responsivos, fijos o asimétricos, ajustar flow-tolerance con distintas unidades, separar los gaps y configurar el span y la colocación de cada tarjeta. La previsualización incorpora un control de ancho para probar el comportamiento responsive sin redimensionar la ventana y un selector para comparar el resultado nativo con el fallback progresivo. Incluye cuatro presets, orden de foco comprobable con Tab, estado compartible por URL, contexto Baseline y código HTML, CSS, CSS con nesting y Tailwind CSS listo para copiar.

Nuevo lab de CSS Multicolumn

Se ha añadido un nuevo lab de CSS para distribuir contenido editorial con columns. Permite comparar una anchura flexible, una cantidad fija o la combinación de column-width y column-count, ajustar column-gap y column-rule, hacer que el encabezado atraviese todas las columnas y evitar cortes dentro de las secciones. Incluye cuatro presets, un control de ancho para probar el comportamiento responsive, estado compartible por URL, contexto Baseline y código HTML, CSS, CSS con nesting y Tailwind CSS listo para copiar.

11 de agosto de 2026

Nuevo lab de `border-shape`

Se ha añadido un nuevo lab de CSS para crear bordes no rectangulares con circle(), ellipse(), polygon() y shape(). Permite comparar los modos de trazo y relleno, cambiar la caja de referencia, ajustar la geometría y la apariencia y partir de cuatro presets. También incluye fallback progresivo con clip-path, estado compartible por URL, contexto Baseline y código HTML, CSS, CSS con nesting y Tailwind CSS listo para copiar.

Nuevo lab de `transform`

Se ha añadido un nuevo lab de CSS para componer transformaciones 2D y 3D con translate(), rotate(), scale(), skew() y perspective(). Permite cambiar el orden de las funciones, ajustar transform-origin con porcentajes personalizados o palabras clave, comparar el resultado con la posición original y partir de cinco presets. También incluye estado compartible por URL, contexto Baseline para transforms 2D y 3D y código HTML, CSS y Tailwind CSS listo para copiar.

Nuevos labs de `text-shadow` y `box-shadow`

Se han añadido dos labs de CSS para crear sombras de texto y de caja con hasta tres capas ordenadas. Permiten ajustar desplazamientos, desenfoque y color; el lab de box-shadow incorpora también dispersión, sombras inset y border-radius. Ambos incluyen presets, previsualización en tiempo real, URLs compartibles y código HTML, CSS y Tailwind CSS listo para copiar.

Nuevo valor `balance` en el lab de Flexbox

El lab de Flexbox incorpora el nuevo valor balance de flex-wrap, que intenta distribuir los ítems en líneas de longitudes similares. La opción actualiza la previsualización, las URLs compartibles y el código CSS y Tailwind CSS generado.

Nuevo lab de `text-fit`

Se ha añadido un nuevo lab de CSS para probar text-fit con los valores none, grow y shrink, los modos consistent, per-line y per-line-all y un porcentaje opcional para limitar el factor de escala. Incluye cuatro presets, texto editable, controles para el ancho, el tamaño base y white-space, detección de soporte, URLs compartibles y código HTML, CSS y Tailwind CSS listo para copiar.

Nuevo lab de `<usermedia>`

Se ha añadido un nuevo lab de HTML para probar el elemento <usermedia> como control declarativo y gestionado por el navegador para solicitar acceso conjunto a la cámara y al micrófono. Permite configurar restricciones de vídeo y audio mediante setConstraints(), partir de cuatro presets, previsualizar el MediaStream, detener sus pistas y copiar el HTML y JavaScript generado. También incluye detección de soporte y un fallback progresivo con getUserMedia() para los navegadores que todavía no implementan el elemento.

30 de julio de 2026

Nuevo lab de CSS Grid

Se ha añadido un nuevo lab de CSS para diseñar y probar cuadrículas bidimensionales completas. Permite combinar filas y columnas iguales o con tracks personalizados, crear y validar grid-template-areas, configurar el auto-placement, los gaps y la alineación, y colocar cada ítem automáticamente, mediante líneas y spans o con áreas nombradas. También incluye cinco presets representativos, una previsualización interactiva, URLs compartibles y código HTML, CSS, CSS con nesting y Tailwind CSS listo para copiar.

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.