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

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

CSS-Tricks

Pure CSS Tabs With Details, Grid, and Subgrid | CSS-Tricks

Can we use the <details> element as the foundation for a tabbed interface? Why yes, we can!