如何验证用户编写的自定义CSS代码是否有效？

一、前端实时验证方案 #

• 利用浏览器原生解析能力：借助CSSStyleSheet的insertRule方法，尝试将用户输入的CSS代码插入临时样式表，若抛出异常则判定代码无效。核心代码示例：

function checkCSSValidity(cssCode) {
  const tempStyle = document.createElement('style');
  try {
    tempStyle.sheet.insertRule(cssCode, 0);
    return { valid: true, errorMsg: null };
  } catch (err) {
    return { valid: false, errorMsg: err.message };
  }
}

这种方式直接复用浏览器的CSS解析引擎，准确性和WordPress编辑器的实时校验逻辑一致，能快速反馈语法错误。

• 实时输入反馈：监听编辑器输入框的input事件，每次输入后触发验证，在编辑器下方即时显示错误信息（比如错误行号、具体原因），让用户实时知晓问题所在。

二、后端兜底验证（可选） #

• 使用专业CSS解析库：如果需要在后端做最终校验，可通过postcss库解析CSS代码，捕获语法错误。示例代码：

const postcss = require('postcss');

async function validateCSSOnBackend(cssCode) {
  try {
    await postcss().process(cssCode);
    return { valid: true };
  } catch (err) {
    return { valid: false, errorMsg: err.message };
  }
}

后端验证主要用于防止前端校验被绕过，确保存储到服务器的CSS代码合规。

三、WordPress风格的编辑器增强 #

• 代码高亮：集成轻量CSS语法高亮功能，让用户能清晰区分选择器、属性、值，降低输入错误概率。
• 错误定位：解析验证抛出的错误信息，提取行号（多数浏览器错误会包含行号），在编辑器对应位置用红色下划线或侧边标记提示错误位置。
• 安全过滤：拦截恶意风险的CSS特性，比如@import外部资源、expression()旧特性、javascript:伪协议等，避免安全漏洞。可在验证时检测这些内容并给出提示或直接过滤。
• 实时预览：提供预览区域，让用户能即时看到自定义CSS应用到目标页面的效果，和WordPress自定义izer的预览逻辑对齐。

四、用户体验优化 #

• 自动补全：实现CSS属性、常用选择器的自动补全功能，减少用户输入失误。
• 代码格式化：添加格式化按钮，使用工具将用户输入的CSS代码整理成规范格式，间接降低语法错误率。

内容的提问来源于stack exchange，提问作者Priyanka