CSS prefix workbench

Preview the CSS Autoprefixer will create

Paste CSS, choose browser targets and compare grid, add and remove modes before changing a build pipeline. The preview runs locally in a worker with project config lookup blocked.

  • No CSS leaves the browser
  • PostCSS worker preview
  • Grid caveats visible

Use it before target browser policy changes

Autoprefixer translates Browserslist targets into CSS prefixes and cleanup decisions. This playground makes that output visible for flexbox, grid, appearance, user-select and other common declarations.

The route uses bundled Autoprefixer and PostCSS in a browser worker. It does not read .browserslistrc, package.json, source maps, environment variables or browserslist-config packages.

Prefix preview workbench

Start from a preset, edit CSS and run a controlled preview. Autoprefixer control comments are blocked so the UI options stay authoritative.

Ready

Shows the cost and caveats of enabling legacy grid prefixes.

CSS and targets

Preview result

Run the preview to see output CSS, diagnostics and a copyable PostCSS config.

Autoprefixer review notes

Targets decide output

The same CSS can produce different prefixes when Browserslist targets change. Treat the preview as review evidence, then confirm the real repository build.

Grid modes need context

Grid template prefixes can help legacy review, but autoplace is not a full IE layout guarantee. Keep the caveat visible in pull requests.

Project lookup is blocked

A public playground should not resolve packages, read project files, load previous source maps or obey user-provided Autoprefixer control comments.

Use these when CSS prefix output depends on browser targets, build configuration or JavaScript transforms.