#优质博文 #工作经验 #编程思维
谈谈工作中的犯错 | CatCoding

AI 摘要：这篇文章以作者和同事在实际工作中犯下的错误为线索，从信息泄露、退款接口、并发错误到配置事故等多个案例，讲述了程序员在日常开发与运维中容易犯的典型错误。文章强调“错误是最好的学习机会”，并提出以防御式编程 (Defensive Programming)、完善测试机制和安全意识为核心的改进思路。最后，作者呼吁保持敬畏之心，用系统化思维减少人为失误对团队和公司造成的损失。

author 程序员的喵

CatCoding

谈谈工作中的犯错 | CatCoding

All about coding and writing

#优质博文 #AI #prompt #agents

How to write a great agents.md: Lessons from over 2,500 repositories

AI 摘要：本文分析了超过 2500 个公开仓库中的 agents.md 文件，归纳出优秀自定义代理（Custom Agent）的关键写法：让每个代理具备明确角色、具体命令、严格边界与真实示例。成功的代理不是“通用助手”，而是专职专家，如 @docs-agent 负责文档、 @test-agent 负责测试。掌握六个核心领域（命令、测试、项目结构、代码风格、Git 工作流、边界）即可写出高效 agent 文件。

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

1. 背景与概念
• GitHub 推出新特性：以 agents.md 文件定义自定义代理（Custom Agent），让 Copilot 从通用助手变成具备明确角色的团队成员。
• 每个代理文件定义 persona（角色设定）、技能栈 (tech stack)、可操作命令、代码风格、及禁止行为。

2. 从 2500+ 文件分析得到的经验
• 成功的 agents 明确任务（如 documentation、testing、security），而失败的往往太模糊。
• 要点总结：
• 早放命令：在文件开头就定义可执行命令（含参数/flag）。
• 示例优于解释：展示代码风格比写长篇说明更有效。
• 明确边界：清楚列出“能做”“需确认”“禁止”的操作。
• 标注技术栈：注明版本与依赖，如 “React 18 + TypeScript + Vite + Tailwind CSS”。
• 六大领域覆盖：commands、testing、project structure、code style、git workflow、boundaries。

3. 优秀 agents.md 示例解构 (@docs-agent)
• 文件结构：YAML frontmatter 描述 → 角色与任务 → 项目知识 → 可用命令 → 写作准则 → 三层边界（Always / Ask first / Never）
• 成功原因：具体 persona、可执行命令在前、展示项目知识、有实例代码、边界分层清晰。

4. 构建你的第一个 agent
• 建议从小而具体的任务开始，如编写函数文档、添加单元测试、修复 linter 报错。
• 组成要素：名称、描述、persona 定义。
• Copilot 可辅助生成初稿，用 IDE 编辑 .github/agents/test-agent.md 并微调。

5. 实用代理类型推荐（六类）

• @docs-agent：生成文档，读 src/ 写 docs/。
• @test-agent：编写测试，永不删除失败测试。
• @lint-agent：执行格式修复，仅限风格层面修改。
• @api-agent：搭建 API 接口，修改数据结构需批准。
• @dev-deploy-agent：仅部署到开发环境，操作需批准。
• @security-agent（隐含）：执行安全分析或代码扫描。

6. 模板与最佳实践
• Starter template 提供完整结构：frontmatter、persona、project knowledge、tools、standards、boundaries。
• 强调命名规范、风格示例与边界设置的重要性。

7. 结论与启示
• 优秀 agent ≠ 冗长 prompt，而是清晰角色手册 (operating manual)。
• 核心在于：明确 persona、具体命令、真实样例、明确定义边界。
• 通过迭代完善 agent，让 Copilot 团队协作更像真实开发团队。

author Matt Nigh

The GitHub Blog

How to write a great agents.md: Lessons from over 2,500 repositories

Learn how to write effective agents.md files for GitHub Copilot with practical tips, real examples, and templates from analyzing 2,500+ repositories.

#优质博文 #CSS #前端 #动画 #新特性
More CSS random() Learning Through Experiments

AI 摘要：这篇博文由 Chris Coyier 撰写，通过一系列小实验展示了 CSS random() 函数的潜力与趣味。作者用它生成旋转星空、滚动视差(parallax)星空及基于滚动的点阵动效，探索随机数与动画、滚动时间轴 (scroll-driven animation) 以及 steps() 函数的互动效果。虽然目前仅 Safari 技术预览版支持该功能，但文章提供了可视化演示和代码片段，展示了 random() 带来的新创意空间和未来样式系统的潜能。

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

