The list of CSS properties available is always changing, so the best way to get the list of values is by querying the brwoser.<\/p>\n
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:<\/p>\n
\nvar elem = $('*')\n\nfunction getStyles(i, v) { \n var s = window.getComputedStyle(v); \n \n var keys = []; \n\n for (var i = 0; i < s.length; i++) { \n keys[keys.length] = s.item(i); \n } \n\n return keys; \n}\n\nvar props = \n elem.map(getStyles)\n .filter(\n function(i, v) { \n return v.indexOf('color') > 0 \n });\n\n$.unique(props);\n<\/pre>\n\n[\"-webkit-text-fill-color\", \n \"stop-color\",\n \"-webkit-text-stroke-color\",\n \"background-color\",\n \"-webkit-print-color-adjust\",\n \"-webkit-text-fill-color\",\n \"outline-color\",\n \"-webkit-column-rule-color\",\n \"lighting-color\",\n \"-webkit-text-emphasis-color\",\n \"-webkit-tap-highlight-color\",\n \"border-bottom-color\",\n \"border-right-color\",\n \"border-left-color\",\n \"-webkit-text-stroke-color\",\n \"-webkit-text-emphasis-color\",\n \"flood-color\",\n \"border-bottom-color\",\n \"border-left-color\",\n \"-webkit-text-emphasis-color\",\n \"-webkit-column-rule-color\",\n \"border-top-color\",\n \"-webkit-column-rule-color\",\n \"-webkit-print-color-adjust\",\n \"-webkit-text-emphasis-color\",\n \"border-top-color\",\n \"border-bottom-color\",\n \"border-top-color\",\n \"-webkit-print-color-adjust\",\n \"border-top-color\"]\n<\/pre>\n","protected":false},"excerpt":{"rendered":"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: … <\/p>\n