AI 摘要：这篇文章展示了如何用现代 CSS 的新特性（如 container-type 与 cqw 单位）构建一个响应式的重叠头像列表。图片间的间距可根据容器宽度与元素数量自动调整，无需固定值或“魔法数字”；布局既灵活，又保持了视觉平衡。文中还提供了带悬停（hover）扩展效果的版本，进一步展示了纯 CSS 控制重叠视觉的潜力。

1. 核心概念与实现思路
• 使用现代 CSS 变量与计算函数创建动态间距。
• 通过 container-type: inline-size 让容器对宽度变化作出响应。
• 利用 mask 实现图像重叠区域的透明过渡效果。
• 通过 min() 函数计算图片间距，使布局在不同视窗宽度下自适应变化。

2. 代码结构与关键属性解释
• 定义变量 --s（图片尺寸）与 --g（间距），使布局参数可控。
• --_m 计算自动间距，基于容器宽度和兄弟元素数量动态得出。
• mask 与 radial-gradient 相结合，用于实现圆形图片之间的重叠柔和过渡。
• reverse 类切换重叠方向，通过改变 --_r 来调整遮罩中心。

3. 响应式与交互特性
• 重叠间距随容器宽度自动变化，无需媒体查询。
• 示例中展示悬停展开的交互版本，该效果仅在图片重叠时触发。
• 动画与布局计算完全基于 CSS，无需 JavaScript。

4. 延伸阅读与相关主题
• Dynamic Tooltip Position with Anchor Positioning III：介绍基于锚点定位的动态提示气泡。
• Alignment in Anchor Positioning using position-area：互动示例，讲解如何利用 position-area 控制对齐方式。

AI 摘要：本文介绍了 CSS 新增的范围语法（range syntax）在容器样式查询（container style queries）与 if() 函数中的应用。通过 Chrome 142 起的支持，开发者可以比较数值、CSS 自定义属性（custom properties）或从 HTML 属性中取值（attr() 函数），从而在纯 CSS 内实现条件逻辑。作者展示了使用自定义属性控制背景亮度、通过 attr() 动态生成通知徽章，以及比较单位值（如 em 与 px）的实例，并分析了 container queries 与 if() 在作用域和灵活性上的差异。

1. 范围语法基础与 Chrome 142 支持
• 范围语法此前已用于媒体查询（media queries）与容器尺寸查询（container size queries），现在扩展至容器样式查询（container style queries）与 if() 函数。
• Chrome 142 起支持这一功能，可比较字面值、自定义属性或 attr() 提取的数值。

2. 使用自定义属性的容器样式查询示例
• 定义自定义属性 --lightness 控制背景亮度。
• 使用 @container style(--lightness < 50%) 及相关条件设置文字颜色。
• 说明容器查询作用方向是“向上”级联，只能查找父级容器定义的属性。
• if() 函数的条件判断也能在相同选择器块内使用。
• 对比 container queries 与 if() 的应用场景：前者适合作用域可控、命名容器（container-name），后者适合快速内联逻辑。

3. 配合 attr() 函数的范围语法
• 使用 HTML 自定义属性 data-notifs 展示动态通知数值。
• 应用 @container style(attr(data-notifs type(<number>)) <= 99) 设置徽章内容和形状。
• 当通知数值超过 99 时，通过另一查询输出“99+”，并调整内边距。
• 强调必须为 attr() 指定类型（如 <number> 或 <integer>）以支持数值比较。
• 列举范围语法支持的数据类型：<length>、<number>、<percentage>、<angle>、<time>、<frequency>、<resolution>。

4. 以字面值进行范围比较
• 演示在 h1 和 span 中比较 1em 与 32px 的场景。
• 使用 if() 根据字体大小动态调整字重（font-weight）以优化可读性。
• 说明 CSS 能跨单位比较相同数据类型值，增强设计灵活性。

5. CSS 条件逻辑的演进与延伸阅读
• 范围语法扩展至 container style queries 与 if() 函数，是 CSS 条件逻辑的重要迭代。
• 可与媒体查询、功能查询（feature queries）及容器尺寸查询组合使用。
• 推荐阅读：Media queries、Container queries、Feature queries。

CSS-Tricks

The Range Syntax Has Come to Container Style Queries and if() | CSS-Tricks

Being able to use the range syntax with container style queries — which we can do starting with Chrome 142 — means that we can compare literal numeric values as well as numeric values tokenized by custom properties or the attr() function.

AI 摘要：本文作者 Ahmad Shadeed 通过一个常见的「版块布局」案例，展示了如何应用现代 CSS 技术（包括 :has()、container query、style query、clamp()、cqw 单位与 display: contents 等）解决传统响应式设计中无法灵活检测状态、复杂媒体查询以及无流畅排版的问题。文章从基础布局入手，逐步迭代到智能响应的组件结构，并探讨了 Safari 实验性支持的 random() 随机函数，以展现 CSS 的动态潜力。

