You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
66 lines
2.5 KiB
66 lines
2.5 KiB
9 months ago
|
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 cssVarCookies.css, it wraps the generated tr,
|
||
|
|
td and textareas inside a display:none unless hovered position fixed
|
||
|
|
table.
|
||
|
|
|
||
|
|
usage
|
||
|
|
|
||
|
|
1. Copy cssVarCookies.js and cssVarCookies.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
|