CSS 练习场

CSS Playground 如何工作

工具功能

CSS Playground 提供两个编辑器——HTML 和 CSS——以及一个沙盒化的 iframe 预览，会在你输入时实时更新。你可以用它来原型化组件、测试选择器、验证回退样式，或为 bug 报告构建最小复现。'Reset styles' 开关会添加一个小型 CSS reset（box-sizing、合理的 body 默认值），让你的 CSS 不必与浏览器默认样式对抗。

常见开发者使用场景

前端开发者构建隔离的组件示例，用于在拉取请求或文档中分享。设计师试验渐变、阴影、动画时序，以及 grid、subgrid、容器查询等现代特性。教育者无需注册 CodePen 账号即可向学生演示 CSS 概念。QA 工程师在受控环境中干净地复现仅与 CSS 相关的 bug。

数据格式、类型或变体

HTML 编辑器接受任何 body 内容。CSS 编辑器接受任何现代 CSS——自定义属性、嵌套、@container、@layer 等。输出是一个完整可独立运行的 HTML 文档，包含 meta viewport 标签（可选）和内联 style 块，可作为完整文件直接复制。预览 iframe 使用 sandbox='allow-same-origin' 以允许相对 URL，同时阻止脚本和表单提交。

常见陷阱与边界情况

外部 @font-face URL 和 @import 语句可能会被 iframe 沙盒阻止。粘贴依赖外部文档继承样式的 CSS 在这里不会有相同行为，因为 iframe 是隔离的。持续时间非常长的动画即使在编辑器未聚焦时也会在预览 iframe 中继续运行；如果你在调试时序，可用 animation-play-state 暂停它们。

何时使用此工具而非代码

将该浏览器工具用于一次性实验、隔离的最小复现或快速教学演示。在真实项目中，开发服务器、热模块替换以及组件开发工具（React Refresh、Vue devtools）能提供更丰富的反馈回路——把这个 playground 用于那些你不想为之搭建工具链的草图即可。