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.
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.
When asked about a specific API or CSS feature, I will:
setTimeout(), clearTimeout()setInterval(), clearInterval()requestAnimationFrame(), cancelAnimationFrame()fetch() - Full support with async/awaitXMLHttpRequest - For legacy codeWebSocket - Real-time bidirectional communicationEventSource - Server-Sent Events (SSE) for real-time server pushURL and URLSearchParams - URL manipulationlocalStorage - Persistent key-value storagesessionStorage - Session-only storagedocument, window, navigatorquerySelector(), querySelectorAll()addEventListener(), removeEventListener()createElement(), appendChild(), etc.MutationObserver - Watch DOM changesclick - Enabled by defaultFlutterGestureDetector (double-tap, long-press, etc.)sqflite, hive, or custom pluginonscreen/offscreen events insteadblock - Block-level elementsinline - Inline elementsinline-block - Inline elements with block propertiesdisplay: flexjustify-content, align-items, flex-direction, etc.)position: relativeposition: absoluteposition: fixedposition: stickyfloat: left / float: right - NOT SUPPORTEDclear - NOT SUPPORTEDdisplay: table - NOT SUPPORTEDdisplay: table-row, display: table-cell - NOT SUPPORTEDdisplay: grid - Plannedbackground-color, background-image, background-size, etc.border, border-radius, border-color, etc.box-shadow, text-shadowtransform: translate(), rotate(), scale(), skew()transition - All transition properties@keyframes and animationwidth, height, min-width, max-width, etc.margin, paddingbox-sizing@media queriesvw, vh, vmin, vmax)dvh, lvh, svh)--custom-property):hover, :active, :focus, etc.)::before, ::after)blur, brightness, contrast, etc.)z-index and stacking contextsbackdrop-filter - Not availabledvh, lvh, svhUnderstanding 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.
// ❌ 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');
// ❌ 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
/* ❌ 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; }
/* ❌ 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; }
Check available plugins: https://openwebf.com/en/native-plugins
WebF provides official npm packages for native features. When you need a native feature:
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)
npm install @openwebf/webf-shareOption 2: Production app with Flutter team
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>
);
}
When looking for native features:
See reference.md in this skill for complete compatibility tables.
// Quick compatibility test
if (typeof IndexedDB !== 'undefined') {
console.log('IndexedDB available');
} else {
console.log('IndexedDB NOT available - use alternative');
}
// Check for WebF-specific features
if (typeof WebF !== 'undefined') {
console.log('Running in WebF');
}
function checkStorageOptions() {
const support = {
localStorage: typeof localStorage !== 'undefined',
sessionStorage: typeof sessionStorage !== 'undefined',
indexedDB: typeof indexedDB !== 'undefined'
};
console.log('Storage support:', support);
return support;
}
Yes, but only v3 - v4 is planned for 2026.
# Install Tailwind v3
npm install -D tailwindcss@^3.0 postcss autoprefixer
Some Tailwind utilities may not work if they use unsupported CSS features (like float or table layout).
JavaScript in WebF already runs on a dedicated thread, separate from the Flutter UI thread. Web Workers would provide no performance benefit.
Yes! All popular libraries that use fetch() or XMLHttpRequest work perfectly:
Yes! WebF supports both EventSource (SSE) and fetch() streaming, which are the two main approaches used by AI SDKs:
EventSource with named events, auto-reconnect, and lastEventIdMost work fine as they generate standard CSS:
Not yet - it's coming soon. Use Flexbox for now, which handles most layouts.
If a feature isn't working:
// Good practice: feature detection
if (typeof fetch !== 'undefined') {
// Use fetch
} else {
// Fallback or error message
console.error('fetch not available');
}
reference.md for detailed tablesNeed storage?
├─ Simple key-value → localStorage ✅
├─ Complex database → Native plugin (sqflite/hive) ✅
└─ IndexedDB → ❌ Not available
Need layout?
├─ Flexible layout → Flexbox ✅
├─ Grid layout → Wait for CSS Grid ⏳ or use Flexbox
├─ Float layout → ❌ Use Flexbox instead
└─ Table layout → ❌ Use Flexbox instead
Need graphics?
├─ 2D canvas → Canvas 2D ✅
├─ SVG → SVG ✅
├─ 3D graphics → ❌ WebGL not available
└─ Complex graphics → Flutter rendering ✅
Need networking?
├─ HTTP requests → fetch ✅
├─ Real-time (bidirectional) → WebSocket ✅
├─ Real-time (server push) → EventSource (SSE) ✅
├─ AI streaming → EventSource or fetch ✅
└─ GraphQL → fetch-based clients ✅
Need native features?
├─ Share → @openwebf/webf-share ✅
├─ Camera → Native plugin ✅
├─ Storage → Native plugin ✅
└─ Custom → Flutter team creates plugin ✅
npx skills add openwebf/webf-api-compatibility下载完整 Skill 目录，包含 SKILL.md 及所有相关文件
BluOS CLI (blu) for discovery, playback, grouping, and volume.
Set up and use 1Password CLI (op). Use when installing the CLI, enabling desktop app integration, signing in (single or multi-account), or reading/injecting/running secrets via op.
Best practices for using the oracle CLI (prompt + file bundling, engines, sessions, and file attachment patterns).
Notion API for creating and managing pages, databases, and blocks.
Transcribe audio via OpenAI Audio Transcriptions API (Whisper).
Search for places (restaurants, cafes, etc.) via Google Places API proxy on localhost.
Category:developer