Getting a list of all CSS color properties with jQuery

The list of CSS properties available is always changing, so the best way to get the list of values is by querying the brwoser.

In this technique, we grab all DOM elements on the page, get each CSS style, and filter to the list containing the word “color”, which gives us a pretty good list:

var elem = $('*')

function getStyles(i, v) { 
  var s = window.getComputedStyle(v); 
  
  var keys = []; 

  for (var i = 0; i < s.length; i++) { 
    keys[keys.length] = s.item(i); 
  } 

  return keys; 
}

var props = 
  elem.map(getStyles)
      .filter(
        function(i, v) { 
          return v.indexOf('color') > 0 
        });

$.unique(props);

["-webkit-text-fill-color", 
 "stop-color",
 "-webkit-text-stroke-color",
 "background-color",
 "-webkit-print-color-adjust",
 "-webkit-text-fill-color",
 "outline-color",
 "-webkit-column-rule-color",
 "lighting-color",
 "-webkit-text-emphasis-color",
 "-webkit-tap-highlight-color",
 "border-bottom-color",
 "border-right-color",
 "border-left-color",
 "-webkit-text-stroke-color",
 "-webkit-text-emphasis-color",
 "flood-color",
 "border-bottom-color",
 "border-left-color",
 "-webkit-text-emphasis-color",
 "-webkit-column-rule-color",
 "border-top-color",
 "-webkit-column-rule-color",
 "-webkit-print-color-adjust",
 "-webkit-text-emphasis-color",
 "border-top-color",
 "border-bottom-color",
 "border-top-color",
 "-webkit-print-color-adjust",
 "border-top-color"]