vuepress-theme-plume/assets/caniuse-Dmr_qt3D.js

import{$ as e,B as t,P as n,_ as r,f as i,g as a,h as o,l as s}from"./runtime-core.esm-bundler-CZvn3YaB.js";import{t as c}from"./plugin-vue_export-helper-CxTVcLa7.js";var l=JSON.parse(`{"path":"/guide/markdown/caniuse/","title":"Can I Use | 指南","lang":"zh-CN","frontmatter":{"title":"Can I Use","createTime":"2024/09/30 14:50:55","icon":"streamline:desktop-help","permalink":"/guide/markdown/caniuse/","badge":"新","description":"概述 在编写文章时， 提供嵌入 can-i-use WEB feature 各平台支持说明 的功能。 方便在描述某个 WEB feature 时，能更直观的表述 该特性的支持程度。 配置 此功能默认不启用，你可以在配置文件中启用它。 .vuepress/config.ts 在你的 文章 markdown文件中，使用以下格式： 为了方便使用，主题提供了工...","head":[["script",{"type":"application/ld+json"},"{\\"@context\\":\\"https://schema.org\\",\\"@type\\":\\"Article\\",\\"headline\\":\\"Can I Use\\",\\"image\\":[\\"\\"],\\"dateModified\\":\\"2025-12-28T06:00:53.000Z\\",\\"author\\":[]}"],["meta",{"property":"og:url","content":"https://theme-plume.vuejs.press/guide/markdown/caniuse/"}],["meta",{"property":"og:site_name","content":"Plume 主题"}],["meta",{"property":"og:title","content":"Can I Use"}],["meta",{"property":"og:description","content":"概述 在编写文章时， 提供嵌入 can-i-use WEB feature 各平台支持说明 的功能。 方便在描述某个 WEB feature 时，能更直观的表述 该特性的支持程度。 配置 此功能默认不启用，你可以在配置文件中启用它。 .vuepress/config.ts 在你的 文章 markdown文件中，使用以下格式： 为了方便使用，主题提供了工..."}],["meta",{"property":"og:type","content":"article"}],["meta",{"property":"og:locale","content":"zh-CN"}],["meta",{"property":"og:locale:alternate","content":"en-US"}],["meta",{"property":"og:updated_time","content":"2025-12-28T06:00:53.000Z"}],["meta",{"property":"article:modified_time","content":"2025-12-28T06:00:53.000Z"}],["link",{"rel":"alternate","hreflang":"en-us","href":"https://theme-plume.vuejs.press/en/guide/markdown/caniuse/"}]]},"readingTime":{"minutes":1.71,"words":513},"git":{"createdTime":1727717214000,"updatedTime":1766901653000,"contributors":[{"name":"pengzhanbo","username":"pengzhanbo","email":"volodymyr@foxmail.com","commits":4,"avatar":"https://avatars.githubusercontent.com/pengzhanbo?v=4","url":"https://github.com/pengzhanbo"}],"changelog":[{"hash":"fe9ee0dbfce9896fdaea72d8f77e7d065577d97d","time":1766901653000,"email":"volodymyr@foxmail.com","author":"pengzhanbo","message":"feat(plugin-md-power): improve caniuse syntax (#806)"},{"hash":"4d2361a7046214fe0f4e4af01831107fd00e38ad","time":1759849989000,"email":"volodymyr@foxmail.com","author":"pengzhanbo","message":"feat(theme)!: add collections support (#704)"},{"hash":"0fd6cac57412002f4d72dc10378789b529adc357","time":1742063370000,"email":"volodymyr@foxmail.com","author":"pengzhanbo","message":"refactor(theme): improve types and flat config (#524)"},{"hash":"c177fd6917e42218f71845b91dbc397972334405","time":1727717214000,"email":"volodymyr@foxmail.com","author":"pengzhanbo","message":"docs: improve docs (#240)"}]},"autoDesc":true,"filePathRelative":"guide/markdown/caniuse.md","headers":[],"bulletin":false}`),u={name:`caniuse.md`},d={class:`code-block-title`,"data-title":`.vuepress/config.ts`},f={class:`code-block-title-bar`},p={class:`title`},m={class:`hint-container info`},h={class:`hint-container-title`};function g(c,l,u,g,_,v){let y=t(`VPIcon`),b=t(`VPLink`),x=t(`CanIUseViewer`);return n(),i(`div`,null,[l[8]||=o(`<h2 id="概述" tabindex="-1"><a class="header-anchor" href="#概述"><span>概述</span></a></h2><p>在编写文章时， 提供嵌入 <a href="https://caniuse.com/" target="_blank" rel="noopener noreferrer">can-i-use</a> WEB feature 各平台支持说明 的功能。</p><p>方便在描述某个 WEB feature 时，能更直观的表述 该特性的支持程度。</p><h2 id="配置" tabindex="-1"><a class="header-anchor" href="#配置"><span>配置</span></a></h2><p>此功能默认不启用，你可以在配置文件中启用它。</p>`,5),s(`div`,d,[s(`div`,f,[s(`span`,p,[r(y,{provider:`iconify`,name:`vscode-icons:file-type-typescript`}),l[0]||=a(`.vuepress/config.ts`,-1)])]),l[1]||=o(`<div class="language-ts" data-highlighter="shiki" data-ext="ts" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark has-diff vp-code"><code class="language-ts"><span class="line"><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">export</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;"> default</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;"> defineUserConfig</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">({</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;">  theme</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">plumeTheme</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">({</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;">    markdownP</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: {</span></span>
<span class="line diff add"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;">      caniuse</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">true</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">, </span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">    },</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">  })</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">})</span></span></code></pre></div>`,1)]),l[9]||=o(`<p>在你的 文章 markdown文件中，使用以下格式：</p><div class="language-md" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">@</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">[</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">caniuse</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">](</span><span style="--shiki-light:#393A3490;--shiki-light-text-decoration:underline;--shiki-dark:#DEDCD590;--shiki-dark-text-decoration:underline;">feature</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span></span></code></pre></div>`,2),s(`p`,null,[l[3]||=a(`为了方便使用，主题提供了工具支持：`,-1),r(b,{href:`../../../tools/caniuse.md`},{default:e(()=>[...l[2]||=[a(`caniuse 特性搜索`,-1)]]),_:1}),l[4]||=a(`，你可以直接使用该工具 帮助生成 markdown 代码。`,-1)]),l[10]||=o(`<h2 id="语法" tabindex="-1"><a class="header-anchor" href="#语法"><span>语法</span></a></h2><div class="language-md" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">@</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">[</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">caniuse</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">](</span><span style="--shiki-light:#393A3490;--shiki-light-text-decoration:underline;--shiki-dark:#DEDCD590;--shiki-dark-text-decoration:underline;">feature</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">@</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">[</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">caniuse{browser_versions}</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">](</span><span style="--shiki-light:#393A3490;--shiki-light-text-decoration:underline;--shiki-dark:#DEDCD590;--shiki-dark-text-decoration:underline;">feature</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">@</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">[</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">caniuse embed_type</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">](</span><span style="--shiki-light:#393A3490;--shiki-light-text-decoration:underline;--shiki-dark:#DEDCD590;--shiki-dark-text-decoration:underline;">feature</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">@</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">[</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">caniuse embed_type{browser_versions}</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">](</span><span style="--shiki-light:#393A3490;--shiki-light-text-decoration:underline;--shiki-dark:#DEDCD590;--shiki-dark-text-decoration:underline;">feature</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span></span></code></pre></div>`,2),s(`div`,m,[s(`p`,h,[l[6]||=a(`使用主题提供的 caniuse 工具：`,-1),r(b,{href:`../../../tools/caniuse.md`},{default:e(()=>[...l[5]||=[a(`caniuse 特性搜索`,-1)]]),_:1}),l[7]||=a(` 帮助生成 markdown 代码。`,-1)])]),l[11]||=o(`<ul><li><p><code>feature</code></p><p>必填。 正确取值请参考 <a href="https://caniuse-embed.vercel.app/zh-CN" target="_blank" rel="noopener noreferrer">caniuse-embed.vercel.app</a></p></li><li><p><code>{browser_period}</code></p><p>可选。当前特性在多个版本周期中的支持情况。</p><p>默认值为: <code>{-2,1}</code></p><p>格式： <code>{past,future}</code> 取值范围为 <code>-5 ~ 3</code></p><ul><li>小于<code>0</code> 表示过去的浏览器版本周期的支持情况</li><li><code>0</code> 表示当前浏览器版本的支持情况</li><li>大于<code>0</code> 表示未来的浏览器版本周期的支持情况</li></ul></li><li><p><code>embed_type</code></p><p>可选。 嵌入的类型。</p><p>类型： <code>&#39;embed&#39; | &#39;baseline&#39;</code></p><p>默认值为：<code>&#39;embed&#39;</code></p><ul><li><code>embed</code> 表示嵌入为 类似 <code>caniuse.com</code> 的版本兼容数据表格</li><li><code>baseline</code> 表示嵌入为 特性的基线支持情况。 <ul><li><code>Wildly available</code> 表示受到所有主流浏览器的广泛支持</li><li><code>Newly available</code> 表示仅受到最新主流浏览器的支持</li><li><code>limit available</code> 表示主流浏览器可能部分支持，但支持程度有限，或者不支持</li><li><code>deprecated</code> 表示主流浏览器已将其标记为 <strong>弃用</strong>，不推荐使用</li></ul></li></ul></li></ul><h2 id="示例" tabindex="-1"><a class="header-anchor" href="#示例"><span>示例</span></a></h2><p><strong>获取 css 伪类选择器 <code>:dir()</code> 在各个浏览器的支持情况：</strong></p><div class="language-md" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">@</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">[</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">caniuse</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">](</span><span style="--shiki-light:#393A3490;--shiki-light-text-decoration:underline;--shiki-dark:#DEDCD590;--shiki-dark-text-decoration:underline;">css-matches-pseudo</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span></span></code></pre></div><p>效果：</p>`,5),r(x,{feature:`css-matches-pseudo`,meta:`bvjzp`,past:2,future:1}),l[12]||=o(`<p><strong>显示 css 伪类选择器 <code>:dir()</code> 的基线支持情况：</strong></p><div class="language-md" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">@</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">[</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">caniuse baseline</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">](</span><span style="--shiki-light:#393A3490;--shiki-light-text-decoration:underline;--shiki-dark:#DEDCD590;--shiki-dark-text-decoration:underline;">css-matches-pseudo</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span></span></code></pre></div><p>效果：</p>`,3),r(x,{feature:`css-matches-pseudo`,meta:`ssbuc`,past:2,future:1,baseline:``})])}var _=c(u,[[`render`,g]]);export{l as _pageData,_ as default};