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

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.

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

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

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 动画性能

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

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

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

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

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

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

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

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

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

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 社区，共同完善工具与数据。

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…

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.

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

AI 摘要：本文展示了如何通过极端的代码压缩（Code Golfing）和数学技巧，用 448 个字符的 GLSL 片段着色器绘制出包含山体、云雾、光照与动态相机的 3D 场景。作者详细讲解了每一步的构建过程：噪声函数的构造、空间旋转矩阵压缩、相机设置、光线步进（ray-marching）技术、体积光照（volumetric lighting）及色彩调制等，最后以创作性的数学与艺术融合收尾，展示了“极简代码亦能造美”的魔法。

1. 环境与灵感
• 项目灵感：用 448 字符实现完整 GLSL 视觉作品。
• 无网格、无贴图，仅用数学公式生成画面。
• 社区协作帮助进一步缩短代码。

2. 基础模板与开发环境
• 介绍 GLSL 片段着色器执行流程（per fragment）。
• 输入变量：分辨率 R、时间 T、像素位置 P。
• 使用自建工具 ShaderWorkshop 代替 Shadertoy，实现本地实时测试。

3. 噪声 (Noise)
• 从梯度噪声到基于正弦波（sin wave）的“假噪声”。
• 展示如何组合正弦波、取绝对值形成山峰与云层的纹理。
• 使用 fbm（Fractal Brownian Motion）叠加多频率噪声。
• 通过旋转与相移实现伪随机性。

4. 空间旋转 (Rotation)
• 推导二维旋转矩阵 mat2(cos θ, -sin θ, sin θ, cos θ)。
• 优化表示法——用 vec4 版余弦近似减少字符。
• 探讨不同矩阵近似方案与三角函数替代。
• 引入快速硬编码旋转矩阵（如 mat2(8,6,-6,8)*.1）。

5. 相机与坐标系统 (Camera & Axis)
• 将 2D 像素空间转换为 3D 射线坐标。
• 简化 lookAt 矩阵计算，通过归一化实现方向向量。
• 最终极简相机代码：vec3 rd = normalize(vec3(P+P - R, R.y));。

6. 山脉高度图 (Height Map)
• 使用累积噪声作为山体高度。
• 将循环条件反向（a+=a），节省字符。
• 内联常量、减少变量与花括号。
• 提供无栈化的简洁函数版本。

7. 光线步进 (Ray-Marching for Solids)
• 根据“距离场”（Distance Field）计算表面交点。
• 步长控制为 20% 安全缩进，避免穿透几何。
• 输出基于深度衰减与亮度法线的初步灰度效果。

8. 云与雾 (Volumetric Effects)
• 拓展噪声至 3D，模拟云层与体积雾。
• 引入 Beer-Lambert 光吸收模型。
• 使用固定步长和动态步长结合模拟体积光。
• 改写密度函数，使云雾兼容在一个表达式中。

9. 合并体积与固体光线步进
• 将 solid 与 volumetric 模型结合为统一循环。
• 条件控制判定 solid 命中及光散射抑制。
• 调整吸收与发光系数，实现光滑过渡与层次感。
• 通过 tanh() 实现快速色调映射（tone mapping）。

10. 色彩与气氛 (Color & Atmosphere
• 将红色分量独立增强，模拟落日光辉。
• 添加地平线散射光层（haze effect）。
• 通过 p.y 高度衰减生成神秘气氛。
• 小幅参数扰动制造动态呼吸式景深。

11. 代码极简与 Golfing 优化
• 减少变量名与类型声明，合并循环表达式。
• inlined 子函数、数学等价式替换、去注释。
• 最终仅 448 个字符实现所有视觉要素。
• 展示终极版本的可读及压缩形式。

12. 总结与艺术性思考
• 将算法、噪声、几何与物理模型浓缩为艺术。
• 代码之美在于极简纯粹，数学与光的共鸣。
• 作者反思现代开发生态与“纯代码艺术”的价值。
• 鼓励读者通过探索 GLSL 寻求创造与自由。

AI 摘要：本文介绍了在 JavaScript (ES2022) 中引入的 Error.cause 属性，展示它如何让错误处理更具可追溯性。作者 Matt Smith 通过实例说明了传统错误包裹的缺陷，以及 Error.cause 在保持原始堆栈信息、改进调试体验和测试断言方面的优势。最终总结出一套现代错误链最佳实践，帮助开发者构建更清晰、更稳健的错误追踪体系。

1. 传统错误处理的问题
• 层层调用的代码容易丢失原始错误信息；
• 以字符串拼接错误信息会破坏堆栈和错误类型；
• 导致调试困难，追踪难度高。

2. 引入 Error.cause 的改进
• 通过 new Error(message, { cause }) 保留原始错误；
• 可同时访问顶层与底层堆栈信息；
• cause 属性为非枚举属性，不污染日志或循环输出；
• 与 message、stack 一样保持一致的行为。

3. 实践与代码演示
• 示例：从 JSON.parse 到自定义函数的错误传递；
• 在日志中手动输出 err.cause 获取完整上下文；
• 适合层次式系统（如服务嵌套调用）排查问题。

4. 历史背景与 cause 出现前的替代方案
• 旧方案包括自定义字段 .originalError、字符串拼接等；
• 这些方式不统一且容易破坏原始错误结构；
• 标准化的 cause 提供更安全一致的机制。

5. 自定义错误类的支持
• 在自定义类中通过 super(message, { cause }) 传递原因；
• 适用 ES2022+ 环境即可直接使用；
• 对 TypeScript 用户，需在 tsconfig.json 中启用 "target": "es2022" 与 "lib": ["es2022"]。

6. 在测试中的应用
• 测试断言可直接验证 err.cause 类型；
• 提升测试可读性与准确性。

7. 实用技巧与注意事项
• 浏览器默认不输出层级错误链，须手动打印；
• 不建议过度使用错误链，避免干扰阅读；
• 可递归打印完整错误链（logErrorChain 与 logFullErrorChain 示例）；
• 实践场景：数据库异常→业务异常→服务异常的多层错误追踪。

8. 环境支持与现代用法总结
• 支持于现代浏览器与运行环境（Chrome 93+、Node.js 16.9+、Deno、Bun 等）；
• 推荐实践：
• ✅ 使用 Error(message, { cause })
• ✅ 支持内建与自定义错误类型
• ✅ 改善日志和调试体验
• ✅ 对 TypeScript 进行正确配置
• ⚠️ 记得手动输出或递归追踪错误链。

AI 摘要：“Messenger” 是一款以小行星递送员为主题的互动网页，于 2025 年 11 月 10 日获得 Awwwards 的 Site of the Day (SOTD)。作品通过精巧的角色系统与动态 NPC 设置，打造沉浸式探索体验。色彩仅用两种主色，极简又具叙事性；技术实现上兼顾动画流畅度、响应式设计和可访问性。整体评分 7.92/10，在美术、交互与动画实现方面表现突出，是网页叙事和视觉创作的优秀范例。

1. 网站概览
• 获得 Awwwards「Site of the Day (SOTD)」称号，评分 7.92/10。
• 评价构成比例：Design 40%、Usability 30%、Creativity 20%、Content 10%。
• 主题为“小行星上的送信任务”，强调小而完整的世界观。

2. 元素与视觉设计
• 核心互动模块包括 Character Navigation、Character Configuration、NPCs。
• 配色仅使用 2 种主色，突出极简与未来感。
• 动画与过渡效果平滑，提升沉浸感与叙事节奏。

3. 交互与体验（UX / UI）
• 页面通过可操作角色带来探索感，NPC 触发微交互反馈。
• 移动端适配良好，响应式体验优异。
• 「Mobile Messenger」部分显示延展性强的界面布局。

4. 技术表现与评审评分
• DEV AWARD 技术得分 8.21/10，动画 (Animations / Transitions) 子项高达 9.0。
• 响应式 (Responsive Design) 与性能优化 (WPO) 均在高分区间。
• 评审团平均分约 8 分，艺术指导与前端开发评分尤为突出。

5. 团队与评审
• 主要创作者包括 Clement Pavageau，独立艺术总监；
Artem Markovsky，艺术指导等。
• 用户社区评分最高，综合 9.56/10，显示大众认可度极高。

AI 摘要：本文以作者二十多年自学前端开发的经验为线索，提炼出一系列真正能用得上的编程原则，帮助开发者在「写代码的当下」做出更好的判断。作者从常见的 DRY（Don’t Repeat Yourself）、YAGNI（You Aren’t Gonna Need It）、KISS（Keep It Simple, Stupid）等抽象原则，延伸到更现实可操作的做法，如 “Rule of Three”、 “Make it work, make it right, make it fast”、保持函数幂等（Idempotency）、遵循单一职责原则（Single Responsibility Principle）、维持单一抽象层次（Single Level of Abstraction）。这些原则的核心，是让代码更易于理解、维护和演化——写出「易于推理」的好代码。

1. 自学开发者的视角
• 作者并非科班出身，而是在设计工作中逐步学习编程。
• 文章旨在帮助其他自学者少走弯路，用经验性的原则替代抽象的“计算机科学理论”。
• 强调“可实践的原则”比抽象定律更能指导日常编程决策。

2. 从口号到可行的习惯
• 对比常见但抽象的原则：Premature optimisation、YAGNI 和 DRY。
• 引出更落地的 “Rule of Three”：第三次重复时再做抽象或优化。
• 这种「三次规则」帮助开发者在实践中把握代码复用与复杂度的平衡。

3. 写出正确的代码顺序
• 展开 Kent Beck 提出的 “Make it work, make it right, make it fast”。
• 通过明确阶段来避免过早优化或纠结错误焦点。
• 这与 “Rule of Three” 背后的思想一致——聚焦当下任务，不超前设计。

4. 「糟糕的第一版」与逐步演化
• 探讨 Gall’s Law：复杂系统从简单可用系统演化而来。
• 结合 Second-system effect 与 “Best simple system for now” 等理念。
• 总结：优先完成可运行的简单版本，再通过迭代完善。

5. 写出更可推理的代码结构
• 幂等性 (Idempotency)：函数在相同输入下应产生相同输出；有助于减少副作用、提高可维护性。
• 单一职责原则 (Single Responsibility Principle)：一个函数或模块只有一个「变更原因」；避免耦合与连锁修改。
• 单一抽象层次 (Single Level of Abstraction)：函数内部操作应保持一致层次，避免在底层细节与业务逻辑间跳跃。
• 示例：将获取用户、筛选活跃用户、发送邮件分别独立函数化，更清晰且易测试。

6. 原则的统一性与良好代码的特征
• 所有好代码共通点：易理解、易推理、内部职责清晰。
• 不良代码往往混乱于职责、层次或优化顺序上。
• 严格遵守这些原则虽显“教条”，却能在长期维护中体现价值。

7. 推荐阅读
• Refactoring by Martin Fowler
• Making impossible states impossible by Richard Feldman
• Make It Work Make It Right Make It Fast
• Single Level of Abstraction
• hacker-laws.com

Piccalilli

Programming principles for self taught front-end developers

The majority of us are a bunch of self taught people with rather spotty knowledge and that's fine! Kilian (also self taught) is here to share some of the computer science fundamentals you probably are missing with the aim to improve your code in the long…

AI 摘要：文章是 Temani Afif 系列博文《Perfectly Pointed Tooltips》的第三篇，重点介绍如何在 CSS 中使用 Anchor Positioning API 将 tooltip（提示框）的箭头精准定位到锚点（anchor）的四个角落。作者通过 margin 控制间距、clip-path 实现遮罩、anchor-size() 获取锚点尺寸等一系列技巧，展示如何让 tooltip 更灵活地响应位置变化，并指出未来 Anchor Positioning Level 2 将带来更多动态布局可能性。

1. 背景与目标
• 延续前两篇 tooltip 教程，本篇聚焦「指向角落」的布局挑战。
• 仅 Chrome 与 Edge 目前完全支持所用特性。
• 本次重点是探索新定位与隐藏技巧，非基础概念重复。

2. 定义 tooltip 位置信息
• 使用 position-area: top left、top right、bottom left、bottom right 指定初始角落位置。
• 利用 position-try-fallbacks: flip-inline, flip-block, ... 实现自动翻转（flip）策略。
• 解释为何此配置能灵活调整尺寸但在添加尾部（tail）时复杂度更高。

3. 添加尾部 (Tail) 的新思路
• 使用伪元素 ::before 并引入 Anchor Positioning API 的 anchor-size() 函数。
• 绘制覆盖锚点的方形区域，并基于变量 --d（间距）与 --s（半径、尾部大小）动态扩展尺寸。
• 通过 clip-path 制造四角尾部形状，可替换为渐变、SVG、shape() 等方式实现个性化设计。

4. 隐藏多余的尾部
• 核心技巧：clip-path: inset(0) margin-box;
• clip-path 基于 margin-box 创建可视区域，仅保留一个角的尾部。
• 虽然伪元素为 fixed 定位，但仍属于 tooltip 内容，可被父元素裁切。

5. 扩展与实作练习
• 展示多种使用同技巧更新的示例及 debug mode 调试展示。
• 鼓励读者重新实现前两篇的版本作练习，并尝试新增曲线尾部样式。

6. 总结与展望
• 通过 Anchor Positioning API 可以让 tooltip 的行为更动态、更响应式。
• 强调现代 CSS 已超越单纯静态样式，可跨元素定义交互定位。
• Anchor Positioning Level 2 预计引入可查询 fallback 位置与更灵活的动态控制。

Frontend Masters

Perfectly Pointed Tooltips: To The Corners

Ready for the last challenge?

AI 摘要：本文讲述了如何仅使用 CSS（不依赖 WebGL 或 Canvas）创建三维等距地形，通过层叠网格（stacked grids）与 3D 变换（3D transforms）构建出一个像素风的生成式世界。作者介绍了从镜头视角（perspective）设置，到多层网格架构、地形单元（flat、ramp、wedge、spike）的几何定义，再到噪声生成高度图和性能优化等完整技术路径。

jhey ʕ•ᴥ•ʔ (@jh3yy): hook this 3D CSS card up to device rotation? sure! 👨‍🍳

tip: use the DevTools "Sensors" emulator with "Custom Orientation" to debug/refine before taking it to a real device 👇

在 Jhey Tompkins 设计的这款可配置 Pen 中，将鼠标悬停在加号网格上，即可观看它们变换颜色和旋转。您还可以通过顶部的控制面板调整网格大小和主题颜色。

AI 摘要：本文介绍了 CSS 中新引入的 sibling-index() 和 sibling-count() 两个函数，它们让我们可以直接通过纯 CSS 计算元素在兄弟节点中的相对位置，实现无需 JavaScript 的 “错位动画（staggered animation）”。通过结合这些函数与 :has() 伪类、transition 延时变量等技巧，作者演示了如何在选中某个卡片时，让它左右的卡片以时间递增或递减的顺序逐个消失，完整地展示了纯 CSS 动画逻辑与可替代 JS 的思路。

1. 新函数简介与基础概念
• sibling-index() 返回元素在兄弟节点中的序号，从 1 开始计数；
• sibling-count() 返回兄弟节点的总数（包含自身）；
• 二者结合可实现基于结构位置的样式或动画计算，例如递增宽度或动画延时。

2. 示例布局与核心结构
• 使用 .cards-wrapper 包裹多张 .cards 卡片，通过 flexbox 横向排列；
• 每个 .cards 内部含有覆盖整个卡片的 input[type="checkbox"]，点击后触发交互。

3. 主要的选择器逻辑

• .cards:has(:checked)：选中状态的卡片，用于高亮；
• .cards-wrapper:has(:checked) .cards:not(&)：当有选中卡片时，让其他卡片消失；
• & ~ .cards 与 .cards:not(&) 分别控制右边与左边卡片的延迟方向（递减或递增）。

4. 样式声明解析
• 高亮选中卡片：添加虚线边框；
• 让未选卡片消失：透明度降为 0，宽度缩为 0，并在动画结束后设置 display: none；
• 过渡动画：transition-behavior: allow-discrete 保障 display 的离散变化；
• 时间递减／递增：
• 右侧卡片使用 --n: calc(sibling-count() - sibling-index() + 1)；
• 左侧卡片使用 --n: sibling-index()；
• 最终延时计算：transition-delay: calc(var(--n) * 0.2s)。

5. 动画示例与完整规则组合
• 当某张卡片被选中时，其它卡片依序向外逐个消失，形成错位延迟动画效果；
• 所有规则组合后实现纯 CSS 版本的交互过渡，无需额外脚本支持。

6. 兼容方案（Fallback）
• 对不支持 sibling-* 函数的浏览器，通过 JavaScript 动态计算 --n 值；
• JS 逻辑基于监听 change 事件手动设置左右两侧卡片的延时变量；
• 保持与 CSS 核心机制一致的动画行为。

7. 扩展示例与实践思路
• 使用 sibling-index() 实现类似手风琴（accordion）式开合动画；
• 即便不带延时，也可通过该函数控制显示隐藏的顺序与方向；
• 展示纯 原生 CSS 实现复杂交互效果的潜力。

Frontend Masters

Staggered Animation with CSS sibling-* Functions

The CSS functions sibling-index() and sibling-count() return an element’s position relative to its siblings and the total number of siblings, including itself. This is useful for styling elements based on their positions.