supports_快速提示：将@supports CSS文件添加到您的CodePen演示中

最新推荐文章于 2022-09-30 11:38:58 发布

翻译最新推荐文章于 2022-09-30 11:38:58 发布 · 346 阅读

文章标签：

本文介绍如何使用CSS的@supports规则创建可重用的警告通知，以在浏览器不支持特定CSS特性时提醒用户。通过将这些通知封装在独立的CodePen笔中，可以在多个演示中轻松引用，确保代码的整洁和高效。文章还展示了如何通过外部CSS链接将这些通知整合到其他演示中，实现统一管理和更新。

supports

当您的CodePen演示依赖于最先进CSS时，警告人们是个好主意。当浏览器不支持我们的演示时，我们使用@support规则来提供方便的可重用CodePen资产，以提供通知。

最终结果

这就是我们正在努力的方向；可重用的通知，以突出显示不受支持CSS。它将几乎完全保存在自己的笔中，我们可以通过外部CSS链接将其添加到其他演示中：

@supports规则

CSS @supports已经存在了好几年，并且本身就享有相当不错的浏览器支持。它使我们能够执行功能查询 ，仅当浏览器当时支持指定的属性时才应用CSS。这样可以防止半执行样式规则，甚至允许我们在显示警告时显示警告。

它通过将样式声明包装在一个条件中来工作，如下所示：

@supports (display: grid) {
  div {
    /* when CSS Grid is supported, do something */
  }
}

通知事项

让我们快速发出几个通知：

我们正在通过伪元素添加文本内容，以便可以从一个位置进行控制。这些标签最终将在许多演示中使用，因此将内容分开保存意味着我们可以一次性更改所有标签。

.support-initial-letter::after {
    content: "✋🏼 Hold on there cowboy; initial-letter is unsupported in your browser.";
}

随意设置这些样式。

添加@supports条件

默认情况下，我们的通知是可见的，但我们只希望在不支持其各自属性时显示它们。让我们添加一个条件来做到这一点：

@supports (initial-letter: 1) or (-webkit-initial-letter: 1) {
  .support-initial-letter::after {
    display: none;
  }
}

这里我们说的是“如果支持initial-letter或-webkit-initial-letter，请不要显示.support-initial-letter通知” 。

然后，我们为每个通知重复此操作，并给我们以下成品笔：

您可以看到多少条通知？

重新用作外部CodePen资产

保存笔后，我们可以从其他笔中引用它，从而为我们提供了超级有用的外部资产。将其作为外部CSS文件添加到新笔中：

这只会拉入CSS，而忽略我们在那里的任何HTML或JS，因此现在将所需的任何通知元素添加到新笔HTML中：

<div class="support-backdrop-filter"></div>

就这样，完成了！每当您更新@supports笔时，这些更改都会反映在您使用过的所有演示中。

结论

您会在笔上使用@supports通知来注意到许多尖端的@supports ； Jen Simmons做到了， Rachel Andrew做到了，我们做到了。将通知样式放入外置笔中是管理事务同时保持标记闪闪发光的完美方法。更新消息，添加新CSS属性，应用季节性品牌，发疯！让我们知道您如何在评论中使用@supports 。

翻译自: https://webdesign.tutsplus.com/tutorials/quick-tip-add-a-supports-css-file-to-your-codepen-demos--cms-27378

supports