srcdoc是最轻量可控的CSS预览方式，因其无需服务器、不依赖外部服务、改完即生效；而document.write()会导致文档重载、丢失状态且受跨域限制。
直接用 iframe.srcdoc 是最轻量、最可控的 CSS 预览方式，不需要服务器、不依赖外部服务，改完就生效，适合本地调试和嵌入式场景。
为什么不用 document.write() 往 iframe 写 CSS？
旧方案常把 HTML/CSS/JS 拼成完整字符串后用 iframe.contentDocument.write() 注入，但存在两个硬伤：
-
document.write()在页面加载完成后调用会清空整个文档，导致 iframe 重载，CSS 动画、状态（如 input 聚焦）全部丢失 - 跨域限制下，部分浏览器会拒绝写入，报错
DOMException: Blocked a frame with origin "null" from accessing a cross-origin frame - 拼接字符串易出错：CSS 中的
<style>标签若含未转义的</style>，会提前截断样式
而 srcdoc 是 HTML5 原生属性，把完整 HTML 字符串当“源文档”注入，无重载、无跨域问题，且自动处理标签转义。
srcdoc 配合 textarea 实时更新 CSS 的写法
关键不是只更新 CSS，而是每次把三块内容（HTML 结构 + CSS 样式 + JS 行为）重新组装成一个合法 HTML 文档字符串，再赋给 srcdoc：
立即学习“前端免费学习笔记（深入）”；
- 确保
<head>内有<meta charset="UTF-8">，否则中文 CSS 注释或内容可能乱码 - CSS 必须包在
<style>标签里，不能只写规则；JS 同理，必须包在<script>中（或用type="module"） - 若 CSS 里用了
@import或外部字体链接，需确认预览环境能访问对应资源（srcdoc不支持相对路径加载外部 CSS 文件）
示例片段：
function updatePreview() {
const html = document.getElementById('html-code').value;
const css = document.getElementById('css-code').value;
const js = document.getElementById('js-code').value;
const fullHtml = `
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><style>${css}</style></head>
<body>${html}<script>${js}<\/script></body>
</html>
`;
document.getElementById('preview').srcdoc = fullHtml;
}
Live Server 类工具对 CSS 预览的局限性
像 VS Code 的 Live Server 或 Sublime 的 Live Server 插件，本质是起一个本地 HTTP 服务并监听文件变更。它们对 CSS 预览有隐含约束：
- 只刷新整个页面，无法做到「仅注入新 CSS」——也就是不支持真正的 CSS 热替换（HMR）
- 若项目中用了
link[rel="stylesheet"]引入外部 CSS，修改该文件后，Live Server 会刷新页面，但不会触发浏览器的 CSS 注入机制 - 当 HTML 和 CSS 分离为不同文件时，你必须保证路径正确：
<link href="style.css">在服务器根目录下才有效；而file://协议下几乎必然 404 - 移动端预览时，Live Server 默认只监听
127.0.0.1，需手动配置host: "0.0.0.0"才能让手机访问
浏览器 DevTools 的 Elements 面板才是真·实时 CSS 预览
如果你只是想快速试一个颜色、一个 margin、一个 flex 布局，根本不用动代码文件：
- 在 Chrome / Edge 中打开页面，按
F12→ 切到Elements面板 → 点击任意元素右侧的Styles标签 - 在已有的 CSS 规则上双击值（如
color: #000的#000），直接编辑；新增规则可点击右下角+号 - 所有修改立即生效，且支持撤销（
Ctrl+Z）、临时禁用某条规则（点左侧复选框） - 注意：这里改的是渲染后的计算样式，不反映原始源码；但它是验证 CSS 是否被应用、是否被覆盖、是否受优先级影响的唯一可靠方式
真正容易被忽略的是：很多人在编辑器里反复改 CSS，却从不打开 DevTools 看一眼 Styles 面板里那条规则到底有没有出现、是不是被划掉、有没有显示 invalid property name —— 这比查拼写错误快十倍。
