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.
clemtre
9ccdfc451e
|
9 months ago | |
|---|---|---|
| LICENSE | 9 months ago | |
| README | 9 months ago | |
| cssVarFilledCookies.css | 9 months ago | |
| cssVarFilledCookies.js | 9 months ago | |
README
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