Changelog

29 de octubre de 2026

Guías de scroll-margin, scroll-padding y scrollbar

Tres labs incorporan guías educativas en español e inglés, con modelos visuales, ejemplos nativos, código copiable, errores frecuentes y fuentes con fecha de consulta:

• scroll-margin: explica el área del destino, las anclas, scrollIntoView(), los lados lógicos y la separación necesaria bajo una cabecera fija.
• scroll-padding: desarrolla la región óptima del contenedor, los porcentajes, su combinación con scroll-margin y los límites del recorrido frente al espacio real de layout.
• scrollbar: distingue color, grosor y gutter, barras clásicas y superpuestas, teclado y preferencias de contraste.

Las guías se enlazan entre sí y con scroll snap y carrusel CSS. Sus ejemplos permanecen independientes del playground y se pueden consultar sin JavaScript. La personalización de las barras conserva el scroll nativo como fallback; el soporte y el aspecto dependen de la propiedad, el navegador y la plataforma.

28 de octubre de 2026

Guías de margin, padding y gap decorations

Tres labs incorporan guías educativas en español e inglés, con modelos visuales, ejemplos nativos, código copiable, errores frecuentes y fuentes con fecha de consulta:

• margin: explica el espacio exterior, el centrado con auto, las propiedades lógicas, el colapso de márgenes y los valores negativos.
• padding: relaciona el espacio interior con box-sizing, los porcentajes, la dirección de escritura y el área interactiva de un enlace.
• gap decorations: distingue la separación de las reglas decorativas y desarrolla filas, columnas, intersecciones, insets y visibilidad junto a áreas vacías.

Las guías se enlazan entre sí y con Grid y Flexbox para ayudar a elegir dónde definir el espacio. Los ejemplos permanecen independientes del playground y legibles sin JavaScript. Gap decorations separa soporte por propiedad y layout; cuando las reglas no están disponibles, el contenido conserva su separación.

27 de octubre de 2026

Mejoras de diseño y navegación

• La cabecera permanece visible en escritorio y reúne Playground y Guía cuando existe contenido educativo. El menú conserva categorías y favoritos por lab; tema e idioma se agrupan en Preferencias, junto al enlace a HTML o CSS.
• El índice de las guías se adapta al espacio de lectura disponible, con una columna lateral o un desplegable compacto. Las anclas, el historial y los ajustes del playground se conservan al consultar la guía.
• Los presets usan un selector nativo con nombre y descripción. Los navegadores que admiten personalización muestran las descripciones dentro del picker; los demás mantienen el selector clásico y la explicación del preset elegido.
• Las tarjetas Baseline envuelven su contenido en pantallas estrechas. Copia, CodePen y formato CSS comparten un pie visible fuera del scroll del código.
• Los labs relacionados aparecen antes de las fuentes de cada guía o después del playground si no hay guía. Se mantienen sus enlaces y explicaciones.
• Se mejora el reflow con texto ampliado, la selección en colores forzados y el contraste de los estados Baseline inline de las guías.

24 de octubre de 2026

Plugin de ChatGPT 0.8.0: veinte labs

La versión 0.8.0 de BaselineLab para ChatGPT ya está publicada. El catálogo pasa de trece a veinte labs con siete incorporaciones: filter, backdrop-filter, background-image, light-dark(), contrast-color(), transform 2D y dialog.

Los nuevos labs permiten ajustar filtros y fondos, comparar esquemas de color, explorar transformaciones y probar un diálogo modal. Mantienen la búsqueda y las categorías en español e inglés, el código copiable, el envío manual de ajustes a ChatGPT y los enlaces para continuar en la web con la misma configuración. La actualización también incorpora el logo BL a color en el paquete del plugin.

Guías de controles nativos y listas HTML

Cinco labs incorporan guías educativas en español e inglés, con ejemplos nativos, código copiable, errores frecuentes y fuentes con fecha de consulta:

• accent-color: explica qué controles y estados reciben el acento, su herencia, los esquemas de color y los límites de personalización y contraste.
• select: relaciona label, option y optgroup con los valores del formulario; cubre required, disabled, multiple, size y teclado, y compara select con datalist y select personalizable.
• meter: explica rango, lectura y umbrales low/high/optimum, con etiquetas, unidades y una alternativa textual al color.
• progress: distingue avance determinado e indeterminado, desarrolla value/max y muestra cómo comunicar cambios de fase mediante una demostración manual con mensajes de estado.
• Listas HTML: ayuda a elegir ul, ol o dl, anidar elementos, continuar o invertir la numeración y asociar términos con sus descripciones.

Las guías enlazan contenidos relacionados sobre select personalizable, field-sizing, datalist y tablas. Los ejemplos permanecen independientes del playground y siguen siendo legibles sin JavaScript; la demostración de progress no sube archivos ni inicia operaciones reales. También se corrigen desbordamientos en previews del playground con pantallas estrechas y texto ampliado.

22 de octubre de 2026

Guías de transform, @function, border-shape y usermedia

Cuatro labs incorporan guías educativas en español e inglés, con modelos visuales, código copiable, errores frecuentes y fuentes con fecha de consulta:

• transform: explica orden de operaciones, origen, coordenadas, flujo, contextos de apilamiento y perspectiva, con ejemplos de funciones y propiedades individuales.
• @function: desarrolla parámetros, tipos, valores por defecto, ámbito y ramas condicionales; compara funciones con custom properties y distingue falta de soporte de errores al calcular un valor.
• border-shape: compara uno y dos contornos, grosor, cajas de referencia y clip-path, conservando contenido legible y un borde rectangular cuando la mejora no está disponible.
• usermedia: distingue el elemento de getUserMedia(), explica permisos, constraints y streams, y muestra cómo detener las pistas y gestionar respuestas tardías con ejemplos de código.

Los ejemplos permanecen independientes del playground. Las guías separan soporte nativo, fallback y límites por funcionalidad; abrir la guía de usermedia no solicita acceso a la cámara ni al micrófono. Su entrada en el menú incorpora un icono específico.

21 de octubre de 2026

Mejoras en la navegación y los ejemplos

• Las categorías y los labs se muestran en orden alfabético según el idioma en las colecciones, el menú y los favoritos.
• Los textos de ejemplo de los labs de tipografía están disponibles en español e inglés, tanto en la previsualización como en el código generado.
• Se simplifican ejemplos de labs y guías para centrarlos en la funcionalidad que explican, reduciendo el HTML, CSS y JavaScript de apoyo innecesario.

20 de octubre de 2026

Nuevo lab y guía de input en HTML

El playground de input permite explorar sus 22 tipos, configurar atributos y comprobar la validación nativa y personalizada, los estados readonly/disabled y los datos de un formulario con envíos de demostración locales. Incluye presets, URL compartible y código HTML/JS copiable.

Su guía educativa, disponible en español e inglés, explica tipos, formatos, restricciones, Constraint Validation API, archivos, accesibilidad y compatibilidad por funcionalidad, con ejemplos nativos aislados.

Guías de field-sizing, datalist y tablas HTML

Tres labs incorporan guías educativas en español e inglés con modelos visuales, ejemplos nativos, código HTML/CSS copiable, errores frecuentes y fuentes con fecha de consulta:

• field-sizing: explica el tamaño según el contenido, el efecto del placeholder, los límites de crecimiento, textarea, select y una base usable sin soporte.
• datalist: relaciona input y sugerencias, distingue value y label, compara la entrada libre con select y separa sugerencias de validación.
• Tablas HTML: explica caption y encabezados, scope, grupos y celdas combinadas, asociaciones id/headers y desplazamiento accesible.

Los ejemplos permanecen independientes del playground. Las guías distinguen soporte nativo, fallback y límites de accesibilidad: la disponibilidad de una funcionalidad no garantiza la misma presentación ni anuncios en todas las combinaciones de navegador y lector de pantalla.

16 de octubre de 2026

BaselineLab en ChatGPT

BaselineLab llega a ChatGPT en forma de plugin con trece labs interactivos de HTML y CSS en su primer lanzamiento. Busca por nombre o propósito, filtra por categoría, ajusta ejemplos y copia código reutilizable. Puedes compartir los ajustes con el modelo para pedir una explicación y continuar en la web con la misma configuración.

La colección incluye Grid, Flexbox, Columns, Grid Lanes, border, border-radius, color-mix(), box-shadow, datalist, details, Popover, text-box y text-wrap. Las funcionalidades con soporte parcial muestran avisos en el entorno actual.

