102 lines
2.8 KiB
Markdown
102 lines
2.8 KiB
Markdown
---
|
|
title: Can I Use
|
|
createTime: 2025/10/08 14:50:55
|
|
icon: streamline:desktop-help
|
|
permalink: /en/guide/markdown/caniuse/
|
|
badge: New
|
|
---
|
|
|
|
## Overview
|
|
|
|
When writing articles, this feature provides the functionality to embed platform support information for WEB features from [can-i-use](https://caniuse.com/).
|
|
|
|
This allows for a more intuitive representation of a feature's support level when describing a specific WEB feature.
|
|
|
|
## Configuration
|
|
|
|
This feature is disabled by default. You can enable it in the configuration file.
|
|
|
|
```ts title=".vuepress/config.ts"
|
|
export default defineUserConfig({
|
|
theme: plumeTheme({
|
|
markdownP: {
|
|
caniuse: true, // [!code ++]
|
|
},
|
|
})
|
|
})
|
|
```
|
|
|
|
In your article's markdown file, use the following format:
|
|
|
|
``` md
|
|
@[caniuse](feature)
|
|
```
|
|
|
|
For ease of use, the theme provides tool support: [caniuse Feature Search](../../../tools/caniuse.md).
|
|
You can use this tool directly to help generate the markdown code.
|
|
|
|
## Syntax
|
|
|
|
``` md
|
|
@[caniuse](feature)
|
|
@[caniuse{browser_versions}](feature)
|
|
@[caniuse embed_type](feature)
|
|
@[caniuse embed_type{browser_versions}](feature)
|
|
```
|
|
|
|
:::info Using the caniuse tool provided by the theme: [caniuse feature search](../../../../tools/caniuse.md) to help generate markdown code.
|
|
:::
|
|
|
|
- `feature`
|
|
|
|
Required. For correct values, please refer to [caniuse-embed.vercel.app](https://caniuse-embed.vercel.app/zh-CN).
|
|
|
|
- `{browser_period}`
|
|
|
|
Optional. The support status of the current feature across multiple version cycles.
|
|
|
|
Default value: `{-2,1}`
|
|
|
|
Format: `{past,future}` with a value range of `-5 ~ 3`
|
|
|
|
- Values less than `0` indicate support status in past browser version cycles.
|
|
- `0` indicates support status in the current browser version.
|
|
- Values greater than `0` indicate support status in future browser version cycles.
|
|
|
|
- `embed_type`
|
|
|
|
Optional. The type of resource embedding.
|
|
|
|
Type: `'embed' | 'baseline'`
|
|
|
|
Default value: `'embed'`
|
|
|
|
- `embed` means embedding as version compatibility data tables similar to `caniuse.com`
|
|
- `baseline` means embedding as the baseline support status of a feature.
|
|
- `Wildly available` indicates broad support across all major browsers
|
|
- `Newly available` indicates support only in the latest major browsers
|
|
- `limit available` indicates that major browsers may offer partial support, but it is limited, or not supported
|
|
- `deprecated` indicates that major browsers have marked it as **deprecated** and do not recommend its use
|
|
|
|
## Examples
|
|
|
|
**Get the browser support for the CSS pseudo-class selector `:dir()`:**
|
|
|
|
```md
|
|
@[caniuse](css-matches-pseudo)
|
|
```
|
|
|
|
Result:
|
|
|
|
@[caniuse](css-matches-pseudo)
|
|
|
|
**Display baseline support for the CSS pseudo-class selector `:dir()`:**
|
|
|
|
```md
|
|
@[caniuse baseline](css-matches-pseudo)
|
|
```
|
|
|
|
Result:
|
|
|
|
@[caniuse baseline](css-matches-pseudo)
|