理解和使用新的 CSS 样式查询

最新推荐文章于 2024-01-22 13:12:22 发布

pxr007

最新推荐文章于 2024-01-22 13:12:22 发布

阅读量405

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/weixin_47967031/article/details/127281183

版权

如果您一直跟上最新的 CSS 开发，您可能对响应式 Web 开发的未来感到非常兴奋。容器查询是大多数前端开发人员谈论的 CSS 中最令人兴奋的新增功能之一。如果您不熟悉容器查询，可以在上面的链接中了解它们。

很多关于容器查询的兴奋都集中在容器大小查询上。但是大多数开发人员不知道的容器查询还有一个更令人兴奋的方面：容器样式查询。在本文中，我们将了解您需要了解的有关样式查询的所有信息。

本文假设您对至少一种编程语言（最好是 CSS）有基本的了解，并且可以使用Chrome Canary 等实验性浏览器。

在本文中，我们将介绍：

什么是样式查询？
何时何地使用样式查询
样式查询的问题
样式查询是否存在 polyfill？

事不宜迟，让我们开始吧。

什么是样式查询？

容器查询的工作方式与媒体查询类似，但它们允许您直接根据组件的大小或样式而不是设备的视口来查询组件。Black Box手机软件无限多开App，支持一键安装Xposed框架，免费又好用无限分身！如果您想了解有关如何根据容器大小查询容器的更多信息，请参阅上面的链接。大多数开发人员使用容器查询来根据容器的大小来查询容器，如下所示：

。卡片 {
  /* 查询这个父级的内联方向大小 */
  容器类型：内联大小；
  显示：块；
  背景：蓝色；
}

@container（最小宽度：600px）{
  。卡片 {
    /* 当卡片容器大于或等于 600px 时应用的样式 */
    显示：弯曲；
    背景：绿色；
  }
}

上述代码根据卡片容器的大小查询卡片容器，只有卡片宽度为 420px 或以上时效果才会发生变化。

样式查询的工作方式相同，但它们允许您查询查询容器中父元素的计算值或样式，然后根据父元素将样式应用于子元素。

简单来说，您可以使用样式查询来根据容器的样式而不是大小来查询容器。以下是它的工作原理：

@容器样式（颜色：紫色）{
      /* 卡片容器颜色为紫色时应用的样式 */
  。卡片 {
    /* 将背景更改为绿色： */
    背景：绿色；
  }
}

如果父部分的颜色为紫色，上述代码会将卡片或部分的背景更改为绿色。与大小查询不同，您必须将元素建立为带有container-type标签的查询容器，除非另有说明，否则所有元素都被视为样式查询的查询容器。

接下来，我们将看看何时何地使用样式查询。

何时何地使用 CSS 样式查询

CSS 样式查询可以查询父容器的不可继承样式并将所述样式应用于子容器。CSS 中不可继承的样式包括高度、宽度、边框、边距、内边距等。要了解其工作原理，让我们创建一张卡片：

<!DOCTYPE html>
<html lang="zh">
<头部>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>文档</title>
  <link rel="stylesheet" href="style.css">
</head>
<正文>
    <div class="卡片">
      <div class="cardheader">
        <img src="https://images.unsplash.com/photo-1657664042448-c955b411d9d0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1032&q=80" class="card-img" >
      </div>
      <div class="card-body">
        <h5 class="title">一张卡片</h5>
        <p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit。Sint facere, neque fugit rem recusandae libero aliquid do</p>
        <button class="btn">开始</button>
      </div>
    </div>


</正文>
</html>

现在，让我们为卡片设置样式：

。卡片{
    宽度：400px；
    填充：20px；
    边框半径：4px；
    边框：纯色 3px 红色；
    背景颜色：蓝紫色；
    边框颜色：红色；
}

.card-header{
    边距：-20px -20px 0 -20px；

}

.card-img{
    宽度：100%；
    高度：自动；
}

。标题 {
    字体大小：1.5rem；
    边距底部：0.5rem；
}

.btn{
    边框：实心2px；
    宽度：100%；
    填充：0.75rem 1rem；
    边框半径：4px；
    背景颜色：浅蓝色；
    颜色：黑色;
    字体粗细：600；
    光标：指针；
    边框颜色：黑色；
}

.btn:悬停{
    背景颜色：棕色；
}

上面的代码将如下所示：

如果我们希望按钮继承卡片的边框颜色，我们将运行以下代码：

@容器样式（边框颜色：红色）{
  .btn {
    边框颜色：红色；
  }
}

结果将如下所示：

与大小查询不同，样式查询没有可靠的用例。当然，它们看起来很酷，很新，并且可以使您的代码看起来更好，但它们目前并不能解决任何特定问题。几乎所有样式查询都可以使用类或数据属性来完成。

例如，上述功能可以通过直接定位按钮并将其边框指定为红色或通过创建自定义变量并将它们添加到按钮样式来实现。

但是，样式查询与大小查询结合使用时会大放异彩，这仅在使用高阶变量（自定义属性）时才真正有用。这是一个例子：

@container card (min-width: 600px) and style(--responsive: true) {
  /* 响应式组件的样式，最小宽度为 600px */
}

使用带有大小查询的样式查询将允许您应用特定的逻辑，从而产生更灵活的组件拥有的样式。这是一个方便的技巧，如果样式查询最终发布，我们可能会看到它变得流行。

样式查询的问题

就目前而言，在样式查询发布之前，如果有的话，还有很多工作要做。样式查询收到了许多来自 beta 测试人员的负面评价，但最重要的问题是非自定义 CSS 属性缺乏特异性。

例如，没有人了解style(width: calc(…))将如何表现或样式查询将如何处理诸如style(color: inherit). 这些问题可能会导致编码过程中出现重大问题，并可能导致开发人员不使用样式查询。

虽然这些问题可能有一些解决方案，但在解决这些问题之前，样式查询不太可能与大小查询一起提供，因为容器大小查询在没有样式查询的情况下仍然保留了很多功能。

是否存在用于在非实验性浏览器中使用的样式查询的 polyfill？

目前，没有可用于样式查询的 polyfill。容器查询存在的唯一polyfill仅涵盖容器大小查询，但在撰写本文时尚未对容器样式查询进行任何操作。

如果您想帮助 CSS 世界并为样式查询创建一个 polyfill，您可以使用这里的指南。

结论

虽然样式查询可能不是自媒体查询以来响应式网页设计的最佳选择，但它们仍然具有很大的潜力。如果在发货时解决所有问题，它们可能对开发人员有价值。

pxr007

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
理解和使用新的 CSS 样式查询

容器查询的工作方式与媒体查询类似，但它们允许您直接根据组件的大小或样式而不是设备的视口来查询组件。如果您想了解有关如何根据容器大小查询容器的更多信息，请参阅上面的链接。大多数开发人员使用容器查询来根据容器的大小来查询容器，如下所示：。卡片 {/* 查询这个父级的内联方向大小 */容器类型：内联大小；显示：块；背景：蓝色；}@container（最小宽度：600px）{。卡片 {
复制链接

扫一扫