1

For example, the CSS cursor property has the following allowed values: url | auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out | grab | grabbing

And I need to have them all (barring url maybe) in an array in JS.

The question is, how to create such an array? Ofc I could hardcode it, but if in the future another allowed value is added, or a value gets deprecated or removed... well, is there any way provided by the language to get such an array?

Aside, of course, for fetching this from some docu site like MDN or even from the standard webpage, which would be an overkill.

  • 1
    Only real way is a list one needs to maintain. – epascarello Jul 24 '17 at 20:19
  • Nope, as far as I know, there's no way to fetch a list of valid values for a style, you'd have to hardcode it with a list – adeneo Jul 24 '17 at 20:20
  • 1
    Take a look here: https://stackoverflow.com/questions/11219691/list-of-all-css-properties-and-allowed-values – Woodrow Jul 24 '17 at 20:24
  • 1
    or probably https://stackoverflow.com/questions/1471118/how-can-i-get-list-of-all-element-css-attributes-with-jquery – Nicolas Epaminonda Jul 24 '17 at 20:34
  • In addition to my answer, depending on what you're trying to do, you might want to checkout a CSS parser. Tab Atkins has one on his GitHub. – jhpratt Jul 24 '17 at 20:39

2 Answers2

1

Unfortunately the only way is to hard code it or scrape a webpage. JavaScript doesn't have any native function that allows for something like this.

Something to remember, though, is that many properties, like height, width, etc. accept any number of values.

jhpratt
  • 6,841
  • 16
  • 40
  • 50
1

Don't know if you're using PHP or not, but here is one way you could scrape a webpage that has this info to get the values for each CSS property. Obviously would probably want to get permission from the site so you aren't hammering their server by accessing the properties pages, as you can see I just limited to 10 results below. With the "ob" functions, not sure if it's the most regal of solutions..

<?php
ini_set('max_execution_time', 600);
ob_end_clean();
ob_implicit_flush(true);
libxml_use_internal_errors(true);

function getValuesForElement($element) {
    $valueArray = [];
    try {
        $dom = new DOMDocument();
        $dom->prevservWhiteSpace = false;
        $dom->loadHTMLFile('http://css-infos.net/property/' . $element);
        $data = $dom->getElementsByTagName('code');
        foreach($data as $css) {
            $val = preg_replace("/\s+/S", "", $css->nodeValue);
            if(!empty($val)) {
                $valueArray[] = $val;
            }
        }
    } catch(Exception $e) {

        // Log error..

    }

    return $valueArray;
}

function getElements() {


    try {
        $i = 0;
        $elementsArr = [];
        $dom = new DOMDocument();
        $dom->prevservWhiteSpace = false;
        $dom->loadHTMLFile('http://css-infos.net/');
        $data = $dom->getElementsByTagName('li');
        foreach($data as $css) {
            if($i === 10) {
                break;
            }
            $nodeVal = $css->nodeValue;
            if($nodeVal == "Webkit CSS properties") {
                continue;
            }
            $elementsArr[$nodeVal] = getValuesForElement($nodeVal);
            echo "getting <strong><em>".$nodeVal."</em></strong> values..\n";
            $i++;
            sleep(1);
        }
    } catch(Exception $e) {

        // Log error..

    }

    print_r($elementsArr);
}

echo "<pre>";
getElements();
die();
?>
Woodrow
  • 2,740
  • 1
  • 14
  • 18
  • CSS specs is regularly updated, but the list in css-infos.net isn't updated and using that is not recommended. For full and updated list see [w3.org/TR/2021](https://www.w3.org/TR/2021/NOTE-css-2021-20211231/) – SAMPro Feb 03 '22 at 03:43