vuepress-theme-plume/docs/en/guide/markdown/caniuse.md

title, createTime, icon, permalink

title	createTime	icon	permalink
Can I Use	2025/03/24 22:10:32	streamline:desktop-help	/en/guide/markdown/caniuse/

Overview

When writing articles, you can embed the support status of can-i-use WEB features across platforms.

This makes it easier to describe the support level of a particular WEB feature.

Configuration

This feature is not enabled by default. You can enable it in the configuration file.

export default defineUserConfig({
  theme: plumeTheme({
    markdownP: {
      caniuse: true, // [!code ++]
    },
  })
})

In your Markdown file, use the following format:

@[caniuse](feature)

For convenience, the theme provides a tool: caniuse feature search, which can help generate the Markdown code.

Syntax

@[caniuse](feature)
@[caniuse{browser_versions}](feature)
@[caniuse embed_type](feature)
@[caniuse embed_type{browser_versions}](feature)

• feature

  Required. For correct values, refer to caniuse-embed.vercel.app

• {browser_versions}

  Optional. The support status of the feature across multiple browser versions.

  Default value: {-2,1}

  Format: {past,future} with values ranging from -5 ~ 3

  • Less than 0 indicates support below the current browser version
  • 0 indicates support at the current browser version
  • Greater than 0 indicates support above the current browser version

• embed_type

  Optional. The type of resource embedding.

  Type: 'embed' | 'image'

  Default value: 'embed'

:::caution The use of image type is no longer recommended. Instead, use the embed type, as the theme has changed the embed implementation, offering faster loading, smaller size, and better interaction. :::

Examples

Get the browser support status for the CSS pseudo-class selector :dir():

@[caniuse](css-matches-pseudo)

Effect:

@caniuse

Get the browser support status for the CSS pseudo-class selector :dir() as an image:

@[caniuse image](css-matches-pseudo)

Effect:

@caniuse image

Get the browser support status for the CSS pseudo-class selector :dir() for specific browser versions:

@[caniuse{-2,3}](css-matches-pseudo)

Effect:

@caniuse{-2,3}