深入挖掘容器样式查询-css教程-PHP中文网

Digging Deeper Into Container Style Queries

>我一段时间以前就写了一些关于容器风格查询的想法。还很早。它们已经在CSS遏制模块3级规范中定义（目前处于编辑的草案状态），但仍有一些出色的讨论。

>基本思想是，我们可以根据其计算的样式定义容器，然后将样式应用于其后代。

到目前为止，我见过的最好的例子是从类似＆＆gt; em＆lt; i＆gt;和＆＆lt q＆gt; q＆gt;当它们在内容已经斜体化的上下文中使用时：

@container <name>? <conditions> {
  /* conditional styles */
}

登录后复制

这是一个总体想法。但是，如果您不知道，Spec的编辑Miriam Suzanne将在公开可用的集装箱样式查询上保留一套持续而彻底的个人笔记。前几天，它进行了更新，我花了一些时间在那里试图将我的头缠绕在样式查询的更多细微差别方面。这是非正式的东西，但我想我会记下一些对我来说突出的事情。谁知道？也许是我们最终可以期待的东西！

em, i, q {
  font-style: italic; /* default UA behavior */
}

/* When the container's font-style is italic, remove italics from these elements. */
@container style(font-style: italic) {
  em, i, q {
    font-style: normal;
  }
}

登录后复制

每个元素都是样式容器

>我们甚至不需要解释分配一个容器名称或容器类型来定义样式容器，因为默认情况下，所有内容都是样式容器。>

>那么，您在上面看到了删除斜体的示例吗？请注意，它无法识别容器。它使用style（）函数直接跳到查询。那么，要查询什么容器？这将是接收应用样式的Elements

最接近的相对容器才能优先。> 我喜欢那个。查询要搜索一场比赛是非常CSS-y，然后继续冒泡直到找到匹配条件。 >我的小脑很难理解为什么我们可以根据样式逃脱一个隐式容器，但在处理尺寸和内线大小等维度查询时并不是那么多。 Miriam很好地解释了：

尺寸查询需要在容器的尺寸，布局和样式上进行CSS

contemment >基于样式的查询没有相同的限制。

>在CSS中，后代风格无法对祖先的计算样式产生影响。>，因此不需要遏制，并且在将元素建立为样式的Query COURARY COUNER COUNER CONELER CONELER CONELER CONERER 。 （强调矿山）

>这一切都归结为后果 - 只要一切都不是一个样式查询容器。

如果找到一个容器：在该容器中解决条件。

如果多个容器匹配：最接近的相对容器优先。

如果找不到匹配：未知返回。
>

>假设我们希望在没有明确的容器名称的情况下定义样式查询：>

>这是因为

>所有元素都是样式容器

，无论容器类型如何。这就是使我们能够隐式查询样式并依靠最近的比赛的原因。这完全可以，因为建立样式容器时也没有不利的副作用。

>我们必须使用明确的容器类型来进行维数查询，但对于样式查询而言并不多，因为每个元素都是样式查询。这也意味着此容器既是样式

@container <name>? <conditions> {
  /* conditional styles */
}

登录后复制

>和

dimensional查询：> 排除容器不被查询

也许我们不希望容器参与匹配过程。那就是可以设置容器类型的地方：

em, i, q {
  font-style: italic; /* default UA behavior */
}

/* When the container's font-style is italic, remove italics from these elements. */
@container style(font-style: italic) {
  em, i, q {
    font-style: normal;
  }
}

登录后复制

显式样式查询容器提供更多控制

的更多控制权

如果我们要编写用于填充的样式查询，则没有可靠的方法来确定最佳的匹配容器，无论我们是使用明确命名的容器还是最近的直接父母。那是因为填充不是继承的财产。

>因此，在这些情况下，我们应该使用容器名称来解释可以从哪些容器中删除的浏览器。我们甚至可以给一个容器多个明确的名称，以使其匹配更多的条件：

@container style(font-style: italic) {
  em {
    font-style: normal;
  }
}

登录后复制

oh，并且容器名称接受容器的任何数量的可选和可重复使用的

名称！在帮助浏览器搜索比赛时，这更加灵活。

我有点想知道，如果一个容器被传递给一个容器，这是否也可能被视为“后备”。

.card-container {
  container: card / inline-size; /* implictly a style query container as well */
}

登录后复制

>样式查询可以组合

>或和和和和和和和和和和and and and and and and and and and and and and and and and and and and and and and and and and and and and and and and and和and and and and and and and and and and and and and和and and和and and and and and and and and and and和and and and and and and and和and and and and and and and和and and and and and and and and and and and wueries以保持干燥：

@container <name>? <conditions> {
  /* conditional styles */
}

登录后复制

>切换样式

>在容器样式查询与定义toggle（）函数的工作之间存在一些重叠。例如，我们可以循环循环两个字体式的值，例如斜体和正常值：

em, i, q {
  font-style: italic; /* default UA behavior */
}

/* When the container's font-style is italic, remove italics from these elements. */
@container style(font-style: italic) {
  em, i, q {
    font-style: normal;
  }
}

登录后复制

酷。但是CSS切换的建议表明toggle（）函数将是一种更简单的方法：>

@container style(font-style: italic) {
  em {
    font-style: normal;
  }
}

登录后复制

但是，除了这种二进制用例之外，其他任何东西都不太合适。但是，样式查询是很好的。 Miriam确定了样式查询比toggle（）更合适的三个实例：

.card-container {
  container: card / inline-size; /* implictly a style query container as well */
}

登录后复制

>样式查询求解“自定义属性切换hack”

请注意，样式查询是“ CSS自定义属性切换技巧”的正式解决方案。在那里，我们设置了一个空的自定义属性（ - foo：;），并使用逗号分隔的后备方法将“切换”属性“切换”，然后将自定义属性设置为真实值。

>超级酷，也是很多样式容器查询的工作。

.some-element {
  container-type: none;
}

登录后复制

>样式查询和CSS生成的内容

>对于由::之前的内容属性产生的生成的内容和伪元素之后的:: :: ::匹配的容器是生成内容的元素。

>

样式查询和Web组件

.card {
  container-name: card layout theme;
}

登录后复制

>我们可以将Web组件定义为容器，并按样式查询。首先，我们有＆lt;模板＆gt;组件的：

然后，我们使用：主机伪元素作为容器来设置容器名称，容器类型和某些高级属性：

.theme {
  container-name: theme;
}
.grid {
  container-name: layout;
}
.card {
  container-name: card layout theme;
}

登录后复制

>元素内部的元素;可以查询＆lt; Media-host＆gt;元素：

@container bubble style(--arrow-position: start start) or style(--arrow-position: end start) {
  .bubble::after {
    border-block-end-color: inherit;
    inset-block-end: 100%;
  }
}

/* is the same as... */
@container bubble style(--arrow-position: start start) {
  /* etc. */
}
@container bubble style(--arrow-position: end start) {
  /* etc. */
}

登录后复制

下一步是什么？

再次，我在这里记下的所有内容都是基于Miriam的笔记，这些笔记不能替代官方规格。但是，它们表明正在讨论的内容以及未来可能降落的地方。我感谢Miriam链接了一些仍在进行的杰出讨论，我们可以遵循这些讨论，以保持最大的态度：

em, i, q {
  font-style: italic;
}

@container style(font-style: italic) {
  em, i, q {
    font-style: normal;
  }
}

登录后复制

更高级别的自定义属性，该属性控制多个声明＃5624

> style（）查询应该允许！重要标志吗？＃7413

以上是深入挖掘容器样式查询的详细内容。更多信息请关注PHP中文网其他相关文章！