Ishadeed

Solved By Modern CSS: Section Layout

Building a typical section design with modern CSS.

AI 摘要：本文详细介绍了如何在单栏布局中，通过现代 CSS（如 Grid、Container Query Units、border-image、伪元素等）创建“满屏延展”与“宽度突破”元素。作者比较了旧式 100vw 方法与基于 Grid 的新式做法，指出前者因滚动条计算问题较为落后，并展示了一个简单、可扩展的 Grid 结构可同时实现全宽元素、局部扩展元素，以及带全宽背景的局部内容。文章还讨论了细节问题如 box-sizing、负 margin、嵌套结构、浮动兼容性以及是否必须使用 Grid 等，最终总结：最佳方案依情景而定，但现代 CSS 已能极大简化此类复杂布局。

1. 背景与问题定义
• 起因来自 Reddit 讨论：如何实现内容区中部分元素「全宽（full-bleed）」或「突破（breakout）」布局
• 对比老方法（100vw+偏移）与新方法（基于 Grid 中央列与左右对称列）
• 旧方法缺陷：100vw 不计滚动条，易引发水平滚动条
• 新方法更现代、更具弹性

2. 基础布局（The Base Grid）
• 在 body 上设定单列 Grid，最大宽度限制为 min(100%, 60em)
• justify-content: center 居中内容
• 保留 content-box 内边距空间以确保文字留白
• 所有子元素（如标题、段落、图片）自然落入此单列结构

3. 实现 Full-Bleed 元素
• 将 html 设为 container-type: inline-size ，元素用 width: 100cqw 获取可用宽度（不含滚动条）
• 使用 justify-self: center 居中
• 注意：html 上不能有 margin、padding，否则影响计算基准
• 若中间有容器层级，可通过 var(--full-w) 传递容器宽度
• 对非图片元素设置 box-sizing: border-box; padding: .5em；对图片则避免 padding
• 替代方案：用负 margin（calc(50% - 50cqw)）调整横向位置

4. 实现 Breakout 元素
• 比主栏宽，但未满屏，宽度公式为 min(100cqw, 100% + 2*4em)
• 或使用负 margin 实现，适合文本类内容
• 可通过自定义属性 --dx 调整突破值（正为扩展，负为收缩）
• 实例展示诸如 .break-elem--mini、.break-elem--maxi 等不同宽度的组合

5. Full-Bleed 背景处理
• 使用 border-image 扩展背景至全屏，如 border-image: var(--img) fill 0/ / 0 50cqw
• 支持颜色填充、渐变、图像背景等
• 针对带角度渐变或复杂背景，可通过计算 50cqw - .5*var(--grid-w) 精确控制延展范围
• 针对窄屏问题，利用 max() 考虑边距，保证背景元素真正全宽
• 实图背景的更优方案：使用伪元素 ::before 绝对定位配合 inset 实现，可支持 background-size: cover

6. 组合使用与分离视觉样式
• 可组合类 .break-elem + .full-bleed-back 实现“突破+全宽背景”效果
• 视觉样式与布局样式分离（例如 .box 仅用于颜色与边框）
• 避免边框或背景与 full-bleed 背景冲突的示例

7. 嵌套与兼容性
• figure 与 img 示例：图片全宽但说明文字保持正常列宽
• 确保 img.full-bleed-elem { display: block } 可正确工作
• 为了跨浏览器兼容 justify-self 可作用 block 元素，暂时让 figure 定义自身为 Grid

8. 浮动元素兼容性
• 若需在同一布局支持浮动（float）图片等，可增加内容包装容器
• 替代 justify-self 为 margin-left: calc(50% - 50cqw) 以保持结构适应性

9. 最后思考：Grid 是否必要
• 若布局需求简单，可用 body 的 padding/margin + limited main 替代 Grid
• 若需要间距控制、自动对齐等特性，Grid 仍具优势
• 结论：取决于上下文，现代 CSS 为设计师提供了灵活的选择空间

AI 摘要：这篇博文深入探讨如何在纯 CSS 中获取 grid 布局中 auto-fit/auto-fill 自动列的列数，从而实现如高亮首/末列、斑马纹、响应式非矩形网格等复杂交互，无需任何 JavaScript 或媒体查询（breakpoints）。作者提出了通过 container query 单位、CSS 变量和数学函数自动计算列数的方法，并针对不同浏览器支持和 bug（尤其是 Firefox）提出了解决方案，使技巧能够跨浏览器使用。

Frontend Masters

Get the number of auto-fit/auto-fill columns in CSS

Ever wanted to get the number of auto-fit/auto-fill columns in a grid? For example, because you want to highlight just the items in the first or last row or column? Do something special just for even or for odd rows or columns (e.g. zebra striping)? Or for…

