Changelog

September 14, 2026

New open states lab

The selector collection brings [open], :open, and :popover-open into one experience that compares them without presenting them as equivalents.

Switch between real details, dialog, select, input type="color", and popover scenarios.
Keep selector and scenario independent to show both matches and combinations that do not apply.
Preserve the previous :open and :popover-open URLs through permanent redirects, and migrate stored favorites to the new destination.

The lab includes ES/EN routes, shareable state, Baseline support, calculated specificity, and a localized guide for every selector.

New media states lab

Seven audio and video states now share one lab in the selector collection: :playing, :paused, :seeking, :buffering, :stalled, :muted, and :volume-locked.

Native audio and video controls remain available alongside direct play, pause, seek, and mute actions.
Real selector matches stay separate from an explicit visual simulation for transient or platform-dependent states.
Every previous URL permanently redirects to the new destination with its equivalent state selected.

The experience includes shareable state, generated HTML/CSS, and a bilingual guide grouped by playback, loading, and sound.

September 9, 2026

New form states lab

The selector collection adds a sixth lab for comparing sixteen form pseudo-classes on native HTML controls.

Availability, editability, choices, requirements, validity, and ranges are grouped into scenarios where opposite states share the same form.
Change radios, checkboxes, values, and constraints to observe the browser’s real response, including :user-valid and :user-invalid after interaction.
Learn the difference between :default and :checked; JavaScript is used only for the indeterminate property, which has no equivalent HTML attribute.

The lab includes ES/EN routes, shareable state, and a guide with specificity and examples for every selector.

New links, actions, and focus lab

The selector collection brings :any-link, :link, :visited, pointer and focus states, :target, and :scope together in a fifth lab with real scenarios.

Test pointer, press, keyboard focus, descendant focus, and fragment navigation without storing transient states in the URL.
Learn link-state cascade order and why :visited history cannot become an observable JavaScript match count.
Use a bilingual guide with calculated specificity and examples for every selector.

The five previous link, :hover, and :active labs now converge on this route; their URLs and stored favorites migrate to the equivalent destination.

September 4, 2026

New structural selectors lab

The selector collection now includes a fourth lab for comparing :root, :empty, and pseudo-classes that depend on sibling position.

Switch between first, last, and only-child cases and their type-based equivalents.
Use the odd and even keywords, An+B formulas, reverse counting, and of <selector-list> filters in :nth-child() and :nth-last-child().
Explore three distinct HTML scenarios, presets from several families, and a guide with marked examples, calculated specificity, and contextual Baseline support.

Selector guides now distinguish the base form’s specificity, shown in each entry, from the specificity of every concrete example. They also avoid repeating syntax when it exactly matches the entry name.

Migrating the `:empty` lab

The empty element, comment, whitespace, and content cases now share one comparison scenario in the new lab. The previous route permanently redirects to the equivalent destination, and stored favorites migrate to the new path.

September 3, 2026

New CSS selectors collection

BaselineLab introduces the Selectors category as an incremental collection of labs that group related syntax and compare it through HTML scenarios suited to each mental model.

Three initial labs

Basic and attribute selectors: type, universal, class, ID, compound selectors, attribute operators, and case-sensitivity modifiers.
Combinators and relationships: descendants, children, and adjacent or subsequent siblings.
Logical and relational selectors: selector lists as OR, compounds as AND, :is(), :where(), :not(), and :has().

A shared playground

All three labs include presets and distinct scenarios, URL-restorable state, copy-ready HTML and CSS, and an isolated preview that highlights matches without affecting the surrounding interface. The header shows the current selector, browser support, matching element count, and specificity as an (ID, CLASS, TYPE) tuple.

Guides for understanding every selector

Each lab includes a bilingual guide with one entry per selector. Entries explain what it selects, how its specificity is calculated, important restrictions and common misconceptions, and provide multiple examples with matching lines marked. Selectors with distinct support also show their Baseline status and a link to the full reference.

August 27, 2026

Improved syntax highlighting

Code in labs and guides now shares a VS Code Plus-inspired syntax palette that adapts automatically to light and dark modes. Recognition of modern CSS units and at-rules, HTML attributes containing special characters, and current JavaScript keywords has also been improved while preserving real-time updates to generated code.

New visual CSS Multicolumn guide

The CSS Multicolumn lab now includes a visual guide to explain flow across column boxes, the relationship between width and count, and the behavior of spans and breaks. It features an interactive preview for testing container and content properties, examples of common pitfalls, and visual comparisons with CSS Grid and Flexbox.

August 25, 2026

New global search

BaselineLab now includes a global search for finding labs, guides, and pages from anywhere on the site. Results follow the active language, open in an accessible dialog, and exclude interactive previews and generated code to provide clearer matches.

Baseline statuses in collections

Cards on the CSS, HTML, and Favorites pages now display each lab’s Baseline status with the official iconography. A second filter level also makes it possible to combine category or technology with widely available, newly available, limited availability, or missing data.

August 24, 2026

New labs RSS feed

BaselineLab now includes an RSS feed for following newly published HTML and CSS labs. It is available in Spanish and English and can be opened from the RSS link next to the changelog in the footer.

New visual CSS Grid guide

The CSS Grid lab now includes a visual guide to explain grid lines and tracks, explicit and implicit grids, and item placement. It features an interactive preview for testing container and item properties, examples of common pitfalls, and visual comparisons with Flexbox and Grid Lanes.

August 23, 2026

Expanded visual Flexbox guide

The Flexbox guide now includes new diagrams for understanding the flex formatting context and how items negotiate their size, together with an interactive sticky preview on large screens for testing each property independently and resetting its values. Common pitfalls are now organized by expected result, cause, and solution; a visual Flexbox and Grid comparison links to the related lab; and the references and responsive layout have been refined for easier reading while preserving the current position when the viewport is resized.

