|
|
|
|
cssVarFilledCookies.js
|
|
|
|
|
CC4r License
|
|
|
|
|
|
|
|
|
|
_____
|
|
|
|
|
/ \
|
|
|
|
|
css variables \/_ \ editable html table
|
|
|
|
|
_____________________________________
|
|
|
|
|
: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:
|
|
|
|
|
<link rel="stylesheet" href="cssVarFilledCookies.css">
|
|
|
|
|
<script defer src="cssVarFilledCookies.js"></script>
|
|
|
|
|
|
|
|
|
|
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:
|
|
|
|
|
|
|
|
|
|
<table>
|
|
|
|
|
<tr><td>--margin</td> <td><textarea>10px</textarea></td> </tr>
|
|
|
|
|
<tr><td>--gutter</td> <td><textarea>5px</textarea></td> </tr>
|
|
|
|
|
<tr><td>--background</td><td><textarea>white</textarea></td></tr>
|
|
|
|
|
<tr><td>--foreground</td><td><textarea>olive</textarea></td></tr>
|
|
|
|
|
</table>
|
|
|
|
|
|
|
|
|
|
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 <html></html> element doesn't seem to
|
|
|
|
|
be possible.
|
|
|
|
|
|
|
|
|
|
contact@martinlemaire.fr
|