AI 摘要：本文探讨了如何使用容器查询来动态调整用户界面组件的布局，根据外部空间的可用性决定将分页箭头放置在组件内还是组件外，详细介绍了利用视口单位和容器查询的实现方法。

1. 引言
• 介绍了分页箭头的两种布局方式：外部和内部，取决于外部空间的可用性。
• 提到此方法由 Adam Argyle 提出，并对此方法进行详细探讨。

2. 实现原理
• 讨论了使用视口单位和容器查询的基本原理。
• 强调了容器查询的优势，即无需预设容器的具体尺寸，布局可以根据外部空间的变化动态调整。

3. 代码示例
• 展示了 HTML 结构，包含一个包装元素和内部元素，以及箭头元素。
• 提供了 CSS 代码，定义了容器的宽度使用 min(500px, 100vw)，确保在不同视口大小下的灵活性。
• 介绍了如何使用 @container 查询来检测容器尺寸，并在满足条件时改变内部元素的样式。

4. 具体应用
• 详细解释了如何使用 calc() 函数计算外部空间是否足够放置箭头。
• 展示了使用 translate 属性移动箭头的 CSS 代码。
• 附上了展示效果的视频，证明方法的有效性。

5. 结论
• 强调了这种方法的灵活性，即容器大小可变，而布局仍能正确响应。
• 提及可以使用自定义属性来进一步提高代码的灵活性。

AI 摘要：本文是一份关于 CSS 容器查询的交互式指南，详细介绍了容器查询的语法、使用场景、常见问题及解决方案，并通过大量实例演示如何利用容器查询实现响应式组件设计，替代传统的媒体查询方法。

1. Introduction to container queries
• 容器查询解决了基于容器宽度（而非视口）调整 UI 的痛点，传统媒体查询在此场景下存在局限性。
• 示例：页面头部操作按钮的标签显示/隐藏逻辑通过容器查询优化。

2. Container query syntax
• 基本语法：通过 container-type 和 container-name 定义容器，使用 @container 规则查询。
• 支持简写：container: name / type。

3. Common pitfalls
• 容器不能依赖内容自动调整大小（需显式设置或通过 Flex/Grid 布局控制）。
• 无法直接查询容器自身的样式（需额外包装元素）。

4. Container query units
• 引入容器相对单位（如 cqw, cqh），实现容器内的流体排版和间距控制。

5. Use cases
• 卡片组件：根据容器宽度切换堆叠/水平布局。
• 仪表盘部件：动态调整 widget 样式以适应不同列宽。
• 时间线组件：窄容器显示垂直布局，宽容器显示水平布局。
• 表单输入：基于容器空间自动调整网格列数。

6. Style queries
• 实验性功能（仅 Chrome/Safari TP 支持），通过查询 CSS 变量（如 --featured: true）切换样式。
• 示例：结合 :has() 选择器控制时间线布局。

7. DevTools 支持
• Chrome 开发者工具可调试容器查询应用的元素。

8. Resources & Related articles
• 推荐了容器查询规范、兼容性检查工具及其他相关文章（如 CSS :has() 指南）。

Outro
容器查询标志着响应式设计的范式转变，未来将逐步替代媒体查询在组件级布局中的应用，但媒体查询仍适用于全局布局。

Ishadeed

An Interactive Guide to CSS Container Queries

Learn how to use CSS container queries today.

AI 摘要：本文探讨了如何通过 CSS 自定义属性和 @property 规则，实现嵌套容器中子元素使用外层容器的容器查询单位（如 cqw）而非默认的最近父容器，从而解决嵌套容器场景下的单位计算问题。

1. 问题背景
• 开发者 Matt Wilcox 指出：当存在嵌套容器时，容器查询单位（如 cqw）默认相对于最近的父容器计算，无法直接指定外层容器作为基准，导致布局设计受限。

2. 技术基础
• 容器查询（Container Queries）和容器单位（Container Units）是 CSS 的新特性，允许元素样式基于容器尺寸动态调整。
• 示例代码展示了嵌套容器（.outer-container 和 .inner-container）的结构，以及子元素 .inner-child 使用 20cqw 时默认相对于 .inner-container 计算的问题。

3. 尝试解决方案
• 失败方案 1：直接为 .inner-child 指定 outer 20cqw 语法无效。
• 失败方案 2：通过 CSS 变量传递 --s: outer 20cqw 同样不被支持。
• 部分成功方案：将变量 --s: 20cqw 定义在 .inner-container 中，但子元素继承时仍基于 .inner-container 计算。

4. 最终解决方案
• 使用 @property 注册自定义属性 --s，强制其继承并保留原始计算值（基于 .outer-container 的 20cqw），从而在子元素中正确应用。
• 代码示例：
@property --s {
syntax: '<length>';
initial-value: 0px;
inherits: true;
}

Frontend Masters

Using Container Query Units Relative to an Outer Container

Recently, Matt Wilcox posted on Mastodon: