Possible to use css function to validate css rules?

Is it possible to use .css to validate some basic inline rules to see if they are valid?

var tree = $("<div><span></span></div>");
tree.find('span')
    .css("background-color","#eee");
console.log(tree); // span changed 

tree.find('span')
    .css("background-color","blaahhhhcolor");
console.log(tree); //no change to span

tree.find('span')
    .css("background-colaar","black");
console.log(tree); //no change to span

Compare both before and after and see if there has been an inline style attached, if there is it is valid?

If not would it be possible to add some type of callback to CSS to suggest the given rules are valid? I know jQuery isn’t a linter but in my case and possibly others this may suffice.

[mgol]

You can just check background-color after the change and if its value is different than what you set it to it means the rule was invalid.

If you want something more, that’s more a job for a plugin; this is way too specific to be included in jQuery Core.

[mscreenie]

Thank you. This could be achieved without jQuery in that case.

Here’s my basic function if it helps anyone.

function validateCss(rules) {

    var original = "<div></div>";
    var parse_bench = $("<div>" + original + "</div>");
    parse_bench.find("div").css(rules);

    if (original != parse_bench.html()) {
        return true;
    } else {
        return false;
    }

}


validateCss({
    "background": 'blue'
}); // true

validateCss({
    "background": 'bluea'
}); // false