How to get a list of valid values for a CSS property with javascript?

Question

Is there any way to get a list of valid values for a given CSS property with Javascript or check if the value you set is valid?

Ex.: If I try to set document.getElementById('foo').style.cursor = "grab";.

Nothing happens and the property remains unchanged(at least in chrome).

I'd like to get a list of valid values for the current browser only.

For example, on Firefox I'd get -moz-grab in the list and on IE I wouldn't get grab or any of it's variants.

I want to be able to add vendor prefixes when needed and maybe have a way to provide a fallback.

Answer 1

I know your question is asking for a way to check valid values for vendor specific cursors (and, potentially, other CSS properties), but if all you are looking for is a cross-browser solution for styling cursors, you might just want to use your own images for the cursors in question.

http://www.google.com/intl/en_ALL/mapfiles/closedhand.cur http://www.google.com/intl/en_ALL/mapfiles/openhand.cur

For example, you could use:

document.getElementById('foo').style.cursor = "url(/closedhand.cur) 4 4";

You might even wish to use this in conjunction with a check to see if known properties are valid, for example:

if( window.CSS.supports('cursor','grab') )
{
  cursor = 'grab';
}
else if( window.CSS.supports('cursor', '-moz-grab') )
{
  cursor = '-moz-grab';
}
else
{
  cursor = 'url(/grab.cur)';
}
document.getElementById('foo').style.cursor = cursor;

You could easily extend this to test all of the popular vendor prefixes, then only apply this logic to the properties with which you know have limited browser support.

CSS.supports API Browser Compatibility
CSS.supports MDN

Answer 2

One approach that comes to my mind is to pre-populate arrays with the valid css values, and then search -

var validValues = {
    'textAlign': ['left', 'right', 'center', 'justify', 'start']
};

var userSpecifiedCSSValue = documet.getElementById('foo').style.textAlign.toLower();
if (validValues.textAlign.indexOf(userSpecifiedCSSValue) > -1) {
    // valid
}

Note: indexOf is not available for IE <= 8.

If you want to make it generic -

var userStyle = document.getElementById('foo').style,
    userSpecifiedValue,
    allowedCSSValues;

for (cssProperty in userStyle) {

    if (userStyle.hasOwnProperty(cssProperty) && 
            validValues.hasOwnProperty(cssProperty)) {

        userSpecifiedValue = userStyle[cssProperty].toLower();
        allowedCSSValues = validValues[cssProperty]

        if (allowedCSSValues.indexOf(userSpecifiedValue) > -1) {
            // valid
        } else {
            // invalid
        }
    }
}

If you also want to include browser-specific validation, then you can create list of valid values based on the browser type. Just create another layer in your object -

var validValues = {
    'chrome': {
        'textAlign': []// arrays with values
    }
}

However to me this still seems like a hacky solution.