Can I Use
Overview
When writing articles, this feature provides the functionality to embed platform support information for WEB features from can-i-use.
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.
export default defineUserConfig({
theme: plumeTheme({
markdown: {
caniuse: true,
},
})
})In your article's markdown file, use the following format:
@[caniuse](feature)For ease of use, the theme provides tool support: caniuse Feature Search. You can use this tool directly to help generate the markdown code.
Syntax
@[caniuse](feature)
@[caniuse{browser_versions}](feature)
@[caniuse embed_type](feature)
@[caniuse embed_type{browser_versions}](feature)Using the caniuse tool provided by the theme: caniuse feature search to help generate markdown code.
featureRequired. For correct values, please refer to caniuse-embed.vercel.app.
{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
0indicate support status in past browser version cycles. 0indicates support status in the current browser version.- Values greater than
0indicate support status in future browser version cycles.
- Values less than
embed_typeOptional. The type of resource embedding.
Type:
'embed' | 'baseline'Default value:
'embed'embedmeans embedding as version compatibility data tables similar tocaniuse.combaselinemeans embedding as the baseline support status of a feature.Wildly availableindicates broad support across all major browsersNewly availableindicates support only in the latest major browserslimit availableindicates that major browsers may offer partial support, but it is limited, or not supporteddeprecatedindicates 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():
@[caniuse](css-matches-pseudo)Result:
Display baseline support for the CSS pseudo-class selector :dir():
@[caniuse baseline](css-matches-pseudo)Result:
