精通 CSS 容器查询逻辑组合：释放查询逻辑运算符的力量

CSS 容器查询是响应式网页设计领域的一项重大革新，它允许开发者根据其包含元素的大小或状态来设置元素样式，而不是根据视口。虽然基本的容器查询已经提供了强大的灵活性，但其真正的潜力在于与逻辑运算符结合使用。本篇综合指南将深入探讨如何使用 'and'、'or' 和 'not' 来创建能够精确响应容器条件的、复杂的、适应性强的布局。

什么是 CSS 容器查询？快速回顾

在深入探讨逻辑运算符之前，让我们快速回顾一下什么是容器查询以及它们为何如此重要。

传统的媒体查询是基于视口的，这意味着它们响应的是浏览器窗口的大小。而容器查询则允许您根据包含元素的大小或状态来应用样式。这提供了更精细的控制，并实现了真正基于组件的响应式设计。

例如，您可能有一个显示信息的卡片组件。通过容器查询，您可以根据其在父容器中的宽度来调整卡片的布局。如果卡片足够宽，它可以将信息横向排列；如果它很窄，则可以将元素垂直堆叠。这确保了无论卡片放置在页面的哪个位置，它都能看起来很好。

要使用容器查询，您首先需要在一个元素上建立一个容器上下文。这可以通过 container-type 属性来完成。两个最常用的值是：

• size: 容器查询将对容器的宽度和高度都做出反应。
• inline-size: 容器查询将对行内尺寸（在水平书写模式中通常是宽度）做出反应。

您还可以使用 container-name 为您的容器命名，这允许您在有嵌套容器上下文的情况下定位特定的容器。

一旦建立了容器上下文，您就可以使用 @container 规则来定义在满足特定条件时应用的样式。

逻辑运算符的力量：'and'、'or' 和 'not'

真正的魔力发生在将容器查询与逻辑运算符结合使用时。这些运算符允许您创建针对特定容器状态的复杂条件。让我们详细探讨每一种运算符。

'and' 运算符：要求满足多个条件

and 运算符允许您组合多个条件，要求所有条件都满足时才会应用样式。当您希望同时针对满足特定尺寸和状态标准的容器时，这非常有用。

示例： 假设您有一个容器，您希望在它宽度超过 500px 并且设置了特定数据属性时为其设置不同样式。

            
.card-container {
  container-type: inline-size;
}

@container (min-width: 500px) and (data-theme="dark") {
  .card {
    background-color: #333;
    color: #fff;
  }
}

            

              
                Copy
              
            
          

在此示例中，只有当 .card-container 的宽度至少为 500px 并且 data-theme 属性设置为 "dark" 时，.card 才会有深色背景和白色文本。如果任一条件不满足，@container 规则内的样式将不会被应用。

'and' 的实际用例：

• 条件性布局更改： 根据组件的宽度及其是否存在特定类或数据属性来更改其布局（例如，如果容器足够宽且具有 "featured" 类，则从单列布局更改为多列布局）。
• 特定主题样式： 根据容器的主题（例如，深色或浅色模式）和其大小应用不同的样式。
• 基于状态的样式： 根据组件的大小及其是否处于特定状态（例如，"active"、"disabled"）来调整其外观。

'or' 运算符：满足至少一个条件

or 运算符允许您在指定的条件中至少有一个被满足时应用样式。当您希望针对处于不同尺寸范围或具有不同状态的容器时，这非常有用。

示例： 假设您希望对一个容器应用特定样式，条件是它的宽度小于 300px 或大于 800px。

            
.card-container {
  container-type: inline-size;
}

@container (max-width: 300px) or (min-width: 800px) {
  .card {
    padding: 1em;
    border: 1px solid #ccc;
  }
}

            

              
                Copy
              
            
          

在此示例中，如果 .card-container 的宽度小于 300px 或 大于 800px，.card 将会有一个 1em 的内边距和一个边框。如果容器的宽度在 300px 和 800px 之间（含），@container 规则内的样式将不会被应用。

'or' 的实际用例：

• 处理不同屏幕尺寸： 根据组件是在小屏幕（如移动设备）还是大屏幕（如桌面设备）上显示，应用不同的样式。
• 提供替代布局： 根据组件是否有一定量的可用空间，为其提供不同的布局。
• 支持多种主题： 为组件的不同主题或变体应用特定样式。例如，一个组件可能会根据它是在“主要”还是“次要”上下文中使用而具有不同的样式，而与其大小无关。

