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 communication
• 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 (s

...