PHP小码农

Appearance

Can I Use 查询 ​

Can I Use（caniuse.com）是前端开发者日常使用频率最高的兼容性查询工具之一。它提供了几乎所有 Web 特性在各大浏览器中的支持率数据，帮助你在开发前快速确认某个 CSS 属性、HTML 元素或 JavaScript API 是否能在目标浏览器中正常工作。

前置知识

阅读本节前，建议先了解：浏览器兼容性

基础概念 ​

Can I Use 是由 Alexis Deveria 创建并维护的开源兼容性数据库网站。它收集了大量 Web 特性（CSS、HTML5、JavaScript API、SVG 等）在不同浏览器版本中的支持数据，以直观的表格形式展示，是前端开发中确认兼容性的第一站。

网站概述 ​

text
Can I Use 基本信息：
  网站地址：https://caniuse.com/
  创建者：Alexis Deveria
  数据来源：MDN 兼容性数据 + 社区贡献 + 自动化测试
  覆盖范围：CSS、HTML5、JavaScript API、SVG、HTTP 等
  更新频率：随浏览器更新而更新
  许可证：CC BY 4.0（数据可自由使用）

详细说明 ​

界面布局 ​

打开 caniuse.com 后，你首先会看到搜索框和全球兼容性概览。

text
页面布局说明：

1. 搜索框（顶部中央）
   → 输入 CSS 属性名、HTML 元素名或 API 名称
   → 支持模糊搜索

2. 全球使用率统计（顶部）
   → 显示当前特性的全球浏览器支持百分比

3. 浏览器版本表格（主体）
   → 行：不同浏览器（Chrome、Firefox、Safari、Edge、IE 等）
   → 列：不同版本的浏览器
   → 颜色：绿色=支持，红色=不支持，黄色=部分支持

4. 资源链接（侧边栏）
   → MDN 文档链接
   → 规范文档链接
   → 兼容性相关文章

表格颜色含义 ​

Can I Use 使用直观的颜色系统表示支持状态：

text
颜色标识说明：

绿色背景（实心绿）
  → 完全支持该特性

黄色背景（渐变黄绿）
  → 部分支持（Partial Support）
  → 通常需要添加前缀，或有已知的行为差异

红色背景
  → 不支持该特性

灰色文字
  → 浏览器版本在特性发布之前

紫色/蓝色特殊标记
  → 需要启用特定标志（flag）才能使用
  → 如 chrome://flags 中的实验性特性

如何查询特性 ​

方式一：搜索框查询

text
操作步骤：
1. 打开 https://caniuse.com/
2. 在搜索框中输入要查询的特性名称
3. 从下拉建议列表中选择或直接回车
4. 查看兼容性表格

常用查询关键词：

text
CSS 属性查询示例：
  → "css grid"         - CSS Grid 布局
  → "flexbox"          - Flexbox 布局
  → "backdrop-filter"  - 背景滤镜
  → "aspect-ratio"     - 宽高比
  → "container queries" - 容器查询
  → "subgrid"          - CSS Grid 子网格

HTML 元素查询示例：
  → "dialog"           - dialog 元素
  → "details"          - details 元素
  → "picture"          - picture 元素
  → "search"           - search 元素
  → "template"         - template 元素

JavaScript API 查询示例：
  → "fetch"            - Fetch API
  → "intersectionobserver" - Intersection Observer
  → "resizableobserver"    - Resize Observer
  → "web animations"   - Web Animations API
  → "clipboard"        - Clipboard API

方式二：URL 直接查询

text
URL 格式：https://caniuse.com/{特性关键词}

示例：
  → https://caniuse.com/css-grid
  → https://caniuse.com/flexbox
  → https://caniuse.com/dialog
  → https://caniuse.com/fetch
  → https://caniuse.com/intersectionobserver

理解支持率数据 ​

text
全球支持率说明：

页面顶部显示的百分比数字：
  → 表示"全球用户中有多大比例使用的浏览器支持该特性"
  → 不表示"有多少浏览器支持该特性"

示例：如果 CSS Grid 的全球支持率为 96.5%
  → 意味着全球 96.5% 的浏览器用户访问时能看到正确的渲染
  → 3.5% 的用户可能看到布局异常
  → 这个数据基于 StatCounter 的浏览器市场份额统计

查看部分支持的具体说明 ​

对于黄色标记的"部分支持"特性，需要点击展开查看详细信息：

text
部分支持的常见原因：

1. 需要浏览器前缀
   → -webkit-、-moz- 等前缀才能使用

2. 已知的行为差异
   → 功能基本可用，但某些参数或边缘情况表现不同

3. 需要特定配置
   → 需要在服务器端配置特定的 HTTP 头

4. 功能受限
   → 基本功能可用，但高级特性不支持

查看详情方式：
  → 点击黄色单元格
  → 展开详细说明，包含具体的行为差异描述
  → 通常附带解决方案或替代方案建议

多特性对比查询 ​

Can I Use 支持同时查询多个特性的兼容性：

