Changelog

July 27, 2026

A new HTML lab has been added for testing the Popover API with auto, hint, and manual modes. It lets you compare declarative control with popovertarget and popovertargetaction against JavaScript control, configure positioning, ::backdrop, and transitions, start from presets, and copy the generated HTML, CSS, and JavaScript. It also includes an option to disable all custom CSS and inspect the popover using only the browser’s default styles.

New HTML tables lab

A new HTML lab has been added for creating and testing semantic tables with <table>, <caption>, headers, sections, and column groups. It lets you edit rows and columns, configure scope, colspan, and rowspan, highlight columns with <colgroup>, start from presets, and copy the generated HTML and CSS with correct indentation.

New HTML lists lab

A new HTML lab has been added for testing unordered, ordered, and description lists with <ul>, <ol>, and <dl>. It supports creating standalone lists, mixing and nesting them through indentation, adjusting <ol> attributes, starting from presets, and copying the generated semantic markup.

New `<datalist>` lab

A new HTML lab has been added for testing the <datalist> element with different input types. It supports editing suggestions and labels, configuring attributes and constraints, comparing native menus, range ticks, and pickers, and copying the generated HTML.

New `<progress>` lab

A new HTML lab has been added for testing the <progress> element. It lets you edit its accessible label, adjust max and value, compare determinate and indeterminate states, and copy the generated HTML with optional fallback content.

July 23, 2026

New `@function` lab

A new CSS lab has been added for creating and testing custom functions with @function. It lets you define the signature, add or remove parameters with types and default values, configure the returned value, and test conditional results with @media, with a live preview and copy-ready HTML and CSS.

Presets across the labs

Compatible labs now include presets with complete, representative configurations that can be applied as a starting point and then fine-tuned through any control. Choosing a preset instantly updates the controls, preview, and generated code.

July 20, 2026

Favorites for your labs

You can now add or remove any lab from your favorites directly from the lab itself or from the navigation menu. Favorites are saved in the browser’s local storage, so they remain available on future visits from the same device and browser.

A quick-access button has been added to the header with the total number of favorites, along with a menu dropdown showing the five most recent ones. When there are more, a link opens the new favorites page.

This page brings all saved labs together in a grid and lets you search by name or filter by technology. The experience also includes animations when adding and removing favorites across the buttons, cards, and dropdown.

July 16, 2026

New Scroll snap, scroll-padding, scroll-margin, and CSS Carousel labs

A dedicated Scroll snap lab has been added for testing scroll-snap-type, both scroll-snap-align axes, scroll-snap-stop, scroll-padding, and scroll-margin across horizontal, vertical, and two-dimensional scrolling.

The release also includes two focused labs for testing scroll-padding and scroll-margin independently. They support one shared value or different per-side values, switching between the valid units for each property, and visualizing either the snapport region or each target’s outer area.

A lab for building native carousels without JavaScript has also been added, combining scroll snap with ::scroll-button(), ::scroll-marker, and ::scroll-marker-group. It supports horizontal and vertical carousels, customizable browser-generated controls, and an optional native scrollbar.

Visual improvements across the labs

Several visual improvements have also been made across the labs, including clearer previews, better use of space at intermediate viewport sizes, and more consistent controls and interaction states.

July 14, 2026

New Flexbox lab

A new CSS lab for Flexbox has been added, with interactive controls for experimenting with its properties, previewing changes in real time, and copying the generated code.

The navigation menu can now be collapsed at any screen width, allowing each user to adapt the workspace to their preferences.

A new share menu has also been added, allowing users to copy the lab URL or share it on X or LinkedIn. The URL preserves all changes made in the lab through query parameters, so anyone who opens it will see the same configuration.

July 9, 2026

New media pseudo-class labs

New CSS labs have been added for testing state pseudo-classes on <audio> and <video> elements:

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

The lab design has also been improved across different screen widths so controls, previews, and code outputs adapt better on desktop, tablet, and mobile.

July 1, 2026

16 new CSS text labs

The text category has been expanded with 16 new labs for testing typography and text composition properties with interactive controls, live previews, and copy-ready HTML, CSS, and Tailwind CSS v4+ output.

Added labs:

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

The update also adds dedicated icons for the new labs, contextual help for properties that need extra explanation, Spanish and English routes, and AI assistant context. Tailwind output now prioritizes native utilities when available and uses arbitrary values only when the property or value requires it.

June 24, 2026

Tailwind CSS v4+ output in CSS labs

Tailwind CSS v4+ code output has been added to every CSS lab, making it easier to test each feature with modern utilities and arbitrary values where applicable.

Most HTML, CSS, and JavaScript code outputs have also been improved so copied code is more complete, clearer, and easier to paste into standalone tests.

June 16, 2026

New custom select lab

A new CSS lab for customizable select has been added, with controls to test appearance: base-select, selectedcontent, ::picker(select), ::picker-icon, ::checkmark, and compatibility styles through @supports.

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.