BaselineLab
BaselineLab

Changelog

June 10, 2026

CSS nesting output

A selector has been added to the CSS code block to switch between the default non-nested output and CSS nesting output in labs with multiple selectors.

June 8, 2026

New CSS selector labs

New CSS labs have been added to test pseudo-elements and pseudo-classes visually:

  • CSS pseudo-element labs: ::search-text and ::selection.
  • CSS pseudo-class labs: :current, :empty, :hover, :active, :link, :visited, and :any-link.

June 4, 2026

New spacing lab

A new CSS lab for gap decorations has been added, available starting in Chrome and Edge 149. It lets you test decorations in grid and flex gaps without adding borders, pseudo-elements, or extra markup.

The lab includes controls to apply rules to columns, rows, or both axes, adjust row-rule, column-rule, rule-inset, rule-break, rule-visibility-items, and rule-overlap, and generate copy-ready HTML and CSS.

May 27, 2026

New HTML labs

Three new HTML labs have been added:

  • Lab for the <select> element, which will serve as a basis for an upcoming custom select in CSS.
  • Labs for <geolocation> and <install>, two new elements that allow us to control permissions declaratively from HTML.

May 19, 2026

New pseudo-class, pseudo-element, and HTML labs

New labs have been added to keep exploring modern browser features:

  • CSS pseudo-class labs: :open and :popover-open.
  • CSS pseudo-element labs: ::backdrop and ::details-content.

New color-input web component

BaselineLab color controls now use the color-input web component, created by Adam Argyle, to provide a richer and more modern experience when working with color inputs.

May 8, 2026

AI assistant in labs

An AI assistant has been added to each lab to answer questions about the feature being tested, explain the generated code, and review possible compatibility or accessibility risks.

The assistant uses Vercel AI Gateway and is scoped to each lab context. Basic safety and usage controls have also been added: server-side lab validation, question length limits, sanitized Markdown rendering, and preparation for rate limiting through the Vercel Firewall.

May 5, 2026

New filter lab

A new CSS filter lab has been added: mix-blend-mode.

Generated code improvements

The generated HTML and CSS outputs for several labs have been refined so they work better when copied into a standalone document:

  • Color labs: improvements to accent-color, color-mix(), and contrast-color().
  • Background labs: more complete output for background-color.
  • Border labs: more useful base sizing for visualizing border, border-radius, outline, and corner-shape.
  • Filter labs: base sizing and clearer composition for filter, backdrop-filter, and mix-blend-mode.
  • Forms lab: clearer and scoped output for field-sizing.
  • Spacing labs: more visual outputs for margin and padding.
  • Text lab: improved output and preview for text-align, with longer sample text to make justify easier to see.

May 1, 2026

New filter labs

The following labs have been added:

  • CSS labs for filters: backdrop-filter and filter.

Additionally, style improvements and bug fixes have been made.

April 29, 2026

First BaselineLab labs

BaselineLab starts as an interactive lab for testing modern HTML and CSS features visually, adjusting their settings, and taking reusable code back to your projects.

This first version already includes labs organized by technology, category, and feature. Each lab combines visual controls, live preview, and generated code so you can experiment without switching tools.

Added features:

  • CSS labs for colors: accent-color, color-mix(), and contrast-color().
  • CSS labs for backgrounds: background-color and background-image.
  • CSS labs for borders: border, border-radius, outline, and corner-shape.
  • CSS labs for spacing: margin and padding.
  • CSS lab for forms: field-sizing.
  • CSS labs for scroll and text: scrollbar and text-align.
  • HTML labs for native elements: details, dialog and meter.

What you can do in the labs:

  • Adjust values with selects, fields, ranges, colors, and controls tailored to each property.
  • Switch between physical and logical properties when the lab supports it.
  • Try different units and text directions to validate how the result responds.
  • See the preview update instantly.
  • Copy the generated HTML, CSS, or JavaScript depending on the feature.
  • Share a lab with the current settings through a URL.
  • Check the Baseline compatibility status when available.

The BaselineLab interface has also been updated to include light and dark modes, category navigation, pages available in Spanish and English, support for installation as a PWA, and an experience designed to use the browser as a testing environment.

This release establishes a living foundation for adding new labs and refining the experience over time.

If you have any suggestions for improvement, a lab you’d like to see implemented, an error to report, or simply want to contact me, you can open an issue on GitHub or send me an email.