#优质博文 #CSS #容器查询 #前端 #响应式 #设计
关于容器查询的好文。
Container queries in 2026: Powerful, but not a silver bullet

AI 摘要：本文系统梳理了 CSS 中 Container Queries 的三种类别（包括 Container Size Queries、Style Queries、Scroll-state Queries），重点介绍了已在主流浏览器实现的“尺寸查询”特性如何革新组件级响应式设计，但也提醒开发者——这并非替代 Media Queries 的“银弹”。文章从语法、性能约束、浏览器支持到设计协作与可访问性进行了深入分析，最后指出未来 2026 年 Style Queries 或将迎来实用化拐点。

[以下是方便搜索索引的大纲（AI 生成），请读原文]

1. 背景与概念：Container Queries 是什么
• 源自对 Media Queries 局限的反思，核心思想是“基于容器上下文，而非视口”进行样式判断。
• 三种类型：
• Container Size Queries：按父容器尺寸调整样式（目前最成熟）。
• Container Style Queries：根据容器的样式属性触发响应（仍在实验阶段）。
• Container Scroll-state Queries：随滚动状态变化触发样式。
• 支持组件级响应，使组件可在任意布局中自适应。

2. 工作机制与核心语法
• 使用 container-type 属性显式声明容器上下文（如 inline-size）。
• @container 规则用于监听容器尺寸条件。
• 支持逻辑方向单位（inline/block），替代传统 width、height。
• 新增容器单位 (container query units)：如 cqw, cqh, cqi, cqb，与 viewport 单位类似但基于容器。
• 通过 container-name 可命名容器，以便管理嵌套查询。

3. 性能与限制（containment API 的作用）
• Container Queries 得以实现的关键是 Containment API。
• 为避免性能开销，每个容器需“选择加入”（opt-in），阻止布局循环。
• 限制与陷阱：
• 无法查询自身，只能作用于子级。
• 某些布局（如 Flexbox）可能需额外约束尺寸。
• 不支持在查询条件中使用自定义变量（custom properties）。
• 过度嵌套可能导致标记膨胀。

4. 三种 Query 类型的详细分析
• Size Queries：主流实现，支持全面，能显著提升组件自治性。
• Style Queries：基于容器样式或 CSS 自定义属性触发；浏览器支持尚不完善，未来版本（尤其 Firefox）有望实装。
• Scroll-state Queries：根据 stuck、snapped、scrollable 等状态调整布局；适合渐进增强。

5. 与 Media Queries 的关系
• 非替代关系，而是互补：
• Media Queries 仍主导宏观布局与可访问性偏好（如 print、暗色模式）。
• Container Queries 主攻微观层级的组件自适应。
• 建议联合使用，例如嵌套 @media 与 @container 以实现双层响应策略。

6. 可访问性与可维护性
• 需确保布局变化不破坏键盘导航与阅读顺序。
• 避免大幅度 layout shift，必要时使用 aria-live。
• 适度使用 Container Queries，防止性能问题；合理划分 @container 层级。

7. 浏览器支持现状与未来展望（至 2026）
• 2023 起 主流浏览器已全面支持 Size Queries。
• 2025 末 Chrome、Edge、Opera 支持 Scroll-state；Firefox 预计 2026 跟进 Style Queries。
• CSS 社区使用率增长缓慢（2025 调查：仅 7% 使用 Style Queries）。
• 预期 2026 年将成为“容器查询元年”，尤其设计工具（如 Figma）与开发端联动增强后。

8. 实践与工具链建议
• 设计师应从视口（viewport-centric）转向容器思维（container-centric）。
• 前端可在 DevTools 中可视化调试容器边界与查询状态。
• 借助 @supports 可实现渐进增强。
• 结合组件化体系（React、Vue 等）可真正实现“自包含组件”(self-contained components)。

9. 结论：强大但非万能
• 容器查询填补了响应式开发的关键空白，使组件具备上下文感知能力。
• 然而仍需注意性能、兼容性和可访问性。
• 它们不会消灭媒体查询，但将共同构建未来的“模块化响应式设计”范式。

author Sebastian Weber

LogRocket Blog

Container queries in 2026: Powerful, but not a silver bullet - LogRocket Blog

Container queries enable truly responsive components. Learn how they work, where they shine, and why they complement rather than replace media queries.

#优质博文 #CSS #前端 #响应式 #容器查询 #布局 #course
Solved By Modern CSS: Section Layout

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

author Ahmad Shadeed

Ishadeed

Solved By Modern CSS: Section Layout

Building a typical section design with modern CSS.

#优质博文 #新动态 #前端 #css
🚀 Frontend Focus #690 — April 30, 2025

AI 摘要：本期 Frontend Focus 涵盖前端领域多个热点话题，包括 Google Chrome 可能被拆分的影响争议、新型开发工具 Tonkotsu IDE 的发布、CSS 排版单位优化、3D 特效实现，以及 Firefox 新功能等。同时提供了丰富的教程、工具资源和行业动态，涉及 HTML 局限性、错误信息设计、Canvas 元素优化等实用内容。

