| 2025-11-16 | discussion |
| 2025-11-16 | ? |
| 2025-11-16 | Merge branch 'main' of https://git.vvvvvvaria.org/clemtre/cssVarFilledCookies.js yes |
| 2025-11-16 | rm woff |
| 2025-11-16 | media print; wip reset button; #cvfc {width:default} |
| 2025-11-14 | doc rewrite |
| 2025-10-24 | ↓ and ↑ allow for incr/decrement value of colorname, hex, int and float; shift =* 10 |
| 2025-09-20 | hello ? |
| 2024-10-24 | rm cssVarCookies.css |
| 2024-10-24 | rm index.html? style.css |
| 2024-10-24 | .gitignore + update css |
| 2024-03-07 | :root{@} |
| 2024-03-07 | :root |
| 2024-02-21 | var edits |
| 2024-02-21 | vars ++ |
| 2024-02-19 | padding |
| 2024-02-19 | readme |
| 2024-02-19 | typo |
| 2024-02-19 | demo |
| 2024-02-19 | typo |
| 2024-02-19 | cssVarFilledCookies |
| 2024-02-19 | init |
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.
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.
cssVarFilledCookies.js is the name of the repository, it contains :
Copy cssVarFilledCookies.js and cssVarFilledCookies.css in your directory.
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.
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.
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().
early 2024 cssVarFilledCookies.js, init in the back of a carpool
may 2024 shovel, wrapped inside a web extension allows the tool to be carried along one’s web navigation. Written during Declaration residency with Doriane Ungual and Daniel Murray → extension.shovel TODO merge ?
september~november 2025 variable type recognition for decimals, hex and colornames. Reformating of the documentation as README.sh generating html and plain text from README.md.
control key.