cssVarFilledCookies.js

A small piece of javascript exposing css variables on a webpage, allowing one to make local and persistent edits to them.
2.7 KiB

Raw Blame History

                         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:
        <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
2.7 KiB Raw Blame History

2.7 KiB

Raw Blame History