1. 引言与 random() 函数现状
• 作者介绍 CSS random() 函数的出现与规范化
• 指出目前仅 Safari Technical Preview 支持
• 强调实验性质：探索随机性在视觉设计中的可玩性

2. 旋转星空背景（Rotating Star Field）
• 灵感来自游戏 BALL x PIT 的旋转星空视觉
• 通过一系列定位在中心的 <div> 构建星体容器
• 使用 random() 控制星距、高度与旋转角度实现随机布局
• 结合 CSS 动画让内外圈星星反向旋转，形成动态层次感
• 提供 Demo 示例

3. 滚动视差星空（Parallax Stars）
• 扩展星空概念，将运动与滚动事件绑定
• 随机分组不同星星移动速度（100px、200px、300px）制造深度感
• 利用 animation-timeline: scroll(root) 与 animation-composition: accumulate 控制滚动叠加动画
• 展示了如何通过原生 CSS 控制视觉差与滚动互动
• 提供 Demo 示例

4. 网格点水平线（Horizontal Rules of Gridded Dots）
• 探索 random() 与 steps() 的结合，用离散滚动帧创造“跳动式”动画
• 创建点阵 <div> 元素随机偏移，再在滚动中平滑对齐
• 使用 view-timeline 触发每个分隔条的独立动画范围
• 通过渐变色与对齐位置制造视觉满足的“入场”效果
• 提供 Demo 示例

5. 结语与对未来 CSS 的思考
• random() 带来动态纹理与自然随机性的设计潜力
• 讨论当前需大量 <div> 的实现代价，期望未来 CSS 原生支持“可样式化网格单元”
• 总结：CSS 的随机性为网页设计开辟更多创造性方向

author Chris Coyier

Frontendmasters

More CSS random() Learning Through Experiments

There is quite a bit of interesting design possibility with `random()` coming to CSS. It pairs nicely with animation, particularly animation-composition for agumenting those generated values.

#碎碎念 #美食
昨天吃了一家湘赣木桶饭，在不起眼的一个拐角，老板娘超热情，热情到我们两个社恐 i 人有点不知所措的程度。
昨天不自量力的点了一份68的烤鱼，以为按照吃其他家烤鱼的经验来说，应该也不会很多，结果上来的时候我人傻了，配菜和料多的要溢出去了，老板娘还在为让我们等久了不停道歉送了罐王老吉，中间加了 n 次火，那是真热情。
饭也超好吃，特辣是真的辣，妲喵点了个特辣的鱼香肉丝，发现是真的爆炸辣（以前附近的店吃到的都是广东辣hhhh），江西的辣。于是决定之后的外卖都点他们家了。
然后今天中午点的土豆牛肉饭也是香迷糊了，现炒的热乎的家常菜外卖（离家就几百米）。
木桶饭，好！以前怎么没想到吃这个。

#优质博文 #CSS #前端 #设计 #新特性
CSS squircle corner-shape preview tool

一个可交互的小工具，实时体验 CSS 新属性 corner-shape 带来的新圆角效果。可以通过直观调整圆角参数，形成从方形到 squircle 再到圆形的连续过渡，该特性目前仍处于实验阶段，仅在最新版本的 Chrome 中支持（2025 年 11 月）

www.squircle.style

CSS squircle corner-shape preview tool

Preview CSS squircle corner-shape in real time.

#优质博文 #git #开源 #性能优化 #rust #版本管理 #新动态
锈化！都给我锈化！
Highlights from Git 2.52

AI 摘要：Git 2.52 是一次重要更新，带来了全新的 git last-modified 命令，大幅提升了目录级变更追踪性能。改进了 git maintenance 的几何级（geometric）打包策略，使大型仓库的维护更高效。除此之外，还新增了 git repo 命令用于仓库信息查询，引入 Rust 代码优化内部实现，并为 Git 3.0 的默认分支名更改（从 master 到 main）和 SHA-256 过渡打下基础。

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

1. Tree-level 责任追踪
• 新增 git last-modified 命令，用于快速查询目录中每个文件最后一次被修改的提交。
• 相比传统 git log + 脚本方式速度提升约 5 倍以上。
• 功能源自 GitHub 内部工具 blame-tree，现上游化至 Git 主干。
• 支持未来改进，比如结果缓存的磁盘格式。

2. 高级仓库维护策略
• git maintenance 命令新增 geometric 任务，实现高效打包与逐步清理策略。
• 该模式基于几何打包（geometric repack），在性能和空间之间取得平衡。
• 相关技术源自 GitHub 自用工具，从 Git 2.33 起逐步完善。

