Can I Use

嵌入 caniuse.com 的浏览器兼容性数据，在页面中展示 CSS/JS 特性的浏览器支持情况。

安装

pnpm

pnpm add vitepress-plugin-caniuse

npm

npm install vitepress-plugin-caniuse

bun

bun add vitepress-plugin-caniuse

deno

deno add vitepress-plugin-caniuse

yarn

yarn add vitepress-plugin-caniuse

使用

vitepress-tuck 模式 推荐

.vitepress/config.ts

import { defineConfig } from 'vitepress-tuck'
import caniuse from 'vitepress-plugin-caniuse'

export default defineConfig({
  plugins: [caniuse()],
})

查看 vitepress-tuck 了解更多

传统模式

.vitepress/config.ts

import { defineConfig } from 'vitepress'
import { caniuseMarkdownPlugin } from 'vitepress-plugin-caniuse'

export default defineConfig({
  markdown: {
    config: (md) => {
      md.use(caniuseMarkdownPlugin) 
    },
  },
})

.vitepress/theme/index.ts

import type { Theme } from 'vitepress'
import { enhanceAppWithCaniuse } from 'vitepress-plugin-caniuse/client'
import DefaultTheme from 'vitepress/theme'

export default {
  extends: DefaultTheme,
  enhanceApp(ctx) {
    enhanceAppWithCaniuse(ctx) 
  },
} satisfies Theme

语法

使用 @[caniuse]() 嵌入浏览器兼容性数据：

@[caniuse](feature_name)

Baseline 模式

使用 baseline 模式显示特性支持概览：

@[caniuse baseline](feature_name)

自定义版本范围

通过 {} 指定版本范围：

@[caniuse{-2,4}](feature_name)
@[caniuse baseline{-3,2}](feature_name)

• {past, future}: past 表示回溯的版本数，future 表示前瞻的版本数
• 默认值为 {5, 2}，即回溯 5 个版本，前瞻 3 个版本

获取 特性名称

在 caniuse.com 中搜索需要展示的特性，点击卡片左侧的 # ，即可在浏览器地址栏中获得特性名称。

不知道哪个部分为特性名称？

以 css grid 为例

在 caniuse.com 中搜索 grid，然后点击第一个卡片的 # ，浏览器地址栏地址变更为 https://caniuse.com/css-grid。 则特性名称为 css-grid。

在此处进行验证： https://caniuse.com/?search=grid

示例

显示 fetch 特性的浏览器支持情况

@[caniuse](fetch)

显示 fetch 特性的 baseline

@[caniuse baseline](fetch)