'not' 运算符：排除特定条件

not 运算符允许您在特定条件不满足时应用样式。这对于反转逻辑或针对不具有特定特征的容器非常有用。

示例： 假设您想为一个容器应用特定样式，除非它有 "featured" 类。

            
.card-container {
  container-type: inline-size;
}

@container not (.featured) {
  .card {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
}

            

              
                Copy
              
            
          

在此示例中，除非 .card-container 具有 "featured" 类，否则 .card 将应用盒阴影。如果容器有 "featured" 类，则盒阴影将不会被应用。

'not' 的实际用例：

• 应用默认样式： 使用 not 为没有特定类或属性的元素应用默认样式。这可以通过避免在某些情况下覆盖样式来简化您的 CSS。
• 反转条件逻辑： 有时，根据不应该出现的情况来定义样式会更容易。not 允许您反转逻辑，并针对不满足特定条件的元素。
• 创建例外： 使用 not 为通用样式规则创建例外。例如，您可以将特定样式应用于所有容器，除了那些位于页面特定区域内的容器。

组合逻辑运算符以实现复杂条件

容器查询逻辑运算符的真正威力来自于将它们组合起来创建复杂条件。您可以使用括号对条件进行分组并控制评估顺序，就像在 JavaScript 或其他编程语言中一样。

示例： 假设您想为一个容器应用特定样式，条件是它的宽度大于 600px 并且 它具有 "primary" 类 或者 没有 "secondary" 类。

            
.card-container {
  container-type: inline-size;
}

@container (min-width: 600px) and (.primary or not(.secondary)) {
  .card {
    border: 2px solid blue;
  }
}

            

              
                Copy
              
            
          

在此示例中，如果满足以下条件，.card 将会有一个蓝色边框：

1. .card-container 的宽度大于 600px。
2. 并且 以下任一条件成立：
• .card-container 具有 "primary" 类。
• 或者 .card-container 不具有 "secondary" 类。

这个例子展示了如何使用组合逻辑运算符创建非常具体和细致的样式规则。

组合运算符时需要注意的事项：

• 运算符优先级： 虽然括号有助于控制评估顺序，但了解逻辑运算符的默认优先级很重要。在 CSS 容器查询中，and 的优先级高于 or。这意味着 (A or B) and C 与 A or (B and C) 是不同的。使用括号明确定义评估顺序以避免歧义。
• 可读性： 复杂的条件可能变得难以阅读和理解。使用括号和注释将复杂条件分解为更小、更易管理的部分，以提高可读性和可维护性。
• 测试： 使用不同的容器尺寸和状态彻底测试您的容器查询，以确保它们按预期工作。使用浏览器开发者工具检查应用的样式并验证是否应用了正确的规则。

真实世界的示例和用例

让我们探索一些真实世界的例子，看看如何使用容器查询逻辑运算符来创建适应性强和响应式的布局。

示例1：一个灵活的卡片组件

考虑一个卡片组件，它根据其宽度以不同方式显示信息。我们可以使用带有逻辑运算符的容器查询来控制卡片的布局和外观。

            

  

    
    
Card Title
    
Card Description
    Learn More
  


            

              
                Copy
              
            
          

            
.card-container {
  container-type: inline-size;
  width: 100%;
  max-width: 800px; /* Example max-width */
  margin: 0 auto;
}

.card {
  display: flex;
  flex-direction: column;
  border: 1px solid #ccc;
  padding: 1em;
}

.card img {
  width: 100%;
  max-width: 200px; /* Example max-width for the image */
  margin-bottom: 1em;
}

/* Default styles for small containers */
@container (max-width: 400px) {
  .card {
    text-align: center;
  }

  .card img {
    margin: 0 auto 1em;
  }
}

/* Styles for medium containers */
@container (min-width: 401px) and (max-width: 600px) {
  .card {
    flex-direction: row;
    align-items: center;
  }

  .card img {
    margin: 0 1em 0 0;
  }

  .card > *:not(img) {
    flex: 1;
  }
}

/* Styles for large containers */
@container (min-width: 601px) {
  .card {
    flex-direction: row;
    align-items: flex-start;
  }

  .card img {
    margin: 0 1em 0 0;
  }

  .card > *:not(img) {
    flex: 1;
  }
}

            

              
                Copy
              
            
          

在这个例子中：

• 对于宽度为 400px 或更小的容器，卡片元素居中对齐。
• 对于宽度在 401px 到 600px 之间的容器，图像和文本以行的方式显示，图像在左侧。
• 对于宽度超过 600px 的容器，布局与中等容器相同，但项目会向起始位置对齐。

示例2：一个响应式导航菜单

另一个实际例子是一个响应式导航菜单，它会根据可用空间进行调整。我们可以使用容器查询在紧凑的、基于图标的菜单和完整的、基于文本的菜单之间切换。

            


            

              
                Copy
              
            
          

            
.nav-container {
  container-type: inline-size;
  background-color: #f0f0f0;
  padding: 0.5em;
}

.nav-container ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: space-around;
}

