/webf-api-compatibility

name: webf-api-compatibility
description: Check Web API and CSS feature compatibility in WebF - determine what JavaScript APIs, DOM methods, CSS properties, and layout modes are supported. Use when planning features, debugging why APIs don't work, or finding alternatives for unsupported features like IndexedDB, WebGL, float layout, or CSS Grid.

WebF API & CSS Compatibility

> **Note**: WebF development is nearly identical to web development - you use the same tools (Vite, npm, Vitest), same frameworks (React, Vue, Svelte), and same deployment services (Vercel, Netlify). This skill covers **one of the 3 key differences**: checking API and CSS compatibility before implementation. The other two differences are async rendering and routing.

**WebF is NOT a browser** - it's a Flutter application runtime that implements W3C/WHATWG web standards. This means some browser APIs are not available, and some CSS features work differently.

This skill helps you quickly check what's supported and find alternatives for unsupported features.

Quick Compatibility Check

When asked about a specific API or CSS feature, I will:

1. Check if it's in the supported list 2. Provide the compatibility status (✅ Supported, ⏳ Coming Soon, ❌ Not Supported) 3. Explain why it's not supported (if applicable) 4. Suggest alternatives or workarounds

JavaScript & Web APIs

✅ Fully Supported

Timers & Animation

• `setTimeout()`, `clearTimeout()`
• `setInterval()`, `clearInterval()`
• `requestAnimationFrame()`, `cancelAnimationFrame()`

Networking

• `fetch()` - Full support with async/await
• `XMLHttpRequest` - For legacy code
• `WebSocket` - Real-time bidirectional communication
• `EventSource` - Server-Sent Events (SSE) for real-time server push
• `URL` and `URLSearchParams` - URL manipulation

Storage

• `localStorage` - Persistent key-value storage
• `sessionStorage` - Session-only storage

Graphics

• **Canvas 2D** - Full 2D canvas API
• **SVG** - SVG element rendering

DOM APIs

• `document`, `window`, `navigator`
• `querySelector()`, `querySelectorAll()`
• `addEventListener()`, `removeEventListener()`
• `createElement()`, `appendChild()`, etc.
• `MutationObserver` - Watch DOM changes
• **Custom Elements** - Define custom HTML elements

Events

• `click` - Enabled by default
• Other events via `FlutterGestureDetector` (double-tap, long-press, etc.)

⏳ Coming Soon

• **CSS Grid** - Planned for future release
• **Tailwind CSS v4** - Planned for 2026

❌ NOT Supported

Storage

• **IndexedDB** - Use native plugin instead
• Alternative: `sqflite`, `hive`, or custom plugin

Graphics

• **WebGL** - Not available, no alternative
• **Web Animations API** (JavaScript) - CSS animations work, but not the JS API

Workers

• **Web Workers** - Not needed
• Why: JavaScript already runs on dedicated thread in WebF
• No performance benefit from workers

DOM

• **Shadow DOM** - Not used for component encapsulation
• Use framework component systems instead (React, Vue, etc.)

Observers

• **IntersectionObserver** - Use `onscreen`/`offscreen` events instead

CSS Compatibility

✅ Fully Supported Layout Modes

Standard Flow

• `block` - Block-level elements
• `inline` - Inline elements
• `inline-block` - Inline elements with block properties

Flexbox (Recommended)

• `display: flex`
• All flex properties (`justify-content`, `align-items`, `flex-direction`, etc.)
• **This is the recommended layout approach**

Positioned Layout

• `position: relative`
• `position: absolute`
• `position: fixed`
• `position: sticky`

Text & Direction

• RTL (right-to-left) support
• All text alignment and direction properties

❌ NOT Supported Layout Modes

Float Layout (Legacy)

• `float: left` / `float: right` - **NOT SUPPORTED**
• `clear` - **NOT SUPPORTED**
• **Why**: Legacy layout model, use Flexbox instead

Table Layout

• `display: table` - **NOT SUPPORTED**
• `display: table-row`, `display: table-cell` - **NOT SUPPORTED**
• **Why**: Use Flexbox or CSS Grid (when available)

⏳ Coming Soon

CSS Grid

• `display: grid` - **Planned**
• All grid properties - **Planned**
• **Use Flexbox until Grid is available**

✅ Fully Supported CSS Features

Colors & Backgrounds

• All color formats (hex, rgb, rgba, hsl, hsla, named)
• `background-color`, `background-image`, `background-size`, etc.
• Linear gradients, radial gradients

Borders & Shapes

• `border`, `border-radius`, `border-color`, etc.
• `box-shadow`, `text-shadow`

Transforms (Hardware Accelerated)

• `transform: translate()`, `rotate()`, `scale()`, `skew()`
• 2D and 3D transforms
• **Use for smooth animations**

Animations & Transitions

• `transition` - All transition properties
• `@keyframes` and `animation`
• **CSS animations are fully supported**

Layout & Sizing

• `width`, `height`, `min-width`, `max-width`, etc.
• `margin`, `padding`
• `box-sizing`

Responsive Design

• `@media` queries
• Viewport units (`vw`, `vh`, `vmin`, `vmax`)
• **Some advanced units not supported** (`dvh`, `lvh`, `svh`)

Advanced CSS

• CSS variables (`--custom-property`)
• Pseudo-classes (`:hover`, `:active`, `:focus`, etc.)
• Pseudo-elements (`::before`, `::after`)
• Filters (`blur`, `brightness`, `contrast`, etc.)
• `z-index` and stacking contexts

⚠️ Partially Supported

Tailwind CSS

• **v3** - ✅ Supported (some utilities may not work if they use unsupported features)
• **v4** - ❌ Not yet supported (planned for 2026)

❌ NOT Supported CSS Features

• **`backdrop-filter`** - Not available
• **Advanced viewport units** - `dvh`, `lvh`, `svh`

Architecture Differences

Understanding why some features aren't available:

| Aspect | Browser | WebF | |--------|---------|------| | Runtime | V8 / SpiderMonkey | QuickJS (ES6+) | | DOM | Blink / Gecko | Custom C++ + Dart | | Layout | Browser engine | Flutter rendering | | Purpose | General web browsing | App runtim