The tool exists under many names : cssVarFilledCookies.js, cssVarLocalStorageEdit.js, shovel… the list might increase over time. It is released under CC4R.

                                     _____
                                    /     \
                                  \/_      \

  :root {                              ┌───────────────────────────────────┐¹
    --name : cssVarFilledCookies;      │ --name : cssVarFilledCookies      │
    --date : 2024 & 2025;              │ --date : 2024 & 2025              │
    --COLL : "    __,  __, _, ,_   ";  │ --COLL : "    __,  __, _, ,_   "  │
    --COND : "  /  / /  / / | /  \ ";  │ --COND : "  /  / /  / / | /  \ "  │
    --RE-  : " |    |    /__|_|__/ ";  │ --RE-  : " |    |    /__|_|__/ "  │
    --USE  : "  \___/\___/  | |\_/ ";  │ --USE  : "  \___/\___/  | |\_/ "  │
  }                                    └─────────────────────────────────◣─┘
                                         __                              █◣
                                  \       /|                              ╲
                                   \_____/

cssVarFilledCookies exposes css variables to the user — the person interacting with the page using a browser that supports javascript — over a hoverable menu¹.

It draws an interface from defined css variables inside a :root{…} statement appending them to the page. Changes from the user are stored in the local storage, allowing one to do persistent edits to the accessibility, look or function of a web page.

Being on the browsed page itself, it wishes to be a counter-proposal to the antagonism between users and developers. To some extent, it can replace the writing of small interfaces tweaking a document stylesheet.

usage

Hovering the :root{@} box at the top right of the screen should display a table of declared css variables.

One can edit a defined variable by editing input’s value. Alternatively, the arrow keys ↑ (UP) and ↓ (DOWN) increment or decrement the value under the cursor, it knows decimal, hexadecimal values and colornames.

Pressing Shift in combination with an arrow key amplifies the edit by 10.

Files

cssVarFilledCookies.js is the name of the repository, it contains :

installation

  1. Copy cssVarFilledCookies.js and cssVarFilledCookies.css in your directory.

  2. Inside the html document(s) 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>

On script load, the ui wrapped inside <section id="cvfc">…</section> is added to the dom.

example

css variables declared in this manner:

  :root {
    --door: #E22;
    --knob: solid 1ch;
    --nail: whitesmoke;
    --wall: skew(45deg);
  }

generate the following html table:

  <section id="cvfc">
    <p>:root{@}</p>
    <table>
      <tr><td>--door</td><td><input type="text" value="#E22">       </td></tr>
      <tr><td>--knob</td><td><input type="text" value="solid 1ch">  </td></tr>
      <tr><td>--nail</td><td><input type="text" value="whitesmoke"> </td></tr>
      <tr><td>--wall</td><td><input type="text" value="skew(45deg)"></td></tr>
    </table>
  </section>

Modifying the input’s value will update it in the local storage, changes are therefore kept on page close or reload.

Using this approach, only the children of <body> can be accessed, styling the <html> element doesn’t seem to be possible.

Removal of extension-generated css variables

Some web extensions generate css variables of their own which can clutter the interface. Those can be ignored by adding their prefix to the list of excluded patterns in the definition of filterEntriesWithCSSVariables().

releases

Todo

contact🐚ⓜⓐⓡⓣⓘⓝlemaire⸱fr