# WebF API 和 CSS 兼容性 > **注意**：WebF 开发与 Web 开发几乎相同 - 您使用相同的工具（Vite、npm、Vitest）、相同的框架（React、Vue、Svelte）和相同的部署服务（Vercel、Netlify）。此技能涵盖 **3 个关键区别之一**：在实施之前检查 API 和 CSS 兼容性。另外两个区别是异步渲染和路由。 **WebF 不是浏览器** \- 它是一个实现 W3C/WHATWG Web 标准的 Flutter 应用程序运行时。这意味着某些浏览器 API 不可用，并且某些 CSS 功能的工作方式不同。此技能可帮助您快速检查支持的功能并找到不支持的功能的替代方案。 ## 快速兼容性检查当被问及特定的 API 或 CSS 功能时，我会： 1. 检查是否在支持列表中 2. 提供兼容性状态（✅ 支持，⏳ 即将推出，❌ 不支持） 3.解释为什么不支持（如果适用） 4.提出替代方案或解决方法 ## JavaScript 和 Web API ### ✅ 完全支持 #### 定时器和动画 * `setTimeout()`, `clearTimeout()` * `setInterval()`, `clearInterval()` * `requestAnimationFrame()`, `cancelAnimationFrame()` #### 网络 * `fetch()` \- 完全支持 async/await * `XMLHttpRequest` \- 对于遗留代码 * `WebSocket` \- 实时双向通信 * `EventSource` \- 用于实时服务器推送的服务器发送事件 (SSE) * `URL` 和 `URLSearchParams` \- URL 操作 #### 存储 * `localStorage` \- 持久键值存储 * `sessionStorage` \- 仅会话存储 #### 图形 * **Canvas 2D** \- 完整的 2D 画布 API * **SVG** \- SVG 元素渲染 #### DOM API * `文档`、`窗口`、`导航器` * `querySelector()`, `querySelectorAll()` * `addEventListener()`, `removeEventListener()` * `createElement()`、`appendChild()` 等 * `MutationObserver` \- 观察 DOM 变化 * **自定义元素** \- 定义自定义 HTML 元素 #### 活动 * `click` \- 默认启用 * 通过 `FlutterGestureDetector` 的其他事件（双击、长按等） ### ⏳ 即将推出 * **CSS 网格** \- 计划未来发布 * **Tailwind CSS v4** \- 计划于 2026 年 ### ❌ 不支持 #### 存储 * **IndexedDB** \- 使用本机插件代替 * 替代方案：`sqflite`、`hive` 或自定义插件 #### 图形 * **WebGL** \- 不可用，别无选择 * **Web Animations API** (JavaScript) - CSS 动画可以工作，但 JS API 不行 #### 工人 * **Web Workers** \- 不需要 * 原因：JavaScript 已经在 WebF 中的专用线程上运行 * 工人没有绩效收益 #### DOM * **Shadow DOM** \- 不用于组件封装 * 使用框架组件系统代替（React、Vue等） #### 观察员 * **IntersectionObserver** \- 使用 `onscreen`/`offscreen` 事件代替 ## CSS 兼容性 ### ✅ 完全支持的布局模式 #### 标准流程 * `block` \- 块级元素 * `inline` \- 内联元素 * `inline-block` \- 具有块属性的内联元素 #### Flexbox（推荐） * `显示：弹性` * 所有 Flex 属性（`justify-content`、`align-items`、`flex-direction` 等） * **这是推荐的布局方法** #### 定位布局 * `位置：相对` * `位置：绝对` * `位置：固定` * `位置：粘性` #### 文字和方向 * RTL（从右到左）支持 * 所有文本对齐和方向属性 ### ❌ 不支持的布局模式 #### 浮动布局（旧版） * `浮动：左` / `浮动：右` \- **不支持** * `clear` \- **不支持** * **为什么** ：传统布局模型，使用 Flexbox 代替 #### 表格布局 * `显示：表格` \- **不支持** * `显示：表格行`、`显示：表格单元格` \- **不支持** * **为什么** ：使用 Flexbox 或 CSS Grid（如果可用） ### ⏳ 即将推出 #### CSS 网格 * `显示：网格` \- **计划** * 所有网格属性 - **计划** * **使用 Flexbox 直到 Grid 可用** ### ✅ 完全支持的 CSS 功能 #### 颜色和背景 * 所有颜色格式（hex、rgb、rgba、hsl、hsla、命名） * `背景颜色`、`背景图像`、`背景大小`等。 * 线性渐变、径向渐变 #### 边框和形状 * `border`、`border-radius`、`border-color` 等。 * `盒子阴影`, `文本阴影` #### 转换（硬件加速） * `变换：翻译()`、`旋转()`、`缩放()`、`倾斜()` * 2D 和 3D 变换 * **用于平滑的动画** #### 动画和过渡 * `transition` \- 所有过渡属性 * `@keyframes` 和 `动画` * **完全支持 CSS 动画** #### 布局和尺寸 * `宽度`、`高度`、`最小宽度`、`最大宽度`等。 * `边距`, `填充` * `盒子大小` #### 响应式设计 * `@media` 查询 * 视口单位（`vw`、`vh`、`vmin`、`vmax`） * **不支持某些高级单位**（`dvh`、`lvh`、`svh`） #### 高级 CSS * CSS 变量（`--custom-property`） * 伪类（`:hover`、`:active`、`:focus` 等） * 伪元素（`::before`, `::after`） * 滤镜（‘模糊’、‘亮度’、‘对比度’等） * `z-index` 和堆叠上下文 ### ⚠️ 部分支持 #### 顺风 CSS * **v3** \- ✅ 支持（某些实用程序如果使用不受支持的功能，可能无法工作） * **v4** \- ❌ 尚不支持（计划于 2026 年） ### ❌ 不支持的 CSS 功能 * **`背景过滤器`** \- 不可用 * **高级视口单位** \- `dvh`、`lvh`、`svh` ## 架构差异了解为什么某些功能不可用：方面|浏览器 |网络F ---|---|--- 运行时| V8 / 蜘蛛猴 | QuickJS (ES6+) DOM |眨眼/壁虎|自定义 C++ + Dart 布局|浏览器引擎 |颤动渲染目的|一般网页浏览 |应用程序运行时 **关键见解**：WebF 实现核心 Web 标准用于构建应用程序，而不是用于 Web 浏览。 ## 寻找替代方案 ### 对于 IndexedDB → 使用本机存储 // ❌ IndexedDB 不可用 // const db = 等待 openDB('mydb', 1); // ✅ 选项 1：用于简单键值存储的 localStorage（大多数情况下推荐） localStorage.setItem('user', JSON.stringify({ name: 'Alice', 年龄: 30 })); const user = JSON.parse(localStorage.getItem('user')); // ✅ 选项 2：向 Flutter 团队请求自定义原生插件 // 对于复杂的数据库需求（SQL、大型数据集、查询）： // - Flutter 团队使用 sqflite、Hive 或 Isar 创建原生插件 // - 通过 WebF 模块系统向 JavaScript 公开的插件 // - 请参阅：https://openwebf.com/en/docs/add-webf-to-flutter/bridge-modules // 自定义存储插件示例（由 Flutter 团队创建）： // 从 '@yourapp/storage-plugin' 导入 { AppStorage }; //等待AppStorage.save（'key'，{complex：'data'}）; // const data = wait AppStorage.get('key'); ### 对于 WebGL → 别无选择 // ❌ WebGL 不可用 // const gl = canvas.getContext('webgl'); // ✅ 使用 Canvas 2D 代替（有限的图形） const ctx = canvas.getContext('2d'); // ✅ 或者使用Flutter的渲染来处理复杂的图形 // Flutter团队可以直接渲染 ### 对于浮动布局 → 使用 Flexbox /* ❌ 不支持浮动布局 */ .sidebar { 浮动：左；宽度：200px； } .content { 浮动：右；宽度：计算（100% - 200px）； } /* ✅ 使用 Flexbox 代替 */ .container { 显示：flex; } .sidebar { 宽度：200px;弹性收缩：0； } .content { 弹性增长：1; } ### 对于表格布局 → 使用 Flexbox /* ❌ 不支持表格布局 */ .table { 显示：表； } .row { 显示：表行； } .cell { 显示：表格单元格； } /* ✅ 使用 Flexbox 代替 */ .table { 显示：flex;弹性方向：列； } .row { 显示：flex; } .cell { 弹性：1; } ### 对于本机设备功能 → 使用 WebF 插件 **检查可用插件**： WebF 为本机功能提供官方 npm 包。当您需要本机功能时： 1. **首先，检查可用插件列表** 2. **在提供设置说明之前询问用户其环境** 3. **按照插件的安装指南**针对其特定环境 #### 第 1 步：确定您的环境 **重要**：设置因您的开发环境而异。 **问题**：“您是在 WebF Go 中进行测试，还是在开发生产应用程序？” **选项 1：在 WebF Go 中测试**（大多数 Web 开发人员） * ✅ 只需安装 npm 包 * ✅ 无需额外设置 * 示例：`npm install @openwebf/webf-share` **选项 2：与 Flutter 团队一起生产应用程序** * ⚠️ 您的 Flutter 开发者需要先添加 Flutter 插件 * ⚠️ 一旦他们完成了，你就安装 npm 包 * ⚠️ 与您的 Flutter 团队协调 - 向他们提供插件文档 #### 示例：本机共享插件 **如果使用 WebF Go：** # 只需安装 npm 包 npm 安装@openwebf/webf-share **如果与 Flutter 应用程序集成：** # 1. 首先添加 Flutter 插件（在 pubspec.yaml 中） # 请参阅：https://openwebf.com/en/native-plugins/webf-share # 2.然后安装npm包 npm 安装@openwebf/webf-share **在 JavaScript 中的用法：** 从'@openwebf/webf-share'导入{WebFShare}； // 首先检查可用性如果（WebFShare.isAvailable（））{ // 分享文本等待 WebFShare.shareText({ 文本：“看看这个！”，网址：'https://example.com'，标题：“我的应用程序” }); } // 或者使用 React hook 从 '@openwebf/webf-share' 导入 { useWebFShare }；函数共享按钮() { const { 共享，isAvailable } = useWebFShare(); if (!isAvailable) 返回 null; 返回（

Webf API 兼容性

包含技能