.nav-container li a {
  text-decoration: none;
  color: #333;
  display: flex;
  align-items: center;
  padding: 0.5em;
}

.nav-container i {
  font-size: 1.2em;
  margin-right: 0.5em;
}

.nav-container span {
  display: none; /* Hide text by default */
}

/* Styles for larger containers */
@container (min-width: 400px) {
  .nav-container span {
    display: inline; /* Show text for larger containers */
  }
}

            

              
                Copy
              
            
          

在这个例子中，导航菜单项最初只显示图标。当容器宽度超过 400px 时，文本标签会与图标一起显示，从而创建一个更具描述性的菜单。

示例3：国际化和文本方向

容器查询对于根据文本方向调整布局也很有用。这对于支持从右到左（RTL）书写语言（如阿拉伯语或希伯来语）的国际化网站尤其重要。

            

  

    
Article Title
    
Lorem ipsum dolor sit amet, consectetur adipiscing elit. ...
  


            

              
                Copy
              
            
          

            
.article-container {
  container-type: inline-size;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.article {
  padding: 1em;
}

/* Default styles for LTR (Left-to-Right) */
.article h1 {
  text-align: left;
}

/* Styles for RTL (Right-to-Left) */
@container (dir(rtl)) {
  .article h1 {
    text-align: right;
  }
}

            

              
                Copy
              
            
          

在此示例中，dir(rtl) 容器查询针对 dir 属性设置为 "rtl" 的容器。当文本方向为 RTL 时，标题会向右对齐。这确保了布局能为不同的语言和书写系统正确适配。

使用容器查询逻辑运算符的最佳实践

为了充分利用容器查询逻辑运算符，请牢记以下最佳实践：

• 从简单开始： 从基本的容器查询开始，然后根据需要逐步引入逻辑运算符。避免创建过于复杂、难以理解和维护的条件。
• 使用有意义的名称： 使用描述性的类名和数据属性，使您的容器查询更具可读性和自文档性。
• 优先考虑可读性： 使用括号和注释来提高复杂条件的可读性。将长条件分解为更小、更易管理的部分。
• 彻底测试： 使用不同的容器尺寸和状态测试您的容器查询，以确保它们按预期工作。使用浏览器开发者工具检查应用的样式并验证是否应用了正确的规则。
• 考虑性能： 虽然容器查询通常性能良好，但复杂的条件可能会影响性能。避免创建需要浏览器进行大量计算的过于复杂的条件。
• 渐进增强： 将容器查询作为一种渐进增强技术。为不支持容器查询的浏览器提供回退方案，以确保基本的功能水平。
• 记录您的代码： 清晰地记录您的容器查询及其背后的逻辑。这将使您和其他开发者将来更容易理解和维护您的代码。

结论：拥抱容器查询逻辑的灵活性

CSS 容器查询逻辑运算符为创建高度响应式和适应性强的布局提供了强大的工具集。通过组合 'and'、'or' 和 'not'，您可以创建针对特定容器状态的复杂条件，并相应地应用样式。这使得对布局的控制更加精细，并实现了真正基于组件的响应式设计。

随着容器查询支持的不断普及，掌握这些技术对于前端开发者来说将变得越来越重要。通过遵循本指南中概述的最佳实践并尝试不同的用例，您可以释放容器查询的全部潜力，并在各种设备和上下文中创造卓越的用户体验。

拥抱容器查询逻辑的灵活性，将您的响应式设计技能提升到一个新的水平！