当我们在 textarea 值中添加 css 时如何验证 css？

Question

我在 textarea 中写了 css，但需要验证我正在写的 css 的属性和值是否正确？

我必须开发一个像实时 css 变化的功能并验证 css 例如，如果我写 .abc { text : text; } 那么这段文字既不是有效的属性也不是有效的 css 所以我必须在 textarea 本身中显示 notification/error 就像： This text is not a valid css

Html代码:

<textarea id="txtCSS" name="txtCSS" rows="14" cols="50">
    .FC{color:blue; margin: 40px; padding: 50px;}
    .cf{color:blue; margin: 40px; padding: 50px; }
</textarea>
<label class="FC">Some Text</label>
<div class="cf">test Text</div>

JavaScript代码：

function render(value) {
        let previewStyle = document.getElementById('previewStyle');
        if (!previewStyle) {
            addStyle(value);
        } else {
            previewStyle.innerText = value;
        }
    }
    function addStyle(styles) {
        /* Create style document */
        const css = document.createElement('style');
        css.type = 'text/css';
        css.id = 'previewStyle';
        if (css.styleSheet) {
            css.styleSheet.cssText = styles;
        } else {
            css.appendChild(document.createTextNode(styles));
        }
        /* Append style to the tag name */
        document.getElementsByTagName("head")[0].appendChild(css);
    }
    const text = document.getElementById('txtCSS');
    text.addEventListener('input', (e) => {
        const content = e.target.value;
        render(content);
    });
    render(text.value);

参考图片：

Answer 1

你可以像下面这样尝试它应该有效

   const validatorURL = 'https://jigsaw.w3.org/css-validator/validator' +
  '?uri=http%3A%2F%2Fwww.w3.org%2F&profile=css3&output=json';
fetch(validatorURL)
  .then(response => response.json())
  .then(results => console.log(results))

当我们在 textarea 值中添加 css 时如何验证 css？

How to validate css when we add css in textarea value?

css

validation

jquery