Css Properties of Current Page
This table shows all of the css properties embedded in this site's stylesheet, their purpose, and their current value. It also demonstrates their effect by styling the current row accordingly.
To get the properties it loops through all style names like this:
document.styleSheets[i].cssRules[j].style[k]
Looking for any style that starts with: "--";
To find the value of a css property, it uses, for example:
getComputedStyle(document.documentElement).getPropertyValue("--link");
To determine the 'purpose' of a style, it makes assumptions based on the property naming convention I seem to follow:
- Like '-width'? It's a width.
- Like '-shadow'? It's a shadow color.
- Like '-bg'? It's a background color
- Otherwise: it's a color.