1. 社区动态
• Google Chrome 拆分争议：DHH（Rails 创始人）反对强制拆分 Chrome，认为虽然 Google 需为广告市场垄断负责，但拆分 Chrome 可能损害生态
• Firefox 更新：新增标签分组功能，并在 Firefox 139 夜间版支持 View Transition API。
• Brave 浏览器：社区推动拦截 Cookie 横幅功能

2. 技术文章与教程
• 📑 万维网背后的软件在 1993 年的这一天  被放到公共领域，尽管 Web 的概念是在 1989 年发明的
• 3D 翻牌效果：Jhey Tompkins 详解如何用代码模拟机场时刻表的机械翻牌动画（3D split flap），附演示链接。
• 使用 CSS 行高单位完善排版：Jen Simmons 介绍 lh 和 rlh 单位，实现布局尺寸与文本行高的直接关联。
• HTML 局限性：Chris Coyier 探讨为何原生 HTML 不支持模块化引入（includes）
• 如何编写真正帮助用户而不是让他们感到沮丧的错误消息：Amy Hupe 提出关于创建错误消息的实用建议，帮助用户快速恢复并继续浏览您的产品/服务。
• The canvas Element：Heydon Pickering 分析其可访问性与性能取舍。
• CSS 锚点定位：Geoff Graham 解释如何简化元素重叠布局。
• AI 编码的隐性成本: 无论您是全神贯注于 vibe coding，还是觉得 AI 开发有些可疑，本文都会思考这门手艺的乐趣，值得深思。 #AI

3. 工具与资源
• 响应式字体生成器：支持 CSS/Sass 输出，使用 clamp() 函数适配不同屏幕 #响应式 #移动端适配
• Storybook 9 Beta：新增可视化测试、无障碍测试等组件开发功能
• track-list：Miriam Suzanne 推出封装播放列表控制的 Web Component
• 设计令牌名称生成器：当您需要快速入门时，此工具将为您的设计系统创建现成的命名约定

The Mozilla Blog

Related Articles

What happens when 4,500 people ask for the same feature? At Firefox, we build it. Tab groups have long been the most requested idea on Mozilla Connect –

#优质博文 #响应式 #前端 #移动端适配 #css
Control the Viewport Resize Behavior on mobile with interactive-widget

AI 摘要：文章介绍了通过 interactive-widget 关键字在 <meta> 标签中控制移动设备上虚拟键盘弹出时的视口调整行为。默认情况下，虚拟键盘会调整视觉视口（Visual Viewport），但不会影响布局视口（Layout Viewport）。通过设置 interactive-widget=resizes-content ，可以让布局视口也随之调整，从而使视口单位动态变化。该功能已在 Chrome 108+ 和 Firefox 132+ 支持，但 Safari 尚未实现。

via HTMHell

Control the Viewport Resize Behavior on mobile with `interactive-widget` - HTMHell

A collection of bad practices in HTML, copied from real websites.

#碎碎念 #坑 #前端 #移动端适配 #响应式
又是因为没有 iphone 踩坑的每一天，安卓移动端 chrome，我的设备上滚动的时候没意识到 ios 的 safari 滚动的时候可视区域是会变化的（讲真这个逻辑我看着挺别扭的，在一些滚动驱动的网站里），用 ipad 侧拉出来模拟了一下然后发现 md，心情美丽///
之前就因为类似的问题把 vh 换成 dvh，又因为 dvh 出了问题换成了lvh 🤔
有什么更好更优雅的办法吗（对于 gsap 滚动驱动的网站）

ps: 好像也不能说是因为 ios 踩坑，有这种行为的浏览器还挺有挺多的，下拉变化可视区域隐藏工具栏，比如小米的系统自带浏览器、firefox，我常用的 chrome 和 kiwi 没有
pps: 找了安卓和 ios 好几个浏览器对比，感觉还是 safari 的影响范围最大。

https://stackoverflow.com/questions/68094609/ios-15-safari-floating-address-bar

掉落邀请码：H8mjgx1Rkw
之后我要减少发邀请码的频率去 follow 打赏一些创造者了喵~要是实在想要的在频道评论区问我吧~

#优质博文 #前端 #WebComponent #组件 #响应式 #javascript #css
Hyper-responsive web components

AI 摘要：这篇文章介绍了如何构建“超响应”的Web组件，旨在适应不同网站和视口。作者首先探索了三种方法，最后选择了基于Web组件和Shadow DOM的方式，以实现样式的完全封装。通过使用CSS自定义属性和`clamp()`函数，组件可以在不同屏幕尺寸下自适应文本和间距。此外，使用CSS容器查询解决了流体排版在小容器中失控的问题。最终，文章展示了如何通过灵活的布局和渐进增强技术，实现高效、便携的Web组件设计。

容器查询带来了一个新的长度单位：CQI 。这个单位是以最近的命名容器（container-type：inline-size）的比例来计算的， 1vi === 视口的 1%， 1cqi === 容器的 1%。

via Trys Mudford

Trysmudford

Hyper-responsive web components | Trys Mudford

Intrinsic design, container queries and cqi typography

#资源推荐 #css #响应式
CSS 响应式根字号生成工具
可以根据字号最小/大值，视窗最小/大宽度，生成一个自适应的根字号，可以根据屏幕大小自动改变。

via 公众号 前端侦探

Chris Burnell

clamp() Calculator

Handy little tool for calculating viewport/container-based clamped values for use in CSS