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.

text-align can take only left, right, center, justify, start. bar is invalid for text-align — mohamedrias
– mohamedrias, Commented Apr 18, 2015 at 4:53
You mean detect appended Maincontent_ etc. to your control? — Vikrant
– Vikrant, Commented Apr 18, 2015 at 4:54
I don't know what Maincontent_ is, I googled it to no avail. — Erik
– Erik, Commented Apr 18, 2015 at 5:06
At the very least, the developer tools in Firefox and Chrome show that they do store a list of supported keyword values somewhere internally. However, whether you can access that list of values is another story... — BoltClock
– BoltClock, Commented Apr 18, 2015 at 5:34

jeffjenx · Accepted Answer · 2015-04-18 06:06:33Z

3

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

edited Apr 18, 2015 at 6:06

answered Apr 18, 2015 at 5:35

jeffjenx

17.6k6 gold badges63 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Erik Over a year ago

the CSS.supports method is what I was looking for, just a shame it isn't widely supported. Thanks a bunch!

BoltClock Over a year ago

@Erik: CSS.supports() doesn't give you a list of supported values - it tests a property-value combination that you have to supply yourself. Except the premise of your original question is that you don't know these values in advance.

Erik Over a year ago

I didn't put it in the title, but from the beginning I asked if there was a way to check if a value was valid. It seems like there isn't any regular way to get the list of possible values. This answer kinda works for me cause I can use CSS,suports() when it is available and use a fallback when it is not.

MD Sayem Ahmed · Accepted Answer · 2015-04-18 05:16:15Z

1

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.

edited Apr 18, 2015 at 5:16

answered Apr 18, 2015 at 5:00

MD Sayem Ahmed

29.3k27 gold badges115 silver badges183 bronze badges

3 Comments

Erik Over a year ago

I can't hardcode the list of valid values as it changes depending on the browser used.

MD Sayem Ahmed Over a year ago

@Erik: You can list all the browser-specific allowed values, and then get the right one based on browser detection. As far as I know, there is no option in JavaScript which will automatically give you the allowed values for a certain css property.

jeffjenx Over a year ago

I don't think it is possible to look up the validity of a CSS property's value in JavaScript, without using a library that maintains a list of validation logic. If you don't want to write your own, you could potentially include the CSSLint GitHub with your project, since that is exactly what they are doing.

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related