August 21, 2026

New visual icons for layout controls

Controls in Flexbox, Grid, Grid Lanes, CSS Multicolumn, Scroll Snap, and CSS Carousel now include new icons that make each option’s direction, alignment, distribution, and behavior easier to recognize at a glance. The diagrams share a clearer and more consistent style, distinguish containers from their items, and maintain suitable contrast in both light and dark modes.

August 20, 2026

New visual Flexbox guide

The Flexbox lab now includes a visual guide to help users understand its axis model, container and item properties, syntax, values, and common pitfalls. It includes visual examples, external references, and shortcuts back to the playground so each concept can be tested interactively. This guide format will be introduced progressively across the rest of the labs in future updates.

Interface and responsive design refresh

Multiple design improvements have been made across navigation, headers, the sidebar menu, labs, and the CSS, HTML, and Favorites pages. Alignment, spacing, radii, surfaces, and interaction states are now more consistent; Safari behavior and small-screen layouts have been refined; and scrolling, footers, lab layouts, and guide spacing have been adjusted for a more cohesive experience across the site.

August 17, 2026

New CSS and HTML collection pages

New pages have been added for exploring every CSS and HTML lab organized by category. Both include search, filters with result counts, cards with favorite actions, and responsive navigation for sharing direct links to each category, switching between them, and restoring the selected state when moving backward or forward through browser history.

August 13, 2026

Every lab now includes three contextual links to other related tools, with icons and descriptions specific to each destination. On large screens they open from a popover beside the lab actions, while layouts with page scrolling display them as an integrated section.

More consistent previews and code

Previews now use two shared heights: a compact one for simple demos and a larger one for those that need more space or generate scrolling. Compatible labs also let you change the width from the preview itself to test responsive behavior without resizing the whole window. Scrolling, spacing, and panel stretching have been refined to make better use of the available space, while generated code now includes line numbers and tabs with a consistent height.

Reorganized lab actions

Header actions now follow a shared order: Ask AI, Related labs, Share, and Favorites. Every button uses the same height and visual surface, while the report issue link has moved to the footer to reduce noise in the lab’s primary area.

New CSS Grid Lanes lab

A new CSS lab has been added for experimenting with display: grid-lanes and inline-grid-lanes. It supports switching between waterfall and brick layouts, combining responsive, fixed, or asymmetric tracks, adjusting flow-tolerance with different units, separating gaps, and configuring each card’s span and placement. The preview includes a width control for testing responsive behavior without resizing the window and a selector for comparing the native result with the progressive fallback. It includes four presets, focus order that can be verified with Tab, shareable URL state, Baseline context, and copy-ready HTML, CSS, nested CSS, and Tailwind CSS.

New CSS Multicolumn lab

A new CSS lab has been added for distributing editorial content with columns. It supports comparing a fluid width, a fixed count, or the combination of column-width and column-count, adjusting column-gap and column-rule, spanning the heading across every column, and avoiding breaks inside sections. It includes four presets, a width control for testing responsive layout behavior, shareable URL state, Baseline context, and copy-ready HTML, CSS, nested CSS, and Tailwind CSS.

August 11, 2026

New `border-shape` lab

A new CSS lab has been added for creating non-rectangular borders with circle(), ellipse(), polygon(), and shape(). It lets you compare stroke and fill modes, change the reference box, adjust geometry and appearance, and start from four presets. It also includes a progressive clip-path fallback, shareable URL state, Baseline context, and copy-ready HTML, CSS, nested CSS, and Tailwind CSS.

New `transform` lab

A new CSS lab has been added for composing 2D and 3D transforms with translate(), rotate(), scale(), skew(), and perspective(). It supports changing the function order, adjusting transform-origin with custom percentages or keywords, comparing the result with the original position, and starting from five presets. It also includes shareable URL state, Baseline context for 2D and 3D transforms, and copy-ready HTML, CSS, and Tailwind CSS output.

New `text-shadow` and `box-shadow` labs

Two CSS labs have been added for creating text and box shadows with up to three ordered layers. They support adjusting offsets, blur, and color; the box-shadow lab also includes spread, inset shadows, and border-radius. Both labs provide presets, a live preview, shareable URLs, and copy-ready HTML, CSS, and Tailwind CSS output.

New `balance` value in the Flexbox lab

The Flexbox lab now includes the new balance value for flex-wrap, which attempts to distribute items across lines of similar lengths. The option updates the preview, shareable URLs, and the generated CSS and Tailwind CSS output.

New `text-fit` lab

A new CSS lab has been added for testing text-fit with the none, grow, and shrink values, the consistent, per-line, and per-line-all modes, and an optional percentage that limits the scaling factor. It includes four presets, editable text, controls for width, base font size, and white-space, support detection, shareable URLs, and copy-ready HTML, CSS, and Tailwind CSS output.

New `<usermedia>` lab

A new HTML lab has been added for testing the <usermedia> element as a declarative, browser-managed control for requesting combined camera and microphone access. It supports configuring video and audio constraints through setConstraints(), starting from four presets, previewing the MediaStream, stopping its tracks, and copying the generated HTML and JavaScript. It also includes support detection and progressive enhancement with a getUserMedia() fallback for browsers that do not implement the element yet.

July 30, 2026

New CSS Grid lab

A new CSS lab has been added for designing and testing complete two-dimensional grids. It lets you combine equal-sized or custom row and column tracks, create and validate grid-template-areas, configure auto-placement, gaps, and alignment, and place each item automatically, with lines and spans, or through named areas. It also includes five representative presets, an interactive preview, shareable URLs, and copy-ready HTML, CSS, nested CSS, and Tailwind CSS output.

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.