Feature: implement CSS.supports() and runtime feature detection API

[daleydeng]

Summary

WebF currently lacks CSS.supports() (MDN), making it impossible for libraries and applications to programmatically detect which CSS features are available at runtime.

Many UI libraries (Base UI, Radix, Headless UI, etc.) rely on CSS.supports() for progressive enhancement and graceful degradation. Without it, developers must use fragile workarounds like el.style.setProperty() + getPropertyValue(), which can produce false positives (e.g., display: grid is accepted by the style API but doesn't actually work in WebF).

Proposed: CSS.supports()

What it does

// Two-argument form
CSS.supports('display', 'flex')    // true
CSS.supports('display', 'grid')    // false (not yet supported)
CSS.supports('backdrop-filter', 'blur(10px)')  // false

// Condition string form
CSS.supports('(display: flex) and (gap: 1px)')  // true

Implementation approach

WebF already has a CSS parser that validates property/value pairs (used for el.style). CSS.supports() could reuse this by:

1. Exposing a supports(property, value) static method on the CSS global object
2. Internally calling the existing CSS parser to check if the property is recognized and the value is valid for that property
3. Returning false for properties/values that are parsed but not actually implemented (e.g., grid, float)

This should be relatively lightweight since the CSS parsing infrastructure already exists.

W3C Spec

• CSS Conditional Rules Module Level 3 — CSS.supports()

---

Bonus: JS API feature detection

Beyond CSS, there's no standard way to check whether a JavaScript API is fully implemented vs. partially stubbed in WebF. For example:

• typeof PointerEvent may return 'function' but new PointerEvent('click') throws
• node.compareDocumentPosition may exist as a property but not function correctly
• Intl object may be undefined entirely

Idea: WebF.supports() (non-standard)

A WebF-specific API that reports implementation status:

// Check JS API support
WebF.supports('PointerEvent')           // false
WebF.supports('compareDocumentPosition') // false
WebF.supports('Intl')                    // false
WebF.supports('MutationObserver')        // true
WebF.supports('IntersectionObserver')    // false

// Check CSS support (mirrors CSS.supports)
WebF.supports('css', 'display', 'grid')  // false
WebF.supports('css', 'display', 'flex')  // true

This would be extremely valuable for:

• Library authors building WebF-compatible packages
• Diagnostic tools (we built a compatibility detection page that currently uses fragile heuristics)
• Graceful degradation in applications

---

Context

We discovered these gaps while testing Base UI (@base-ui/react) compatibility in WebF. Several components failed due to missing APIs:

Component	Missing API	Effect
Switch, Checkbox	new PointerEvent() constructor	Clicks don't work
Accordion, Tabs, Slider, Select, Menu	compareDocumentPosition	TypeError crash
Progress	Intl.NumberFormat	ReferenceError crash

Having CSS.supports() and/or WebF.supports() would let library authors detect and work around these limitations gracefully.

Environment

• WebF version: 0.29.x
• Testing with React 19 + Tailwind CSS v3 + Base UI