Browserslist Query Evaluator & Validator

Overview

A clean, single-page, high-performance utility designed to help frontend developers write, test, and debug their browserslist configuration strings. This tool provides instant visual feedback on which browsers and versions will be targeted by a specific query string, helping developers optimize their build targets and reduce bundle bloat.

Core Features

• Live Parsing Engine: Real-time evaluation of input strings using a lightweight implementation of the standard browserslist query logic.
• Compatibility Dashboard: A clean, tabular view showing the browser name, version, and the approximate percentage of global usage.
• Error Highlighting: Real-time syntax validation with descriptive error messages if the query string is malformed or uses unsupported selectors.
• Quick-Start Presets: A dropdown menu of common industry patterns (e.g., "last 2 versions", "defaults", "> 0.5%, last 2 versions, Firefox ESR") for rapid testing.
• Stats Toggle: Ability to view results grouped by browser (e.g., all Chrome versions) or listed individually.

UI Layout Specification

1. Header

• Centered, clean branding-free title.
• Subtitle explaining the purpose: "Optimizing your frontend build configuration, one string at a time."

2. Main Tool Area

• Input Section: A large, monospace text area for the query string. Focus states should trigger a soft blue glow.
• Action Bar: A primary "Evaluate" button (prominent) and a "Reset" button (ghost style).
• Configuration Settings: A small toggle row for mobile-only or include-dead-browsers options.

3. Results Section

• Summary Cards: Three metric cards: "Browsers Targeted", "Global Coverage", and "Last Updated (Data)".
• Results Table: A clean table layout. Columns: Browser Icon/Name, Version, Usage %, and Release Date.
• Empty State: An inviting, illustration-free container prompting the user to "Enter a query to begin."

Technical Implementation Constraints

• Architecture: One single .html file. CSS in <style> tag, JS in <script> tag.
• State Management: All state must be handled in memory (variables). NO localStorage, sessionStorage, or cookies.
• Dependencies: Use CDN links for the browserslist and caniuse-lite logic (via UMD bundles) to enable browser-based parsing.
• Sandboxed Environment: Ensure all DOM operations are safe for a sandboxed iframe. No alert(), confirm(), or prompt().
• Responsiveness: Use CSS Grid and Flexbox for a fluid layout. Stack the input and results vertically on mobile; use a two-column layout on desktops.

Aesthetic & Design Rules

• Color Palette: High-contrast professional palette. White background (#ffffff), soft slate grey text (#334155), primary accent blue (#2563eb), and subtle border greys (#e2e8f0).
• Typography: Sans-serif, human-readable fonts (System Stack: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto).
• Animations: All transitions (hover states, table row appearance) must use transition: all 0.2s ease-in-out.
• Shadows: Use subtle, refined box-shadows on cards to create depth without cluttering the UI.