How Firefox Uses MDN Data to Warn About Unsupported CSS

This article provides a technical overview of how the Firefox Developer Tools Compatibility panel identifies cross-browser CSS issues. By leveraging MDN Web Docs' open-source Browser Compatibility Data (BCD), Firefox automatically scans a webpage's active stylesheets, cross-references the used CSS properties against a customizable list of target browsers, and generates real-time warnings for unsupported, deprecated, or experimental styles.

1. The Data Source: MDN Browser Compatibility Data (BCD)

The backbone of the Compatibility panel is the @mdn/browser-compat-data repository. Instead of scraping MDN web pages in real time, Mozilla maintains a machine-readable collection of JSON files that record exact browser support versions for web technologies.

Mozilla bundles a snapshot of this BCD JSON database directly into the Firefox browser's source code. Whenever Firefox is updated, this local database is refreshed to reflect the latest browser compatibility metrics across the web ecosystem.

2. Extracting CSS from the Page

When a developer opens the Firefox Inspector and navigates to the Compatibility panel, the browser's internal inspection engine goes to work. Using the CSS Object Model (CSSOM), Firefox scans the document in two ways:

  • Selected Element: It reads the CSS declarations applied directly to the currently highlighted DOM node.
  • All Elements: It parses the stylesheets across the entire page to aggregate every unique CSS property and value currently in use.

The parser strips these styles down into identifiable tokens—specifically looking at property names (like backdrop-filter), specific property values (like display: subgrid), and vendor prefixes (like -webkit-).

3. Defining the Target Browser Matrix

To know what constitutes a "warning," Firefox needs a baseline of browsers to test against. By default, the Compatibility panel targets the current release, beta, and nightly versions of major desktop and mobile browsers, including Firefox, Google Chrome, Microsoft Edge, and Safari. Developers can access the panel's settings to manually check or uncheck specific browsers and versions to match their project's target audience.

4. The Cross-Referencing Process

Once the active CSS is extracted and the target browsers are set, the Compatibility panel's logic engine queries the bundled BCD JSON files. For every CSS declaration found on the page, Firefox executes the following checks:

  • Property Lookup: It navigates the JSON tree (e.g., css.properties.gap) to find the compatibility data for that specific property.
  • Value Context Lookup: Some CSS properties are universally supported, but newer values for them are not. Firefox checks sub-features in the JSON data to see if a specific value (such as position: sticky) has different support metrics than the parent property (position).
  • Version Comparison: The engine looks at the version_added and version_removed data points in the JSON for each target browser. If a target browser's version is older than the version_added value, or if the value is false (meaning completely unsupported), a mismatch is recorded.
  • Prefix and Alias Checks: If a property is used with a vendor prefix, Firefox checks the BCD to see if the standard, unprefixed version is required by other browsers, or if the prefix is obsolete.
  • Status Evaluation: The engine reads the status object in the BCD to determine if the CSS feature is marked as experimental or deprecated.

5. Generating the Warnings

When the cross-referencing engine detects a discrepancy between the page's CSS and the target browser matrix, it populates the Compatibility panel UI with actionable warnings.

The panel outputs the problematic CSS property and displays the icons of the specific browsers that will fail to render it. Hovering over the browser icon reveals the exact versions affected. Finally, Firefox extracts the mdn_url string from that property's BCD JSON block, turning the CSS property name in the panel into a direct hyperlink to the corresponding MDN Web Docs article so the developer can quickly research workarounds or fallbacks.