css在线编辑器

打开浏览器，编辑地址栏输入一行CSS，编辑回车，编辑页面上某个元素的编辑颜色立刻变了。这种即时反馈，编辑就是编辑CSS在线编辑器最直接的魅力。不用装软件，编辑不用配环境，编辑甚至不用保存文件——你敲下的编辑每个字符，浏览器都在实时渲染。编辑

我第一次用这类工具，编辑是编辑为了调一个按钮的阴影。本地项目里改一次要刷新页面，编辑等webpack重新编译，编辑少说五六秒。编辑后来同事甩来一个链接，打开是个左右分栏的界面：左边写代码，右边直接出效果。我把box-shadow的值从0 2px 4px rgba(0,0,0,.1)改成0 4px 12px rgba(0,0,0,.15)，右边按钮的浮起感立刻不一样了。整个过程不到十秒。

它到底怎么工作的

核心原理不复杂。页面里嵌一个<iframe>，或者用srcdoc属性塞进一段完整的HTML结构。你在左侧<textarea>里写的CSS，通过JavaScript监听input事件，实时注入到iframe的<style>标签里。浏览器解析CSS的速度极快，所以看起来就像“边写边变”。

有些编辑器还支持@media查询的实时预览。你拖动窗口边缘改变宽度，右侧预览区跟着切换断点样式。这个功能在调响应式布局时特别管用——比在DevTools里手动模拟设备快得多。

几个我常用的

CodePen算是最出名的。它的CSS面板有自动补全，还能用SCSS、LESS。免费版够用，但保存私有pen要付费。我拿它做过一个纯CSS的加载动画，把@keyframes写进去，右侧直接转起来，调animation-timing-function的时候特别直观。

JSFiddle更老派，界面朴素，但稳定。它的优势是能直接引入外部库，比如Bootstrap或者Tailwind的CDN。有次我临时要改一个用Tailwind写的卡片样式，本地没装构建工具，就在JSFiddle里把CDN一贴，改完复制走人。

国内的话，菜鸟教程的在线编辑器够轻量。打开速度快，没有多余功能，适合快速验证一个小想法。缺点是代码提示弱，写复杂选择器时容易打错。

还有一个叫CSS Deck的，现在用的人少了，但它有个“实时多设备预览”功能——左边写代码，右边同时显示手机、平板、桌面的效果。调栅格布局时省事。

什么时候别用它

在线编辑器不适合大型项目。没有版本控制，没有模块拆分，代码一多就乱。我试过在一个在线编辑器里写超过300行的CSS，滚动条拉来拉去，找某个类名要花半天。而且网络一断，全没了。有次我在咖啡馆改一个渐变背景，写了二十多行，结果WiFi抽风，页面刷新，一切归零。从那以后，超过五十行的代码我一定在本地写。

另外，涉及@import或者本地字体文件时，在线编辑器基本没辙。跨域限制摆在那，你没法直接引用本地磁盘上的.woff2文件。

一个具体的使用场景

上周帮朋友调一个导航栏的下划线动画。他想要鼠标悬停时，下划线从中间向两边展开。本地项目跑起来太慢，我直接打开CodePen，把HTML结构粘进去，然后写：

.nav-link::after {  content: ''; display: block; height: 2px; background: #333; transform: scaleX(0); transition: transform .3s; } .nav-link:hover::after {  transform: scaleX(1); }

右侧预览区里，鼠标移上去，下划线瞬间展开。但朋友说要“从中间向两边”，于是我把transform-origin改成center。再试，对了。整个过程三分钟，要是走本地构建，光等热更新就不止这个时间。

CSS在线编辑器就是个草稿纸。你可以在上面乱涂乱画，试各种奇怪的值，比如border-radius: 50% 20% 30% 10%，看看到底长什么样。它不负责工程化，不负责协作，只负责一件事：让你立刻看到CSS的效果。这件事，它做得足够好。