CSSDeck

前端开发者与设计师在 IRC、StackOverflow 上求助时，用它制作精简测试用例；想展示 CSS3/JS 创意的人，则用它提交作品并争取首页展示。

核心功能：不止是代码 playground

CSSDeck Labs 提供实时渲染的 HTML/CSS/JS 编辑器，无需点击“运行”按钮。支持 10 种预处理器（HTML 侧：Jade、Haml、Markdown、Slim；CSS 侧：Less、Stylus、SASS/SCSS 含 Compass；JS 侧：CoffeeScript），并内置 Zen Coding 快捷输入。可从 Preferences 面板加载 jQuery、Mootools、Bootstrap 等 CDN 资源，也可通过 CDNJS 添加更多库。

• 实时协作：多人同时编辑代码，类似 Etherpad 的实时模式
• Codecast 录制：将编辑过程录制成可回放视频，供他人学习
• Private Bin：普通项目默认不公开，Super Private 选项仅自己可访问
• 嵌入代码：任何项目均可通过 Share 框获取 embed 代码，插入博客或网页
• 版本管理：保存后可通过“New Milestone”创建新版本，不覆盖原内容

社区与内容生态

截至官网数据，CSSDeck 已有 110,918 名注册用户，累计创建 2,456,707 个项目。首页设有“Picks”和“Popular”板块，展示社区精选作品，如“Electricity Effects with CSS and Javascript”（259,505 次浏览）、“Slow load progress bars with CSS”（233,087 次浏览）。用户可对任意项目评论，并收到通知。

• 作品展示：符合标准的创意会被收录至 Gallery，成为在线作品集
• Codecast 专区：热门回放如“Bouncy Ball CSS”（125,830 次浏览）
• 社交登录：支持 Twitter 和 GitHub 注册，10 秒即可开始使用
• 通知系统：评论提醒以红色徽标显示在头像上，可批量清除

测试用例与调试辅助

专为前端调试设计：将页面中出错的代码片段复制到编辑器，保存后生成独立链接，即可分享到 IRC、论坛或 StackOverflow 寻求帮助。编辑器内建 Validations 面板，实时显示 JS 错误及预处理器语法错误。

• 资源加载：Preferences 面板可一键引入 Normalize.css 或启用 Prefixfree 自动处理厂商前缀
• 布局调整：编辑器支持垂直/水平分栏，并可调节字体大小
• 键盘快捷键：文档中列出完整快捷键列表，提升操作效率

收费与限制

基础编辑、保存、协作功能免费。网站底部广告位推广 WordPress 主题，价格低至 $0.48，并提供 100% 满意保证。未发现付费订阅或高级会员计划。

• 广告形式：BuySellAds 广告网络，首页及内容中穿插展示
• 隐私政策：明确 Cookie 使用及数据收集说明，文档页标注 ©2026

常见问题

Q1：CSSDeck 的 Codecast 功能怎么用？

A1：在编辑器中编写代码时，点击录制按钮即可创建 Codecast。保存后其他用户可以在“Codecasts”板块以视频风格回放你的编辑过程，适合制作教学或演示。热门 Codecast 如“Slow load progress bars with CSS”已有 233,087 次浏览。

Q2：CSSDeck 支持哪些 CSS 预处理器？

A2：支持 Less、Stylus、SASS/SCSS（可选 Compass）以及 CSS 层面的 Prefixfree 自动前缀处理。HTML 侧支持 Jade、Haml、Markdown、Slim，JS 侧支持 CoffeeScript。

Q3：如何让作品不被任何人看到？

A3：编辑时从 Preferences 面板选择“Private”选项，可使 CSSDeck 团队也不在内部挑选列表中看到你的项目；选择“Super Private”则仅你自己能打开该项目的链接。普通项目默认不公开，但可能被团队选入首页展示。

更多同类工具与网站,可在前端分类继续挑选。

信息核实于 2026年7月,具体以官网为准。