3. 其他核心更新与实验功能
• 新增 git refs list 与 git refs exists 子命令，统一引用（reference）操作接口。
• 全新实验命令 git repo，整合查询仓库结构、对象与格式信息的能力。
• 性能显著提升：git describe、git log -L、git ls-files 等命令获优化。
• Bloom filter 算法改进，支持更复杂的路径匹配（pathspec）。

4. 迈向 Git 3.0 的过渡性变更
• 默认分支配置 init.defaultBranch 将在 3.0 版改为 “main”。
• 引入 SHA-256 作为对象哈希算法的未来默认值，兼容 SHA-1 环境。
• 开放 WITH_BREAKING_CHANGES 构建标志，提前体验 3.0 功能。

5. Rust 支持与内部重构
• 可选启用 WITH_RUST 编译选项，部分内部功能迁移至 Rust 实现。
• 当前用于变量宽度整数 (variable-width integers) 编码/解码。
• 为未来更多核心模块迁移铺路，Git 3.0 将全面要求 Rust。

6. 细节改进与工具增强
• sparse-checkout 新增 clean 子命令，便于清理异常文件状态。
• 多处底层库（特别是 xdiff）获得性能优化补丁。
• 跨工具一致性与脚本可编程性进一步提升。

author Taylor Blau

The GitHub Blog

Highlights from Git 2.52

The open source Git project just released Git 2.52. Here is GitHub’s look at some of the most interesting features and changes introduced since last time.

Cloudflare 状态页面终于更新

目前已知全球多个地区间歇性爆炸，Cloudflare作为全球基础网络设施，影响多个网站。

CF目前正在按秒赔付企业

频道将在本条持续更新

北京时间 2025年11月18日：
20:13 部分已恢复
20:23 再次爆炸
20:51 部分已恢复
20:55 再次爆炸
20:57 部分已恢复
20:59 再次爆炸
21:04 CF状态页面更新：在伦敦禁用了 WARP 访问
21:09 CF状态页面更新：我们已经确认了该问题，正在实施修复
21:13 CF状态页面更新：Cloudflare Access 和 WARP 已经恢复
21:30 持续了两个小时绝大部分依然没有恢复
21:35 CF状态页面更新： 为使用应用服务（Application Services）的客户恢复服务
21:58 CF状态页面更新： 为使用应用服务（Application Services）的客户恢复服务
22:03 X 网页版恢复

Cloudflare Status

🍀在花频道 🍵茶馆 📮投稿新鲜事

r/Cloudflare

#优质博文 #前端 #性能优化 #监控工具 #工程化
Effectively Monitoring Web Performance — Smashing Magazine

AI 摘要：本文系统阐述了如何制定一套有效的网站性能监测策略，从 Google 的核心指标 Core Web Vitals（包括 LCP、CLS、INP）出发，结合合成测试（Synthetic test）与真实用户监测（Real User Monitoring, RUM），构建可持续的性能优化循环。作者提出“识别 → 诊断 → 监控”三步法，强调在持续对比与回溯的过程中找出性能瓶颈，利用工具如 DebugBear 完成检测与验证，实现网站在用户端和技术端的双重优化。

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

1. 网站性能指标基础
• 无单一定义性能标准，推荐从 Google Core Web Vitals 入手，包括 LCP（Largest Contentful Paint）、CLS（Cumulative Layout Shift）、INP（Interaction to Next Paint）。
• 除核心指标外，还需分析技术层面指标（如服务器响应时间、页面体积），并可利用 User Timing API 自定义关键加载节点。

2. 合成数据与真实用户数据（Synthetic vs Real User Data）
• 合成测试环境可控，便于重现和分析性能问题。
• 真实用户监测基于实际访问数据，可洞见不同用户群体的真实体验。
• 建议双管齐下：Synthetic 提供细节层面的技术分析，RUM 补全真实使用场景的覆盖。

3. 三步法优化流程
• Identify（识别）：通过用户数据发现加载缓慢页面，优先处理高访问量且体验差的页面。
• Diagnose（诊断）：分析瓶颈点，按指标类型分别使用 RUM 或 Synthetic 工具定位问题来源，如 LCP 图像加载、INP 交互事件延迟。
• Monitor（监控）：建立持续检测机制，监测变更效果并在性能回退（Regression）时即时响应。

