继续前进，在您继续会议室里的每个人！

对于所有办公室粉丝来说，这将不是瑞安（Ryan）摄影收藏的顶峰。那不是我在说的那种曝光……那会很尴尬。 ð、

不，我在这里指的那种曝光甚至更好！ ...接触新的Web开发主题，功能和实践！

我一直喜欢与其他Web开发人员进行对话，因为我经常接触新的东西。无论是新的CSS属性，一些JavaScript API，还是解决问题的另一种方法，我都喜欢学习这样的新内容。这启发了我开始一个新系列，以分享和将这些东西暴露给更多的人。因此，在每个情节中，在Dunder Mifflin Crew的帮助下，我将分享一些（希望对您来说是新的）主题，以及一个可能使用的示例。

在第一集中，我想我会分享一些我真的很兴奋的CSS。

• 使用oklch()进行颜色
• 容器查询（最后！）
• :has()伪级要靶向较高的树

现在迈克尔找到另一种分散我们的注意力的方式，让我们潜入！

oklch()

如果您还没有听说，我们现在可以通过Display P3，Cielab，Oklab Colors Spaces访问CSS（支持设备）中的一大堆新颜色。自然，我们想在CSS中使用这些新颜色，因此添加了一些新功能来支持它们的使用。其中一些新功能是lab()，lch()和oklab() ...但是，我最兴奋的是oklch()。

（我不会在这里深入研究，但我强烈建议您查看这些新的颜色空间和功能的文档。）

使用oklch()函数，我们不仅可以访问俄克拉荷马州的颜色空间（在支持设备上），而且我们可以以对我（个人）更加直观的方式来记住。函数名称中的LCH代表Lightness，CHroma和Hue。轻度表示颜色与纯黑色（0％）或纯白色（100％）的近距离。 Chroma指的是包含的颜色量，其中0表示没有颜色...即。灰色的阴影。最后，色调是代表颜色的hue angle的数字。由于某种原因，这种格式只是为我点击，因此我更容易读取代码并（粗略地知道代码，而无需某些外部工具。但是可读性并不是使此功能出色的全部！

并非所有设备都支持这些新的颜色空间。但这没关系，因为oklch()具有内置后备。如果您指定一种新颜色，并且用户的设备不支持它，则浏览器将自动退缩到该颜色的关闭表示形式！作为开发人员，我们不必做任何额外的事情！现在，您可能会问：“我们怎么知道那个后备是什么？” ...很棒的问题。

感谢@evilmartians，我想使用的是一个很棒的小color picker，可以向您展示新的颜色和后背颜色，相互彼此相邻！您应该完全检查工具，看看有哪些新颜色可用。当迈克尔没有在公司获得工作后返回时，我比德怀特（Dwight）感到惊讶（或者是在米歇尔（Michel）“从考虑之后”之后）！

容器查询

我真的很兴奋的另一个CSS功能是Container Queries。许多开发人员已经需要很长时间了，这是终于在这里！如果您不熟悉，可以想象能够编写媒体查询，但是可以使用屏幕的信息，而是可以使用容器元素！这非常适合可以在整个应用程序（或多个应用程序）中在各个地方使用的组件。您可以根据组件的容器大小来指定样式更改，无论使用该布局如何！

但是，当我们看到一个例子时，为什么要谈论它！

假设我们有一个看起来像这样的组件：

它的结构看起来像这样：

  <div class="card">
    <header>
      <img src="https://i.imgur.com/8Km9tLL.jpg" alt="Dwight Schrute" />
      <div>
        <h2>Dwight K. Shrute</h2>
        <p>Assistant to the Regional Manager</p>
      </div>
    </header>
    <main>
      <ul>
        <li><strong>D</strong>etermined</li>
        <li><strong>W</strong>orker</li>
        <li><strong>I</strong>ntense</li>
        <li><strong>G</strong>ood Worker</li>
        <li><strong>H</strong>ard Worker</li>
        <li><strong>T</strong>errific</li>
      </ul>
    </main>
  </div>

此卡在移动设备上看起来不错，但是如果我们想在组件变得更宽时要更改布局怎么办？

过去，我们将不得不像
一样

.card { ... }

@media (min-width: 768px) {
  .card { ... }
}

，但这限制了我们使用屏幕宽度...如果我们想在宽度足够宽时更改组件的布局怎么办？ ...无论屏幕宽300px还是3000px！输入集装箱查询。

我们现在可以通过将我们的.card元素指定为容器来轻松实现，例如：

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

，然后在我们的容器达到一定宽度时创建一个集装箱查询以内部的目标元素：

@container (min-width: 500px) {
  .card header {
    flex-direction: row;

    & img {
      margin: 0 20px 0 0;
    }

    & h2 {
      text-align: left;
    }
  }
}

现在，每当我们的.card宽500px（或更多）时，我们的标题都会更改其布局，以便将内容水平显示。

，根据caniuse.com的说法，它们在4个浏览器的最新版本中得到了支持！

:has()

我想让您面对的最后一件事是开发人员长期以来一直要求的另一件事。这是CSS中的新的:has()伪类，它使我们能够根据没有JavaScript的元素有条件地对元素进行造型。

你听说我了！ CSS不再只是从上到下流！

甚至更好，它非常容易使用！

假设我们希望我们的图像具有margin-bottom: 2rem;，除非它们立即紧随其后的是具有caption类的<p>。这可能需要JavaScript首先测试以使字幕存在并在图像中添加类（或其他类似方法）。但是现在，我们可以在CSS中完全做到这一点。

img {
  margin-bottom: 2rem;
}

img:has(+ p.caption) {
  margin-bottom: 0;
}

Easy Peazy！

我们还可以以同样的方式根据孩子的父母元素进行样式。

假设我们想从上一节中给我们的所有.cards一个红色边框，当发现一个孩子<div>带有employee-of-the-month班级时。同样，这非常容易！

.card:has(div.employee-of-the-month) {
  border: 2px solid red;
}

那有多棒？！

根据caniuse.com的说法，我们仍在等待Firefox为此增加支持。但这是目前的可选功能，用户可以在Firefox中进行测试，因此希望我们能尽快发布它！

结论

oklch()，集装箱查询和:has()只是我对在过去的CSS中发行的一些事情，或者是2。希望您在这里发现了一些新事物！

您最喜欢的CSS功能是其他开发人员可能不知道的哪些？我敢肯定，其他人很想接触您的想法！

感谢您抽出宝贵的时间将自己暴露在新事物上。直到下一次，Happy Hacking！