AI 摘要：文章回顾了已关闭的社交平台 Cohost.org 上用户利用其宽松的 HTML/CSS 支持创造的独特“CSS 犯罪”技巧，重点介绍了通过 <details> 元素和 SVG 动画实现的交互设计黑科技，展现了该社区在有限技术条件下的创造力。

1. Cohost.org 的背景与关闭
• 成立于 2022 年 6 月，定位为反主流设计的无广告、按时间线排序的社交平台，支持 HTML 子集。
• 2024 年 9 月因资金和团队倦怠关闭，存档于 Wayback Machine。

2. CSS Crimes 的诞生
• 用户利用宽松的 HTML 过滤机制（允许内联 CSS）创造交互内容，如诗歌、复古网页复刻和迷你游戏。
• 核心技巧：通过 <details> 和 calc() 实现“宽度 hacking”（Width-hacking），编码多状态逻辑（如组合锁、游戏关卡）。

3. Width-hacking 技术详解
• 原理：利用 <details> 展开时父容器宽度变化，通过 inline-flex 和绝对定位计算组合状态（如 1px + 4px = 5px 对应特定按钮组合）。
• 应用示例：隐藏消息通过 calc() 和 overflow: hidden 控制，仅当容器宽度匹配目标值时显示。

4. SVG 动画进阶技巧
• 动态样式：SVG 内嵌 <style> 和媒体查询，根据父容器尺寸改变元素属性（如颜色、缩放）。
• 动画实现：添加 CSS transition 并配合“虚拟动画”元素绕过浏览器兼容性问题。
• 案例：结合宽度黑客与 SVG 媒体查询，实现平滑过渡的“秘密消息”效果。

5. 其他资源与总结
• 推荐延伸阅读：YellowAfterlife 的技巧合集 和 rebane2001 的回顾视频
• 作者表达对 Cohost 社区的怀念，强调其独特的创意氛围。

CSS-Tricks

The Lost CSS Tricks of Cohost.org | CSS-Tricks

In this post, Blackle Mori shows you a few of the hacks found while trying to push the limits of Cohost’s HTML support. Use these if you dare, lest you too get labelled a CSS criminal.