webf-api-compatibility

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 runtime

Key Insight: WebF implements core web standards for building apps, not for web browsing.

Finding Alternatives

For IndexedDB → Use Native Storage

// ❌ IndexedDB not available
// const db = await openDB('mydb', 1);

// ✅ Option 1: localStorage for simple key-value storage (RECOMMENDED for most cases)
localStorage.setItem('user', JSON.stringify({ name: 'Alice', age: 30 }));
const user = JSON.parse(localStorage.getItem('user'));

// ✅ Option 2: Request custom native plugin from Flutter team
// For complex database needs (SQL, large datasets, queries):
// - Flutter team creates native plugin using sqflite, Hive, or Isar
// - Plugin exposed to JavaScript via WebF module system
// - See: https://openwebf.com/en/docs/add-webf-to-flutter/bridge-modules

// Example of custom storage plugin (created by Flutter team):
// import { AppStorage } from '@yourapp/storage-plugin';
// await AppStorage.save('key', { complex: 'data' });
// const data = await AppStorage.get('key');

For WebGL → No Alternative

// ❌ WebGL not available
// const gl = canvas.getContext('webgl');

// ✅ Use Canvas 2D instead (limited graphics)
const ctx = canvas.getContext('2d');

// ✅ Or use Flutter's rendering for complex graphics
// Flutter team can render directly

For Float Layout → Use Flexbox

/* ❌ Float layout not supported */
.sidebar { float: left; width: 200px; }
.content { float: right; width: calc(100% - 200px); }

/* ✅ Use Flexbox instead */
.container { display: flex; }
.sidebar { width: 200px; flex-shrink: 0; }
.content { flex-grow: 1; }

For Table Layout → Use Flexbox

/* ❌ Table layout not supported */
.table { display: table; }
.row { display: table-row; }
.cell { display: table-cell; }

/* ✅ Use Flexbox instead */
.table { display: flex; flex-direction: column; }
.row { display: flex; }
.cell { flex: 1; }

For Native Device Features → Use WebF Plugins

Check available plugins: https://openwebf.com/en/native-plugins

WebF provides official npm packages for native features. When you need a native feature:

1. First, check the available plugins list at https://openwebf.com/en/native-plugins
2. Ask the user about their environment before providing setup instructions
3. Follow the plugin's installation guide for their specific environment

Step 1: Determine Your Environment

IMPORTANT: Setup differs based on your development environment.

Question: "Are you testing in WebF Go, or working on a production app?"

Option 1: Testing in WebF Go (Most web developers)

• ✅ Just install npm package
• ✅ No additional setup needed
• Example: npm install @openwebf/webf-share

Option 2: Production app with Flutter team

• ⚠️ Your Flutter developer needs to add the Flutter plugin first
• ⚠️ Once they've done that, you install the npm package
• ⚠️ Coordinate with your Flutter team - give them the plugin documentation

Example: Native Share Plugin

If using WebF Go:

# Just install npm package
npm install @openwebf/webf-share

If integrating with Flutter app:

# 1. Add Flutter plugin first (in pubspec.yaml)
# See: https://openwebf.com/en/native-plugins/webf-share

# 2. Then install npm package
npm install @openwebf/webf-share

Usage in JavaScript:

import { WebFShare } from '@openwebf/webf-share';

// Check availability first
if (WebFShare.isAvailable()) {
  // Share text
  await WebFShare.shareText({
    text: 'Check this out!',
    url: 'https://example.com',
    title: 'My App'
  });
}

// Or use React hook
import { useWebFShare } from '@openwebf/webf-share';

function ShareButton() {
  const { share, isAvailable } = useWebFShare();

  if (!isAvailable) return null;

  return (
    <button onClick={() => share({ text: 'Hello!' })}>
      Share
    </button>
  );
}

Finding the Right Plugin

When looking for native features:

1. Check plugin list: https://openwebf.com/en/native-plugins
2. If plugin exists: Follow its installation guide
3. If no plugin exists:
   • For WebF Go users: Feature may not be available
   • For Flutter integration: Create custom plugin using WebF Module System

How to Check Compatibility

1. Check the Compatibility Table

See reference.md in

---

Content truncated.