Esta es la colección inicial: iremos incorporando más labs. Me gustaría conocer tu experiencia: qué te resulta útil, qué mejorarías y qué funcionalidades te gustaría probar. Puedes enviar feedback a sergiojimenezrubio.dev@gmail.com.

Nuevo lab y guía de if() en CSS

El playground de if() estrena la categoría Funciones y permite probar condiciones style(), media() y supports(), ajustar sus valores y compartir el estado por URL. La preview usa CSS nativo y conserva un fallback identificado.

Su guía educativa, disponible en español e inglés, explica la primera rama verdadera, else, valores inválidos, diferencias con reglas condicionales y mejora progresiva con @supports, con ejemplos y código copiable.

Se corrige también un error de las ayudas contextuales al cerrar el panel de compartir con Escape después de copiar la URL.

Guías de color-mix(), light-dark(), alpha() y contrast-color()

Cuatro labs incorporan guías educativas en español e inglés con modelos visuales, ejemplos nativos, código HTML/CSS copiable, errores frecuentes y fuentes con fecha de consulta:

• color-mix(): explica espacios de interpolación, porcentajes, normalización, transparencia y recorridos del tono.
• light-dark(): relaciona color-scheme, preferencias, tokens y temas locales, y distingue el soporte de colores e imágenes.
• alpha(): compara sustituir y multiplicar el alfa, la composición sobre fondos, opacity y la mezcla con transparente o blanco.
• contrast-color(): explica la elección entre negro y blanco, los fondos reales y los límites de la función, con ejemplos y ratios de contraste.

Las guías se enlazan entre sí y sus ejemplos permanecen independientes del playground. Distinguen soporte por sintaxis y fallback; elegir o transformar un color no garantiza por sí solo accesibilidad ni contraste suficiente.

14 de octubre de 2026

Guías de filter, mix-blend-mode y background-image

Tres labs incorporan guías educativas en español e inglés con modelos visuales, ejemplos nativos, código HTML/CSS copiable, errores frecuentes y fuentes con fecha de consulta:

• filter: explica las funciones y su orden, el efecto sobre el elemento pintado y la diferencia entre drop-shadow() y box-shadow.
• mix-blend-mode: compara modos de mezcla, el fondo que participa, isolation y el orden de pintado, con una receta que separa decoración y texto.
• background-image: explica gradientes y capas, tamaño, posición y repetición, y cuándo usar un fondo decorativo o una imagen en HTML.

Los ejemplos permanecen independientes del playground. Las guías distinguen el soporte por función o valor y muestran cómo conservar texto legible al aplicar efectos visuales.

Nuevas opciones en labs existentes

• text-decoration: añade text-decoration-inset con auto, uno o dos valores, longitudes y porcentajes. La guía compara trazos acortados, extendidos y desplazados, con aviso cuando el navegador no puede aplicar la propiedad.
• Carrusel CSS: añade los modos links y tabs a scroll-marker-group, independientes de before/after. La guía compara su semántica, recorrido de foco y comportamiento de teclado, con navegación de respaldo según soporte.

12 de octubre de 2026

Guías de text-box, text-decoration y text-wrap

Tres labs incorporan guías educativas en español e inglés con modelos visuales, ejemplos nativos, código HTML/CSS copiable, errores frecuentes y fuentes con fecha de consulta:

• text-box: explica métricas tipográficas, ajuste de los extremos del bloque, alineación con iconos e interlínea, con comparaciones entre fuentes.
• text-decoration: compara líneas, estilos y grosor, separación y continuidad del trazo, y muestra enlaces subrayados con foco visible.
• text-wrap: compara wrap y balance en títulos, pretty en párrafos, nowrap y saltos explícitos, e incluye una muestra editable con stable.

Los ejemplos permanecen independientes del playground. Las guías distinguen el soporte por propiedad o valor y conservan texto legible cuando una mejora no se aplica.

10 de octubre de 2026

Guías de Popover API, dialog y details

Tres labs incorporan guías educativas en español e inglés con modelos visuales, ejemplos nativos, código copiable, errores frecuentes y fuentes con fecha de consulta:

• Popover API: explica la invocación declarativa, los modos auto, hint y manual, la capa superior, el cierre y el foco.
• dialog: compara apertura modal y no modal, gestión del foco, cierre y formularios con method="dialog" y returnValue.
• details: relaciona summary y open, disclosures independientes, acordeones exclusivos con name, teclado y el evento toggle.

Las guías se enlazan entre sí para ayudar a elegir el patrón según la interacción. Sus ejemplos permanecen independientes del playground y distinguen el soporte básico de extensiones como hint, los comandos de invocación, closedby y name.

8 de octubre de 2026

Guías de scroll-snap, Carrusel CSS y Grid Lanes

Tres labs incorporan guías educativas en español e inglés con modelos visuales, recetas reutilizables, errores frecuentes y fuentes con fecha de consulta:

• scroll-snap: explica contenedor y destinos, ejes, alineación, mandatory frente a proximity y espacios de ajuste.
• Carrusel CSS: parte de scroll snap y enlaces HTML para añadir botones y marcadores nativos mediante mejora progresiva, con indicaciones de navegación y accesibilidad.
• Grid Lanes: compara masonry con Grid y Columns, explica distribución y orden de lectura, y ofrece una receta con respaldo Grid.

Los ejemplos mantienen código HTML/CSS copiable y resultados independientes del playground. Las guías distinguen soporte, fallback y esquemas conceptuales; los controles CSS de carrusel y Grid Lanes requieren comprobar compatibilidad.

6 de octubre de 2026

Guías de backdrop-filter, customizable select y border

Tres labs incorporan guías educativas con ejemplos, errores frecuentes, compatibilidad y referencias, disponibles en español e inglés:

• backdrop-filter: compara el fondo filtrado con el elemento filtrado, la transparencia y los límites del efecto.
• Customizable select: explica su anatomía, el HTML nativo, el picker, los estados y la experiencia convencional.
• border: relaciona shorthand, lados físicos y lógicos, modelo de caja y diferencias respecto a outline.

Los ejemplos editoriales tienen código HTML/CSS en pestañas nativas y permanecen independientes de los controles del playground. Las guías comparten navegación, énfasis en conceptos clave y un bloque de fuentes con fecha de consulta.

30 de septiembre de 2026

Nuevo lab de alpha()

Modifica la opacidad de un color o multiplica su alfa original con calc(). Compara ambos colores sobre un fondo ajedrezado, copia el CSS y comparte los ajustes en ES/EN.

Acciones de edición más consistentes

Los labs de select, details y color-mix() comparten estilos de añadir y eliminar, con acciones que se adaptan al espacio disponible y papeleras con hover rojo. El lab de details permite eliminar elementos y conserva el foco tras editar la lista.

color-mix() con tres o más colores

Añade y quita colores con porcentajes independientes. La preview comprueba el soporte nativo de la mezcla y mantiene el código generado, los presets y las URLs de dos colores.

Nuevo lab de light-dark()

Prueba colores e imágenes (gradientes, url() y none) con color-scheme claro, oscuro o automático. Incluye soporte independiente, fallback explícito, código CSS plano y con nesting, reset y URL compartible en ES/EN.

28 de septiembre de 2026

Nuevo lab de Custom Elements y Shadow DOM

La colección de selectores incorpora dos vistas para probar el estado propio del host, el contenido asignado a un slot y una parte expuesta.

• Compara reglas internas :host, :host() y ::slotted() con reglas de la página para :state() y ::part().
• Muestra el contexto, el sujeto y el estilo aplicado sin atribuir recuentos de querySelectorAll() a los pseudoelementos.
• Explica el soporte divergente de :host-context() y :has-slotted en la guía.

Incluye rutas y guía ES/EN, código generado, URL compartible y estado Baseline.

25 de septiembre de 2026

Nuevo lab de semántica del documento

La colección de selectores incorpora escenarios para :lang(), :dir(), :defined, :heading y :heading().

• Compara las coincidencias reales de idioma y dirección heredados con atributos explícitos.
• Registra un custom element para observar el cambio de :defined y permite reiniciar la demostración con un nombre nuevo.
• Explica los encabezados semánticos y comprueba el soporte nativo de cada forma experimental de :heading antes de mostrar coincidencias.

El lab incluye guía ES/EN, código generado, estado compartible, compatibilidad Baseline y acceso desde la colección de selectores.

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

Nuevo lab de Popover API

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.