[Robin]: 假设你需要一些边距和填充实用程序类。例如，在 Tailwind 中，你会编写一些 HTML 如下所示

<div class="pt-6"...</div

这将padding-top CSS 属性设置为比例中的6。1 更小……

[Robin]: 最近在新闻通讯中，我们写了一些关于将来能够使用 CSS 做的有趣的事情。CSS 嵌套！容器查询！查询单位！新的伪元素！所有这些都非常令人兴奋，但我认为我们需要放慢……

嵌套 CSS 类非常方便。如果您熟悉 Sass 和 Less 等预处理语言，那么您可能习惯了像这样嵌套

.card {
  .card-text {
    font-size: 1em;
  }
  &.card-large {
    padding: 2em;
  }
  body.home & .card-title 

Chris 在这里，代替我们通常的每周通讯员 Robin。说到 Robin，你应该订阅他的博客，因为它是一个很棒的个人博客，他正在迁移到 Astro并撰写关于此事的文章，这仅仅是一个值得……

[Robin]: 你听说过 CSS 查询单位吗？它们目前还不是 CSS 中的一部分，但让我先设定一下场景，解释一下它们将如何有用。我偶然发现了这个想法，因为我偶然……

我必须坦白一个可怕的秘密。把我送进监狱，把钥匙锁起来，因为，尽管我一直在大谈特谈可变字体，但我从未真正使用过它们。我阅读过教程和演示，我喜欢看到……

[Robin]: 这些年来，我参加过不少会议；有些会议没有重点，有点漫无边际，有些会议不清楚为什么要开会，或者说，一些会议……

[Robin]: 在 Web 开发方面，我觉得图像在过去几年一直处于不断变化的状态。将图像添加到网站的最佳方法是什么？好吧，这个问题……

[Robin]：Max Böck 询问我们应该何时使用@container 或@media 查询？

虽然我认为容器查询最终将取代大多数“低级”响应式逻辑，但可靠的媒体查询仍然有很多很好的用例。

组合

[Robin]: 令人兴奋的消息！本周正式推出了 Astro——它是一个静态网站构建器，嗯，非常令人兴奋

在 Astro 中，您可以使用来自您最喜欢的 JavaScript Web 框架（React、Svelte、Vue、

出于某种原因，本周我一直回到 HTML 和 CSS 的最基本内容，阅读了许多博客文章，这些文章提醒我，在……方面，我仍然存在一些知识差距。

[Robin]: 本周早些时候，我偶然发现了一个问题，我想到的唯一解决方案是一个假设性的解决方案：CSS 中的:nth-letter 选择器。它将类似于这样工作

.element:nth-letter(2) {
  color: red;
}

类似于:nth-child……

[Robin]: Stefánia Péter 创建了一个名为CSS Hell 的简洁网站。它告诉我们编写 CSS 时要避免什么，我喜欢关于特异性的这条说明

开发人员经常编写过于具体的选择器，只是为了 10000% 确保他们的

[Robin]: 本周首先，Una Kravets 撰写了关于容器查询将如何让未来变得美好的文章

容器查询将是自 CSS3 以来 Web 样式方面最大的变化，它将改变我们对“响应式设计”的理解。

[Robin]: 本周我一直在思考 gov.uk 团队的这篇文章，他们在文章中写了他们如何制作一个显示和隐藏输入密码的按钮。他们通过在……之间切换来实现这一点。

[Robin]: 我以为我对响应式图像了如指掌，但是Addy Osmani 的这篇文章确实证明我错了。他写了图像如何影响性能以及这如何与 Google 的核心 Web 指标相关联，但……

[Robin]: 想象一下，你能够跳到未来——比如十年后——看看你如何编写 CSS。那会是什么样子？您预计在这么长的时间里，语言会有多少变化？……

[Robin]：这条路漫长而曲折，但容器查询开始出现了。它们刚刚登陆 Chrome Canary。几周前，我在 Andy Bell 的博客上首次发现了这条新闻，当时他做了一个很棒的……

[Robin]: 我目前最喜欢的网站是Volume，“一个用于高质量插图书籍的出版平台”。这是一个您可以启动书籍相关项目的地方，但最终制作出来的这些庞大而美丽的……

Space Jam 网站一直是一个时间胶囊。您访问spacejam.com，突然被传送到 1996 年；一个CSS 诞生之前的时代，一个使用<table> 元素在页面上创建网格和布局很酷的时代……