Can I Use 新
约 513 字大约 2 分钟
2024-09-30
概述
在编写文章时, 提供嵌入 can-i-use WEB feature 各平台支持说明 的功能。
方便在描述某个 WEB feature 时,能更直观的表述 该特性的支持程度。
配置
此功能默认不启用,你可以在配置文件中启用它。
.vuepress/config.ts
export default defineUserConfig({
theme: plumeTheme({
markdownP: {
caniuse: true,
},
})
})在你的 文章 markdown文件中,使用以下格式:
@[caniuse](feature)为了方便使用,主题提供了工具支持:caniuse 特性搜索,你可以直接使用该工具 帮助生成 markdown 代码。
语法
@[caniuse](feature)
@[caniuse{browser_versions}](feature)
@[caniuse embed_type](feature)
@[caniuse embed_type{browser_versions}](feature)使用主题提供的 caniuse 工具:caniuse 特性搜索 帮助生成 markdown 代码。
feature必填。 正确取值请参考 caniuse-embed.vercel.app
{browser_period}可选。当前特性在多个版本周期中的支持情况。
默认值为:
{-2,1}格式:
{past,future}取值范围为-5 ~ 3- 小于
0表示过去的浏览器版本周期的支持情况 0表示当前浏览器版本的支持情况- 大于
0表示未来的浏览器版本周期的支持情况
- 小于
embed_type可选。 嵌入的类型。
类型:
'embed' | 'baseline'默认值为:
'embed'embed表示嵌入为 类似caniuse.com的版本兼容数据表格baseline表示嵌入为 特性的基线支持情况。Wildly available表示受到所有主流浏览器的广泛支持Newly available表示仅受到最新主流浏览器的支持limit available表示主流浏览器可能部分支持,但支持程度有限,或者不支持deprecated表示主流浏览器已将其标记为 弃用,不推荐使用
示例
获取 css 伪类选择器 :dir() 在各个浏览器的支持情况:
@[caniuse](css-matches-pseudo)效果:
显示 css 伪类选择器 :dir() 的基线支持情况:
@[caniuse baseline](css-matches-pseudo)效果:
