#优质博文 #CSS #前端
Pure CSS Tabs With Details, Grid, and Subgrid | CSS-Tricks

AI 摘要：本文作者回顾多年来使用纯 CSS 制作选项卡 (Tabs) 的探索，并介绍一种利用 <details> 与 <summary> 元素结合 CSS Grid 与 Subgrid 的新方案。该方法无需 JavaScript 即可实现结构化、响应式、可访问的选项卡布局；文章展示完整 HTML 结构、Grid 与 Subgrid 的布局方法、状态切换 (open 属性) 的控制与可访问性特性，最后通过变量与模板语言优化代码结构。

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

1. 背景与动机
• 回顾作者九年前的纯 CSS Tabs 实现与可访问性优化历程
• 提出更现代的实现思路：结合 <details> 元素、CSS Grid 与 Subgrid 构建组件化界面

2. HTML 结构搭建
• 使用 .grid 容器包裹多个 <details>，每个 <details> 对应一个选项卡
• <summary> 元素作为点击控制标签，而内容区域作为展示面板

3. CSS Grid 与 Subgrid 实现布局
• .grid 使用 display: grid 创建三列布局，上行为标签，下行为内容区
• details 继承 Subgrid 网格线以保证对齐一致性
• 利用 grid-column 与 grid-row 完成布局占位
• 通过 ::details-content 定位并控制内容区显示

4. 交互逻辑与状态控制
• 通过 [open] 属性自动控制显示与隐藏，无需 JS
• 使用 :not([open]) 结合 display: none 隐藏未选中面板
• <summary> 元素作为可操作区域，悬停与点击时样式变化

5. 样式分布与变量化
• 使用 :nth-of-type 精确定位每个 tab 的布局位置
• 引入自定义属性 (CSS Variables) --n 优化可维护性
• 建议通过模板语言 (如 Liquid) 动态生成 HTML 以自动分配变量

6. 细节优化与可访问性
• 利用 z-index 确保 <summary> 块可以正确响应点击事件
• <details> 原生可访问性支持包括键盘导航与屏幕阅读
• 社区反馈与改进：参考 Mastodon 与评论区的讨论

7. 结论与展望
• 纯 HTML + CSS 已能实现具有良好交互体验的 Tabs 组件
• Subgrid 与 ::details-content 等新特性仍待浏览器完全支持
• 表明现代 CSS 的能力足以构建小型交互组件，无需依赖 JS

author Silvestar Bistrović

#优质博文 #前端 #CSS #JavaScript #动画 #course
教程不嫌多～～
Start implementing view transitions on your websites today

AI 摘要：本文系统地讲解了如何在网站中使用 View Transition API，通过 CSS 与 JavaScript 结合实现页面或内容间的动画过渡，从基础语法、调试技巧、命名规范、类型区分到最佳实践完整覆盖。作者强调利用伪元素与动画组结构可极大简化复杂转场开发，提出在 prefers-reduced-motion 设置下应合理退化，同时介绍跨页面转场与未来 CSS 原生增强的前景。

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

1. View Transition API 基础
• View Transition API 允许在状态切换间实现平滑动画，方式包括自动触发或通过 JavaScript 手动调用。
• 浏览器在启动转场时会创建当前和未来状态的快照进行对比并生成关键帧动画，机制类似 FLIP 技术但由 CSS 自动处理。
• 若未改动浏览器原生导航，可简单通过 @view-transition { navigation: auto; } 启用。

2. View Transition 结构与伪元素 (pseudo elements)
• 介绍转场的 DOM 架构：::view-transition-group、::view-transition-image-pair、::view-transition-old、::view-transition-new。
• 每个转场组独立包含前后状态快照，开发者可用 view-transition-name 命名控制。
• 快照为非交互式静态影像，转场中无法修改其内容或动态更新样式。

3. 调试与命名
• Chrome DevTools 的动画面板 (Animations Drawer) 可用于调试、调整动画速度与暂停查看。
• 推荐为每个转场元素添加独立的 view-transition-name，跨页面动画需在两页手动匹配命名。
• 使用 match-element 可支持同文档内转场。

4. View Transition 类型与事件
• 通过 JavaScript 可在 document.startViewTransition() 调用时传入 types 参数，区分不同交互的转场类型。
• 可结合 :active-view-transition-type(filter) 伪类为特定类型设置动画样式。
• 使用 pagereveal 事件判断页面跳转方向与来源，实现更复杂的跨页面转场逻辑。
• 当前部分旧版 Chrome 不支持类型参数，可通过 try-catch 或自定义 data 属性兼容处理。

5. 最佳实践与组织结构
• 应为所有 view-transition-name 设置一致的动画时长、缓动函数（animation-timing-function）与填充模式（fill-mode）。
• 建议用短变量如 --vt 生成唯一 ID，在使用 CMS 或框架时可轻量生成名称。
• 使用 prefers-reduced-motion: no-preference 媒体查询，以保证可访问性良好的退化行为。
• 可通过选择器 [style*="--vt"] 一次性添加全部转场名称。

6. 高阶应用与动画逻辑
• 转场组中可能只存在 old/new 状态，用于筛选（filter）或排序（sort）操作表现不同。
• 使用 CSS 伪类 :only-child 区分仅有 old/new 状态的元素，实现“进入”或“退出”动画。
• 案例包括从总览页到详情页的转场动画。
• 当前 :has 尚无法检查组内是否同时存在 old/new 元素，此功能已在 W3C 提案中。

7. 浏览器兼容性与后续发展
• Firefox 144 已支持 View Transition API，但仅限同文档转场。
• 跨文档转场（cross-document transitions）正在推进，可跟踪 MDN 与 Chrome 团队 Demo 获取更新。

author Cyd Stumpel

#demo #codepen #前端
酷是挺酷的，但是感觉 UX 不太符合用户直觉？
Custom curved scrollbars

Chris Bolson 分享了曲线滚动条主题的两种变体：一种是超级曲线，另一种是更微妙的曲线。"滚动条遵循容器的边框半径，长度根据内容数量计算"。

核心原理是隐藏原生滚动条，在容器上方叠加一层 SVG，画一条沿容器圆角轮廓的轨迹，并将滚动条当作这条路径上的一段子路径来渲染，用视口高度与内容高度的比例计算滚动条长度。

拖动时根据指针的垂直位置换算滚动比例写回 scrollTop，滚动与窗口尺寸变化时同步重算路径，颜色与粗细则由 CSS 变量和交互状态控制。

via Codepen Spark#478

#优质博文 #AI
我使用 Claude Code 开发 Rolldown 的体验：在 Rolldown 开发中高强度使用 Claude Code 进行真实开发的思考与经验分享。

几个月前，我自认为对 AI 认知是比较贴切，能写点脚本、做下网页开发，但处理不了 Rolldown 这种复杂度的项目。
而现在，过去两周里，它几乎替我写了所有的代码。整个流程没有魔法，只有跟着官方文档《Claude Code: Best practices for agentic coding》的笨拙使用，仅仅是这样，就已经颠覆了我的认知。

author Yunfei He

从 周报 #102 - 我是如何使用 AI 的 里看到的文章，我觉得说的都挺对的，现在 AI 确实是很好的副驾驶了，我也是同时用着 codex / claude code / cursor 感觉爽翻天了。