text
操作步骤：
1. 打开 https://caniuse.com/
2. 在搜索框中输入多个关键词，用逗号分隔
   → 如 "flexbox, grid, var"
3. 回车搜索
4. 结果页面会显示所有查询到的特性

浏览器选择器（页面左侧）：
  → 可以选择只查看特定浏览器的数据
  → 如只看 "iOS Safari" 或 "Android Chrome"
  → 方便针对特定平台检查兼容性

版本范围过滤 ​

text
过滤功能：

1. 按浏览器版本过滤
   → 点击表格上方的浏览器名称
   → 选择要显示的版本范围

2. 按时间范围过滤
   → 可以设置只显示最近 N 个版本的浏览器数据

3. 移动端/桌面端切换
   → 可以分别查看桌面端和移动端的兼容性
   → 对移动端开发特别有用

资源链接 ​

每个特性页面底部通常包含以下参考资源：

text
资源链接说明：

1. MDN Web Docs
   → 指向 MDN 上该特性的详细文档
   → 包含使用方法、示例代码和兼容性数据

2. 规范文档
   → 指向 WHATWG 或 W3C 的规范原文
   → 用于了解特性的权威定义

3. Polyfill 链接
   → 如果有可用的 Polyfill，会提供链接
   → 方便快速找到兼容性补丁

4. Stack Overflow 链接
   → 常见问题讨论链接

5. Test Case 链接
   → 可以查看该特性的测试用例页面
   → 在真实浏览器中测试特性支持

实战示例 ​

示例：开发前的兼容性检查流程 ​

text
标准开发流程中的兼容性检查：

1. 确定项目需要支持的浏览器范围
   → 根据 Google Analytics 数据确定用户浏览器分布
   → 如：Chrome 90+、Firefox 88+、Safari 14+、iOS Safari 14+

2. 查询计划使用的 CSS 特性
   → 在 Can I Use 上逐一查询
   → 记录不支持或部分支持的特性

3. 制定兼容性策略
   → 完全支持：直接使用
   → 部分支持：添加前缀或降级方案
   → 不支持：寻找替代方案或使用 Polyfill

4. 持续跟踪
   → 项目维护期间，定期检查兼容性变化
   → 当旧浏览器版本退出支持范围后，可以移除兼容代码

示例：创建兼容性检查清单 ​

