如果你一直在关注最新的CSS发展，你可能对响应式Web开发的未来感到非常兴奋。容器查询是CSS中最激动人心的新增功能之一，它让大多数前端开发者议论纷纷。如果你对容器查询不熟悉，你可以在上面的链接中了解它们。
关于容器查询的许多兴奋点都集中在容器尺寸查询上。但是容器查询还有一个更令人兴奋的方面，大多数开发者并不了解：容器样式查询。在这篇文章中，我们将探讨你需要知道的关于样式查询的一切。
本文假设你至少对一种编程语言有基本了解，最好是CSS，并能使用Chrome Canary这样的实验性浏览器。
在本文中，我们将介绍。
不多说了，让我们直接进入正题。
什么是样式查询？
容器查询的工作方式类似于媒体查询，但它们允许你直接根据组件的尺寸或样式而不是设备的视口来查询。如果你想了解更多关于如何根据容器的大小来查询，请参考上面的链接。大多数开发者使用容器查询来根据容器的大小进行查询，像这样。
.card {
/* query the inline-direction size of this parent */
container-type: inline-size;
display :block;
background: blue;
}
@container (min-width: 600px) {
.card {
/* styles to apply when the card container is greater than or equal to 600px */
display: flex;
background: green;
}
}
上面的代码根据卡片容器的大小来查询，只有当卡片的宽度达到420px或以上时才会产生变化。
样式查询的工作方式相同，但它们允许你在查询容器内查询父元素的计算值或样式，然后根据其父元素将样式应用于子元素。
更简单地说，你可以使用样式查询来查询一个基于其样式的容器，而不仅仅是其尺寸。下面是它是如何工作的。
@container style(color: purple) {
/* styles to apply when the card container has a color of purple */
.card {
/* To change the background to green: */
background: green;
}
}
上面的代码将把一个卡片或部分的背景改为绿色，如果父部分的颜色是紫色。与尺寸查询不同的是，你必须用container-type 标签将一个元素建立为查询容器，除非另有说明，否则所有元素都被认为是样式查询的查询容器。
接下来，我们将看看在什么地方和什么时候使用样式查询。
在什么地方和什么时候使用CSS样式查询
CSS样式查询可以查询父容器的非继承性样式，并将上述样式应用于子元素。CSS中不可继承的样式包括高度、宽度、边界、边距、填充等。为了了解这一点，让我们创建一个卡片。
<!DOCTYPE html>
<html lang="en">
<head>
<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>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="card">
<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" alt="">
</div>
<div class="card-body">
<h5 class="title">A card</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">Get started</button>
</div>
</div>
</body>
</html>
现在，让我们给卡片设置样式。
.card{
width:400px;
padding: 20px;
border-radius: 4px;
border: solid 3px red;
background-color: blueviolet;
border-color: red;
}
.card-header{
margin: -20px -20px 0 -20px;
}
.card-img{
width: 100%;
height: auto;
}
.title {
font-size: 1.5rem;
margin-bottom: 0.5rem;
}
.btn{
border: solid 2px;
width: 100%;
padding: 0.75rem 1rem;
border-radius: 4px;
background-color: lightblue;
color: black;
font-weight: 600;
cursor: pointer;
border-color: black;
}
.btn:hover{
background-color: brown;
}
上面的代码将看起来像这样。
如果我们想让卡片的边框颜色被按钮继承，我们将运行以下代码。
@container style(border-color: red) {
.btn {
border-color: red;
}
}
结果会是这样的。
与尺寸查询不同，样式查询没有一个可靠的用例。当然，它们看起来很酷，很新颖，能让你的代码看起来更好，但它们目前没有解决任何具体问题。几乎所有的样式查询都可以用一个类或数据属性来完成。
例如，上述功能可以通过直接针对按钮并将其边框指定为红色来实现，或者通过创建自定义变量并将其添加到按钮的样式中。
然而，样式查询在与尺寸查询相结合时可以大放异彩，这实际上只有在使用高阶变量（自定义属性）时才有用。这里有一个例子。
@container card (min-width: 600px) and style(--responsive: true) {
/* styles for responsive components at a minimum width of 600px */
}
将样式查询与尺寸查询一起使用，将允许你应用特定的逻辑，从而产生更灵活的组件拥有的造型。这是一个方便的技巧，如果样式查询最终出货，我们可能会看到它变得流行。
样式查询的问题
就目前的情况来看，如果样式查询真的出现了，那么在它们出现之前，还有很多工作要做。样式查询从测试者那里得到了许多负面评价，但最重要的问题是对非自定义的CSS属性缺乏针对性。
例如，没有人了解style(width: calc(…)) 将如何表现，或者样式查询将如何处理像style(color: inherit) 这样的速记属性。这些问题可能会在编码过程中造成重大问题，并可能导致开发者不使用样式查询。
虽然这些问题可能有一些解决方案正在研究中，但在这些问题解决之前，样式查询不可能与尺寸查询一起发货，因为容器尺寸查询仍然保留了很多没有样式查询的功能。
样式查询是否存在用于非实验性浏览器的polyfills？
目前，还没有可用于样式查询的polyfills。唯一存在的用于容器查询的polyfill只包括容器尺寸查询，但在写这篇文章的时候，还没有为容器样式查询做任何事情。
如果你想帮CSS世界一个忙，为样式查询创建一个polyfill，这里有一个指南，你可以使用。
结论
虽然样式查询可能不是自媒体查询以来发生在响应式网页设计上最好的事情，但它们仍然有很大的潜力。如果它们的所有问题在发货时得到解决，它们可能还会对开发者产生价值。
了解和使用新的CSS样式查询一文出现在LogRocket博客上。
