Browser Compatibility Checker

The Browser Compatibility Checker answers one very specific question: can the browser you are using right now understand a given CSS declaration, such as display: grid or text-wrap: balance? You type a CSS property and a value, and the page immediately tells you whether your current browser supports the pair. Under the hood it uses the browser's own CSS.supports interface. Here is what it cannot do: it only checks this one browser, so it cannot show a table comparing every version of Chrome, Firefox, and Safari, and it does not check JavaScript APIs or HTML features. It covers CSS properties and values only.

How to use it

1. In the 'CSS Property' field, type a property name such as aspect-ratio. When the page opens it holds display.
2. In the 'Value' field, type the matching value, such as 16/9. It starts as grid.
3. There is no button to press. As long as neither field is empty, a result appears right away: a green check with 'Your current browser supports property: value', or a red cross with 'Your current browser does not support property: value'.
4. To try common cases quickly, click one of the buttons under 'Quick Test Common Properties', such as display: flex, backdrop-filter: blur(10px), or color: oklch(0.7 0.15 180). It fills both fields and shows the result.

A certain example, and how to read results

Here is an example that does not depend on any particular browser: enter display as the property and banana as the value. The result is always 'does not support', because banana is not a valid value of display. That shows a red cross can mean several things: a misspelled property, an invalid value, or a browser that really lacks the feature. So when you see 'does not support', first check spelling, units, and format; for instance, 16/9 is the right way to write an aspect-ratio value. For newer features such as text-wrap: balance or container-type: inline-size, the answer depends on your browser and its version, and the same page can give different results in older and newer browsers. That is the practical use: checking whether a particular user's browser recognizes a syntax you plan to rely on. We do not list browser version numbers here because they change as releases ship.

Supported input and known limits

• It checks only the browser you are using. There is no cross-browser or cross-version data. For a full compatibility matrix, use a dedicated database such as caniuse.com, which the note on the page recommends.
• It checks only whether a property and value pair can be parsed. It cannot tell you whether it renders correctly on a page or reveal implementation bugs.
• When the property or value is empty or only spaces, no result is shown. Leading and trailing spaces are ignored.
• At-rules (such as @container), selectors (such as :has()), JavaScript APIs, and HTML elements are not checked.
• The result is recomputed on every keystroke, so it is normal for it to change as you type, and a half-typed value may briefly show as unsupported.
• For a declaration like gap: 10px, the check is only whether the property is recognized. It does not check whether it is used on a flex or grid container.
• The quick-test buttons are a fixed set of 10 examples, with gap appearing twice (1rem and 10px). You cannot add or remove any.
• A very old browser without the CSS.supports interface may not display the tool properly.

FAQ: Can it tell me which version first supported a feature?

No. It reports on the browser you have open right now. For version information, use a dedicated compatibility database, and combine it with the browser statistics of your actual audience to decide whether you need a fallback.

FAQ: It says supported. Does that mean every visitor will see it correctly?

No. It means your current browser recognizes the declaration. Other browsers, other versions, or browsers with different settings may differ. You still need to test in your target browsers before release.

FAQ: Can I test vendor-prefixed or custom properties?

The code passes whatever property and value you type straight to the browser's CSS.supports, so a prefixed form such as -webkit-backdrop-filter can be typed in and the browser decides. There are no dedicated example buttons for them.

FAQ: A correct-looking declaration shows as unsupported. Why?

The usual cause is the value's format: a missing unit, a trailing semicolon, or spacing or case that breaks the syntax. Enter only the value, without a semicolon, and do not paste the entire declaration into one field. The other possibility is that the browser really does not support it.

Privacy and processing

The check runs entirely in your browser. The tool calls CSS.supports directly and makes no network request, and what you type is not sent to or stored on a server. When you reload the page, the fields go back to their defaults.