4. 深入分析阶段
• 负载时间调试：Synthetic 数据帮助精确定位加载瓶颈，可做实验验证优化方案。
• 交互延迟诊断：RUM 数据揭示实际用户交互的慢响应来源，例如脚本阻塞或后台任务负载。

5. 性能回退检测与应对策略
• 合成数据回退：通过前后 Test 对比结果，定位资源变更带来的性能波动，例如新增图片竞争带宽。
• 真实用户回退：需区分访客来源变化（如广告流量）与技术改动，通过分析 LCP/INP 子部分（subparts）锁定性能劣化来源。

6. 综合结论
• 单次测试仅是起点，持续的性能监控体系才能确保长期高效。
• 工具如 DebugBear 可整合 Synthetic 与 RUM 数据，实现可视化性能追踪与优化决策。

author Matt Zeunert

Smashing Magazine

Effectively Monitoring Web Performance — Smashing Magazine

There are lots of tips for [improving your website performance](https://www.debugbear.com/blog/improve-website-performance?utm_campaign=sm-10). But even if you follow all of the advice, are you able to maintain an optimized site? And are you targeting the…

#优质博文 #typescript #前端 #course #趣站
这太酷了！
Visual Types

AI 摘要：这篇交互式教学页面《Visual Types》以图形化的方式介绍了 TypeScript 的类型系统原理，将抽象的类型关系转为集合论直观类比。作者通过对基础类型、联合类型、交叉类型、泛型(Type Alias/Generic)、条件类型(Conditional Types)等模块的分解说明，让开发者从“类型是值的集合”这一基本理念出发，逐步理解 TypeScript 在编译期的推导与约束机制。整个内容通俗但专业，适合掌握 TS 类型系统结构性理解的人阅读学习。

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

1. 类型基础 (Foundation)
• 类型被定义为一组可能的运行时值集合，例如 boolean 表示 {true, false}
• 字面量类型 (Literal Type) 代表唯一具体值，如 42 只包含 42
• 联合类型 (Union Type) 使用 | 结合多个集合，如 "red"|"blue"
• 子类型 (Subtype) 是集合的子集关系，A extends B 表示 A 的值皆存在于 B 中
• 元组类型 (Tuple Type) 表示固定长度数组，每个位置具特定类型
• 对象类型 (Object Type) 以属性定义集合，可超集匹配，如 {id: number}
• 交叉类型 (Intersection Type) 用 & 表示需同时满足两侧类型，若互斥则结果为 never

2. 类型别名与推导 (Basics II)
• 类型别名 (Type Alias) 允许为类型定义命名，如 UserId = string
• 泛型类型别名 (Generic Type Alias) 像函数一般接收类型参数生成类型
• typeof 操作符可在编译期提取变量的类型，而非 JS 的运行时类型
• as const 防止类型被自动扩大，使值保持字面量类型并只读
• any 和 unknown 都能接收任意值，但 unknown 必须先缩小类型后使用

3. 对象与键操作 (Object Patterns)
• keyof 提取对象全部属性键，生成字符串字面量联合类型
• 索引访问类型 (Indexed Access Type) 可用 T["key"] 获取属性类型
• 映射类型 (Mapped Types) 用 [K in ...] 遍历键创建新类型，是构建工具类型的基础

4. 条件类型与分发机制 (Conditional Types)
• 条件类型使用 T extends U ? X : Y 表示类型层面的三元判断
• 所有类型都自反 (Reflexivity)，即 T extends T 恒为 true
• 联合类型的条件判断是“分发的”(Distributive)，会逐个成员计算后再合并
• 使用元组包裹 [T] extends [U] 可阻止分发行为
• never 用于排除不匹配分支
• infer 关键字可在条件匹配中捕获部分类型形状实现复用

5. 工具类型 (Utility Types)
• Pick<T, K> 提取对象的部分属性组成新类型
• ReturnType<T> 获取函数返回值类型
• Parameters<T> 获取函数参数类型元组
• 展示了如何用之前的条件、映射机制构建常用工具类型

Visual Types

Interactive visualizations of TypeScript concepts. Behold pretty colors.

#优质博文 #前端 #设计 #AI
借助 Skills 提升前端设计 | Claude：教你如何用 Claude 的 Skills 机制，让 AI 告别“千篇一律”的前端审美，生成更有品味的网页设计。
原文

baoyu.io

借助 Skills 提升前端设计 | Claude

你可能注意到了，如果你让一个大语言模型 (LLM) 随便搭个网页（**行话叫“落地页”**），它十有八九会给你一套“标配”：Inter 字体、白底配紫色渐变，外加一点点可有可无的动画。

#前端 #JavaScript #优质博文 #趣站 #考古
好名字
JavaScript Engines Zoo：汇总 100 多个 JS 引擎的数据、性能与发展史，附带 Dockerfiles 可直接实验。

#优质博文 #CSS #前端 #性能优化 #Chrome #浏览器
从性能角度来看，对 CSS width 和 height 进行动画处理是不好的，因为它会导致渲染管线中发生布局操作（也称重排）。这一点至今仍然正确。

但最近， Chrome Canary 版本中最近有一个令人兴奋的动画/性能改进：

在 Chrome 144.0.7512.0（当前 Canary 版本）中，我们扩展了 width / height 检查，以检查 width 或 height 是否真的发生了变化。
如果 width / height 不变，则无需计算布局，因此也无需强制动画在主线程上运行。

Animating CSS width or height no longer forces a Main Thread animation (in Chrome, under the right conditions)

AI 摘要：文章介绍了 Chrome Canary（144.0.7512.0 版本）在动画性能上的新改进：当 width 或 height 在关键帧中并未实际变化时，动画不再被强制在主线程运行，而是可在合成线程（Compositor）上执行，从而显著提升性能。该优化改变了 Blink 对动画可合成判断的逻辑，对视图过渡（View Transitions）等场景尤其有利。作者也讨论了后续可控方案、兼容性影响与手动优化替代方法。

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

1. 性能与动画基础
• 解释为何过往 width / height 动画会触发 Layout，必须在主线程执行
• 说明渲染管线（rendering pipeline）中 Layout 的代价
• 传统认为应避免对这些属性做动画

2. Chrome 新改进（从版本 144.0.7512.0 开始）
• Blink 引擎增加了判断逻辑：若关键帧中 width / height 值不变，则动画可在合成线程上运行
• 展示了新旧判断流程图差异及其性能收益
• 对视图过渡动画（::view-transition-group(*)）的直接正面影响

3. 实现细节与特殊情境
• 介绍设计判断逻辑时考虑的复杂情境，如隐式关键帧、auto 值等
• 提及其他浏览器（Firefox、Safari）尚未有类似优化
• Blink 团队确保多种 CSS 表达形式都在判断范围内

4. 后续展望与开发者优化建议
• 链接至 W3C 讨论提案 w3c/csswg-drafts#13064，计划为开发者提供更多控制
• 提出当前自我优化方案：用 scale 动画取代宽高变化
• 引用了 Google Search 实际应用与 Motion 框架在变形修正上的做法

5. 影响与意义
• 此更改让许多原本“卡顿”的过渡动画直接获得加速
• 鼓励社区和其他浏览器跟进，共同提升 Web 动画性能

author Bramus!

web.dev

Rendering performance  |  Articles  |  web.dev

Users notice if sites and apps don't run well, so optimizing rendering performance is crucial!

#优质视频 #碎碎念
这期讲的真好。
影视飓风的舆情，说明互联网已经烂完了

从不许说错话
到必须说对话
再到全民游乐场
这就是我们所选择的赛博环境

@老蒋巨靠谱:

发布视频-数码-社会观察
播放量:107.40万 弹幕:1.61万 评论:9034
点赞:6.50万 投币:3.74万 收藏:2.24万 转发:7630
发布日期:2025-11-15 08:05:47
🔝> @老蒋巨靠谱:
补充点视频里没说的角度：

对于ip来说，面对比较大量级的负面舆情，现在其实已经不存在所谓肯定正确的公关方式了，因为怎么处理本来就不理性甚至自己和自己打架的大众情绪都是错的，情绪本身就是一个乱流。

以及，任何应对，都会被二次解读，有成为新梗和新取笑素材的可能性。

传统公关的范式在后现代传播语境中失效了，公众人物王道的应对，可能是根本不理，然后产出高价值内容。

asen在微博攻防已经失势到那个程度，但没关系，发歌就能挽回一个回合；何同学去年被负面舆情不断，也没关系，绷住了继续发视频，靠外网的内容声誉，反哺简中翻盘。

也许这种机制会让某些人有种“实力可以碾压一切叽叽歪歪”的内心爽感，但其实这也是互联网完全转向丛林的一种体现。现在这个阶段，已经没法靠“讲道理”，靠把事儿说清楚，去赢得支持和维护形象了，这个大游乐场又进化了。

以及，至少在简中，对ip来说，影响力大过一个量级后，其实就是副资产，最好的策略，是做一个黏性大但影响力低的腰部ip，然后带货、卖课、搞私域，这是这个版本聪明人的必然选择。

Bilibili

影视飓风的舆情，说明互联网已经烂完了_哔哩哔哩_bilibili

从不许说错话到必须说对话再到全民游乐场这就是我们所选择的赛博环境, 视频播放量 1076543、弹幕量 16149、点赞数 65122、投硬币枚数 37536、收藏人数 22406、转发人数 7645, 视频作者 老蒋巨靠谱, 作者简介 一直踏入河流，相关视频：关于影视飓风近期舆情，影视飓风Tim离婚，现实版花束的恋爱，大型纪录片《李四维大战户晨风》，曝！影视飓风也中招！抖音博主抄袭b站up主获利百万！，天啊头回见了！金鸡奖颁奖当天，祖峰被组委会除名，采访全平台删除...疑似电影偷偷报名了某马，与电诈有…

#优质博文 #前端 #CSS #兼容性
Perfecting Baseline

AI 摘要：本文介绍了 Web 平台“Baseline”概念的起源、用途及其演化方向。作者回顾了它在社区中的普及、帮助开发者快速判断功能可用性的价值，同时指出其局限性：无法体现可访问性 (Accessibility)、渐进增强 (Progressive Enhancement) 或旧浏览器支持等因素。文章详述了 WebDX 社区如何通过改进数据源、特性映射 (Feature Mapping) 和浏览器范围定义，不断完善 Baseline 的精度。最后提出开发者应将 Baseline 视为决策起点，而非唯一标准，并鼓励参与社区共建。

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

1. Baseline 的现状与作用
• Baseline 在 MDN、Can I Use 等平台广泛出现，成为业界常见术语。
• 它提供一种快捷方式，用于判断 Web 特性是否“跨浏览器普遍可用”。
• 对多数开发者而言，它代表“足够稳定可用”的一种信号。

2. 概念缺陷与局限性
• 当前 Baseline 未考虑所有浏览器和旧版本。
• 不涵盖可访问性挑战或渐进增强策略。
• 无法明确告诉何时可安全使用非 Baseline 特性或移除 polyfill。
• WebDX 团队在定义时平衡了简明性与准确度，采用“红绿灯式”状态机制：
• Not Baseline
• Newly Available
• Widely Available

3. Baseline 带来的积极成果
• 成功建立共同语言，使“特性普及度”变得易于描述。
• 推动 Web 平台首个系统化的web features 目录诞生。
• 形成互联的数据生态，链接文档、统计、规范、Interop 测试等资源。

4. 完善 Baseline 的努力方向
• 可访问性数据：与 Accessibility Compat Data 项目 协作，将可访问性纳入 Baseline 评估。
• 渐进增强与 polyfill：通过 web-features-mappings 建立特性与 polyfill、最佳实践的对应关系，辅助早期安全使用新特性。
• 扩展浏览器覆盖：
• 使用 baseline-browser-mapping 和 browserslist-config-baseline。
• 年度审查机制动态调整支持范围。
• 借助 Google Analytics Baseline Checker 分析项目用户群浏览器分布。

5. 实践建议与开发者指引
• Widely Available 特性：可直接采用，仍建议复查 MDN 兼容性与可访问性信息。
• Newly Available 特性：开始观察与试用，结合回退方案与 polyfill。
• Not Baseline 特性：值得关注新能力，不应因未进入 Baseline 而完全排除，可借 Web features explorer 跟踪进展。
• 鼓励加入 WebDX 社区，共同完善工具与数据。

author Patrick Brosset

Piccalilli

Perfecting Baseline

After two years, it’s clear that awareness about Baseline is grown a lot. As one of the co-chair of the group that makes Baseline, Patrick wanted to take a pause and reflect on how Baseline is starting to show up in developer’s lives, but also how it can…

#优质博文 #前端 #CSS #容器查询
Responsive List of Stacked/Overlapping Images

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

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

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 控制对齐方式。

#优质博文 #CSS #前端 #容器查询 #新特性
The Range Syntax Has Come to Container Style Queries and if

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

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

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。

author Chris Coyier

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.

#demo #动画 #CSS #SVG #codepen
Hopping Marbles：循环的纯 CSS + SVG 的跳跃弹珠动画，很有创意！

“一段以弹珠为主角的伪 3D 循环动画，设计成类似预加载器的效果。此外，孔洞底部还使用了特殊的 SVG clip paths 以及一些秘密交替的路径。”——Jon Kantner