最近，Chrome团队发布了对新CSS规范StyleQueries的实验性支持。简而言之，它让我们查询容器的样式而不仅仅是大小。这在查询容器大小不足的情况下很有用。CSS容器查询在介绍样式查询之前，让我们回顾一下容器查询。CSS容器查询是一项新的CSS功能，允许开发人员根据元素的大小应用样式。这意味着开发人员可以为不同大小的设备或浏览器窗口应用不同的样式，而无需使用媒体查询或使用JavaScript来检测设备大小。我们来看一个例子：.o-grid__item{container-type:inline-size;}.c-article{/*默认样式*/}@container(min-width:400px){.c-article{/*使文章水平的样式****而不是卡片样式..*/}}首先，我们需要定义container-type。然后，使用@container开始查询。一旦满足此条件，CSS将应用于该容器内的组件。样式查询简单地说，样式查询让我们查询容器中的CSS属性或CSS变量。样式查询仍处于试验阶段，目前仅在ChromeCanary中实现。要测试它们，请转到chrome://flags并激活“实验性Web平台功能”开关。例如，我们可以检查一个容器是否有display:flex和基于它的style子元素。.page-header{display:flex;}@containerstyle(display:flex){.page-header__start{flex:1;显示：弹性；对齐项目：居中；border-right:1pxsolidlightgrey;}}理想情况下，上面的做法应该是可行的，但是ChromeCanary中的样式查询原型目前仅限于CSS变量。样式查询预计在ChromeM111中出现。现在，我们可以检查变量--boxed:true是否被添加到容器中，如果是，我们可以根据它更改子元素的样式。看下图：注意容器查询和样式查询的主要区别是前者是查询尺寸，后者是查询样式。.card-container{--boxed:true;}@containerstyle(--boxed:true){.card{/*boxedstyles*/}}问题在我们查看可以在哪里使用样式查询之前，让我们先回答它们A大家常问的问题：样式查询能解决什么问题？容器查询还不够吗？这是一个很好的问题。在容器查询中，我们可以根据父组件的宽度来控制组件的样式，这非常有用。但是，在某些情况下，我们可能不需要查询大小，而是想查询容器的计算样式。为了给您一个更好的主意，请看下图：这是来自CMS的文章文本。我们有一个默认图像样式和另一种看起来与众不同的样式。下面是对应的代码：....figcaption{font-size:13px;填充：4px8px；background:lightgrey;}当我们开始为特色设计样式时，我们需要重写上面的内容并有一个我们可以用来设置样式的CSS类。.featured-figure{显示：flex;flex-wrap:wrap;}.featured-figurefigcaption{字体大小：16px;填充：16px；左边框：3px实心；左边距：-6rem；center;}当我们开始为突出显示的元素设置样式时，我们需要覆盖上面的样式并定义一个CSS类，以便它可以设置样式。.featured-figure{显示：flex;flex-wrap:wrap;}.featured-figurefigcaption{字体大小：16px;填充：16px；左边框：3px实心；左边距：-6rem；center;}太棒了，这个方法有效。我们能做得更好吗？是的！使用样式查询，我们可以添加display:flex或CSS变量--featured:true到图中，然后基于此设置样式。....图{容器名称：图；--featured:true;}/*特色人物风格。*/@containerfigurestyle(--featured:true){img{/*自定义样式*/}figcaption{/*自定义样式*/}}如果--featured:true不存在，我们将默认使用基本图形设计。我们可以使用not关键字来检查图形是否没有显示：flex。/*默认图形样式。*/@containerfigurenotstyle(--featured:true){figcaption{/*自定义样式*/}}需要了解的一些细节默认情况下，每个元素都是一个样式容器，因此它是基础的无需定义风格的容器。默认情况下它在那里。我们不能用类名来解决这个问题吗？我们可以。使用样式查询的目的是使CSS更具可读性和更易于修改。上面的逻辑可以写成一个组件CSS，而无需将所有这些样式都添加到条件类中。示例：https://codepen.io/shadeed/pen/ZERZxzG/a583817975bae6b78308acb6939a9a54?editors=1100减少CSS特异性问题我喜欢使用样式查询的原因是它会降低CSS特异性，因为我们将较少依赖CSS更改类或样式组件更改的HTML数据属性。在下面的CSS中，我们为该部分添加了基本样式。没什么特别的。.section{background-color:lightgrey;}.section__title,.section__desc{color:#222;}我们需要一种方法来为它设置不同的主题，所以我们使用variation类。.section--dark{background-color:#222;}.section--dark.section__title,.section--dark.section__desc{color:#fff;}使用样式查询，我们可以在.section组件周围使用容器,然后标记标题和描述，而无需在CSS中创建更多特异性。@containerstyle(--theme:dark){.section{背景颜色：#222;}.section__title,.section__desc{颜色：#fff;这看起来干净多了。接下来，我们探索样式查询可能有用的几个用例。用例和示例基于上下文的样式这是一个常见的用例，我们使用了相同的组件，但在相同的包装器中以不同的方式使用它。在右侧，我们有一个文章组件，它可能包含也可能不包含数字。现在，我们可能会使用一个新的CSS类来解决样式问题，或者可能会在文章组件本身上使用一个变体类。.most-popular{counter-reset:list;}.most-populararticle{/*自定义样式*/}或者我们可以在HTML中使用数据属性。.most-popular[data-counter="true"]{counter-reset:list;}.most-popular[data-counter="true"].article{/*自定义样式*/}使用CSS样式查询，我们您可以将CSS变量添加到父元素并相应地设置文章样式。看看这个：.most-popular{--counter:true;}@containerstyle(--counter:true){.articles-list{counter-reset:list;}.article{显示：flex；对齐项目：弹性启动；}.article:before{反增量：列表；内容：计数器（列表）；我们甚至不需要在文章组件上使用变体类。也不需要使用CSS嵌套。示例：https://codepen.io/shadeed/pen/LYBYYWP/b53e0baa891dc48b0689e1f926f89b96?editors=1100组件级主题切换我们构建的一些组件需要根据特定条件使用不同的主题。在下面的示例中，我们有一个包含不同统计组件的仪表板。基于包装器，我们需要切换组件的主题。目前，我们可以使用特殊的类来根据容器来设置自定义统计组件的样式。.special-wrapper.stat{background-color:#122c46;}.special-wrapper.stat__icon{background-color:#2e547a;}.special-wrapper.stat__title{background-color:#b3cde7;}不错，不错,但由于我们嵌套CSS，它增加了特异性。让我们探讨如何使用样式查询来实现上述目标。首先，我们需要在特殊包装器上定义一个切换按钮。然后我们可以检查开关是否处于活动状态并相应地设计状态组件。.special-wrapper{--theme:dark;container-name:stats;}@containerstatsstyle(--theme:dark){.stat{/*添加深色样式。*/}}在这种情况下，样式查询的用处在于将上述样式放在CSS中的一个地方是有意义的。/*stat.css*/.stat{/*默认样式*/}@containerstatsstyle(--theme:dark){.stat{/*自定义样式*/}}头像组在这个例子中我们有一组用户的头像。我们需要根据在父级上设置的CSS变量来对它们进行不同的布局。我从Atlassian设计系统中挑选了这个例子。
