cssVarFilledCookies.js CC4r License _____ / \ \/_ \ _____________________________________ root { | | --underline-style: wavy; |--underline-style : wavy | --title-width: 10ch; |--title-width : 10ch | --src: url('image.png'); |--src : url('image.png')| --gradient-start: olive; |--gradient-start : olive | --gradient-end: brown; |--gradient-end : brown | } |____________________________________| __ \ /\ \_____/ cssVarFilledCookies.js will bake cookies with a filling of css variables, exposing them to the user. The changes made are stored in the local storage, allowing one to make persistant interface customizations. The styling happens within cssVarFilledCookies.css, it wraps the generated tr, td and textareas inside a display:none unless hovered position fixed table. demo martinlemaire.fr/cssVarFilledCookies.js/demo.html usage 1. Copy cssVarFilledCookies.js and cssVarFilledCookies.css in your project folder. 2. Inside the html page you would like to modify, import the js and css files like so: 3. Hovering the exclamation mark should display a table of declared css variables inside a root{} statement. example a css file with variables declared in this manner: root { --margin: 10px; --gutter: 5px; --background: white; --foreground: olive; } will dynamicaly generate the following html table:

--margin	10px
--gutter	5px
--background	white
--foreground	olive

Modifying the value from the textarea will store it in the local storage, if you reload or close the page, the changes will be kept. Note : using this technique, only the elements that are children of the body can be accessed, styling the element doesn't seem to be possible. contact@martinlemaire.fr