以下是一个实际项目的 CSS 特性兼容性检查示例：

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Can I Use 实践：兼容性检查清单</title>
  <style>
    :root {
      --primary: #2563eb;
      --success: #16a34a;
      --warning: #f59e0b;
      --danger: #dc2626;
      --bg: #f8fafc;
      --text: #1e293b;
      --muted: #64748b;
      --border: #e2e8f0;
      --radius: 8px;
    }

    * { margin: 0; padding: 0; box-sizing: border-box; }

    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: var(--bg);
      color: var(--text);
      line-height: 1.6;
      padding: 2rem;
    }

    .container { max-width: 800px; margin: 0 auto; }
    h1 { color: var(--primary); margin-bottom: 0.5rem; }
    .subtitle { color: var(--muted); margin-bottom: 2rem; }

    table {
      width: 100%;
      border-collapse: collapse;
      background: white;
      border-radius: var(--radius);
      overflow: hidden;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    th, td {
      padding: 0.75rem 1rem;
      text-align: left;
      border-bottom: 1px solid var(--border);
      font-size: 0.9rem;
    }

    th {
      background: var(--primary);
      color: white;
      font-weight: 600;
    }

    tr:hover { background: #f8fafc; }

    .status {
      display: inline-block;
      padding: 0.15rem 0.5rem;
      border-radius: 4px;
      font-size: 0.8rem;
      font-weight: 600;
    }

    .status-full { background: #dcfce7; color: #166534; }
    .status-partial { background: #fef3c7; color: #92400e; }
    .status-none { background: #fee2e2; color: #991b1b; }

    .ciu-link {
      color: var(--primary);
      text-decoration: none;
      font-weight: 500;
    }

    .ciu-link:hover { text-decoration: underline; }

    .tip {
      background: #dbeafe;
      border: 1px solid #93c5fd;
      border-radius: var(--radius);
      padding: 1rem;
      margin-top: 2rem;
      line-height: 1.8;
      font-size: 0.95rem;
    }

    .tip code {
      background: #eff6ff;
      padding: 0.1rem 0.3rem;
      border-radius: 3px;
      font-size: 0.9em;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Can I Use 实践</h1>
    <p class="subtitle">
      项目开发前的 CSS 特性兼容性检查清单。
      点击"查询"链接在 caniuse.com 上查看详细数据。
    </p>

    <table>
      <thead>
        <tr>
          <th>特性</th>
          <th>Can I Use</th>
          <th>全球支持率</th>
          <th>兼容性策略</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><strong>CSS Grid</strong></td>
          <td>
            <a href="https://caniuse.com/css-grid" class="ciu-link" target="_blank">
              查询
            </a>
          </td>
          <td><span class="status status-full">~97%</span></td>
          <td>直接使用</td>
        </tr>
        <tr>
          <td><strong>Flexbox</strong></td>
          <td>
            <a href="https://caniuse.com/flexbox" class="ciu-link" target="_blank">
              查询
            </a>
          </td>
          <td><span class="status status-full">~99%</span></td>
          <td>直接使用</td>
        </tr>
        <tr>
          <td><strong>CSS 自定义属性</strong></td>
          <td>
            <a href="https://caniuse.com/css-variables" class="ciu-link" target="_blank">
              查询
            </a>
          </td>
          <td><span class="status status-full">~96%</span></td>
          <td>直接使用</td>
        </tr>
        <tr>
          <td><strong>Container Queries</strong></td>
          <td>
            <a href="https://caniuse.com/css-container-queries" class="ciu-link" target="_blank">
              查询
            </a>
          </td>
          <td><span class="status status-partial">~85%</span></td>
          <td>提供降级方案</td>
        </tr>
        <tr>
          <td><strong>backdrop-filter</strong></td>
          <td>
            <a href="https://caniuse.com/css-backdrop-filter" class="ciu-link" target="_blank">
              查询
            </a>
          </td>
          <td><span class="status status-partial">~92%</span></td>
          <td>需要 -webkit- 前缀</td>
        </tr>
        <tr>
          <td><strong>aspect-ratio</strong></td>
          <td>
            <a href="https://caniuse.com/mdn-css_properties_aspect-ratio" class="ciu-link" target="_blank">
              查询
            </a>
          </td>
          <td><span class="status status-full">~95%</span></td>
          <td>提供 padding-top 降级</td>
        </tr>
        <tr>
          <td><strong>:has() 选择器</strong></td>
          <td>
            <a href="https://caniuse.com/css-has" class="ciu-link" target="_blank">
              查询
            </a>
          </td>
          <td><span class="status status-partial">~87%</span></td>
          <td>渐进增强</td>
        </tr>
        <tr>
          <td><strong>dialog 元素</strong></td>
          <td>
            <a href="https://caniuse.com/dialog" class="ciu-link" target="_blank">
              查询
            </a>
          </td>
          <td><span class="status status-full">~95%</span></td>
          <td>直接使用</td>
        </tr>
      </tbody>
    </table>

    <div class="tip">
      <strong>使用建议：</strong><br>
      1. 开发前先在 <code>caniuse.com</code> 上查询计划使用的所有特性<br>
      2. 记录不支持或部分支持的特性，制定降级方案<br>
      3. 使用 <code>Autoprefixer</code> 自动处理需要前缀的 CSS 属性<br>
      4. 使用特性检测（而非浏览器检测）在 JS 中处理兼容性<br>
      5. 定期更新检查清单，当旧浏览器版本退出支持范围后移除兼容代码
    </div>
  </div>
</body>
</html>

示例：在开发流程中集成兼容性检查 ​

text
完整开发流程中的 Can I Use 使用步骤：

1. 技术选型阶段
   → 在 Can I Use 上查询候选技术方案的兼容性
   → 对比多个方案的浏览器支持率
   → 选择兼容性最佳的方案

2. 编码阶段
   → 遇到不确定的特性，先查 Can I Use
   → 部分支持的特性查阅具体说明
   → 根据数据决定是否需要降级方案

3. 代码审查阶段
   → 审查代码中使用的 CSS 属性和 JS API
   → 确认每个特性的兼容性
   → 标记需要 Polyfill 的特性

4. 测试阶段
   → 在目标浏览器中验证实际效果
   → 重点关注 Can I Use 中标记为"部分支持"的特性

5. 上线后监控
   → 通过用户反馈和错误监控了解兼容性问题
   → 定期检查 Can I Use 数据更新

注意事项 ​

  • 支持率数据是估算值：Can I Use 的数据基于多个来源的统计，实际用户群体可能因地区、行业等因素有所不同
  • "部分支持"需要仔细查看说明：黄色标记的特性不一定能在你的使用场景中正常工作，务必点击查看具体的行为差异
  • 数据可能滞后：新浏览器版本发布后，Can I Use 的数据可能需要数天到数周才能更新
  • 不要过度追求 100% 兼容：对于非常旧的浏览器（如 IE），如果用户占比极低，可以接受优雅降级而非完美兼容
  • 关注移动端数据：移动端浏览器的兼容性可能和桌面端不同，需要分别查看

最佳实践 ​

  • 将 Can I Use 加入开发工作流：遇到新特性时先查 Can I Use，形成习惯
  • 使用 Browserslist 配置统一兼容范围：在项目中配置 browserslist，让 Autoprefixer、Babel、ESLint 等工具统一处理
  • 定期更新兼容性数据：项目中使用 npx browserslist@latest --update-db 更新浏览器数据库
  • 根据实际用户数据决策：结合 Google Analytics 的浏览器分布数据，用 Can I Use 确定具体的兼容性策略
  • 善用 Test Case 页面：Can I Use 为每个特性提供了测试页面，可以在目标浏览器中直接测试

下一节

继续学习：文档类型与 DOCTYPE

参考链接 ​