javascript-free workarounds i learned

i just wrote a blog post about my site turning one, and i explained how my "upbringing" as a dark web "web developer" (used quotation marks because i'm in no way shape or form close to an actual web developer, but i do my fucking best.) made me keep javascript to a minimum, even here on the clearnet.

it was both a learning experience and a real mindfuck. i mean, who knew that you could do so much shit with html and css only? but yeah, i had to learn and come up with all sorts of workarounds to get stuff done without relying on some fancy ass javascript.

one of them, albeit basic, was making a toggleable menu with a button using HTML and CSS only.

normally people use some javascript to make a dropdown menu that has a menu that can be changed, updated and modified from just one place, the script file.

well, fuck that noise. with the power of a heavily styled <details> tag and an iframe, you can make a toggleable meny that doesn't rely on any javascript at all.

it's pretty simple, you remove the list-style-type of the details tag, style it so it resembles a button, and modify its :active state so that when it's clicked it gives off the feeling of a button being pressed.

add a <div> that contains an iframe which points to a hidden page with a navigation menu for the site and you're done!

another cool workaround i came up with, but never actually used because i didn't really need it most of the time, was a workaround for url-based CSS styling without the need of different stylesheets.

because usually, the normal idea of page-based styling is dynamically injecting CSS rules based on the url of the page. there was a css at-rule which helped you do just that, but it unfortunately never saw the light of day, it was only partially supported by firefox 61, but it was dropped shortly after.

but the workaround i would have used was simple: using the :root pseudoclass, which represents the html element.

in that pseudoclass, you can declare variables using this syntax: --variable-name: value; the value can be anything, a color, a string, etc. (you can also put some rules in there).

so, with this in mind, you could declare variables using the :root pseudoclass and normal CSS classes. the variables' names would remain the same, but the value would change, essentially being able to change styling based on the page.

here is an example:

:root { /* variables for any page */
	--main-border: 2px solid black;
	--main-color: black;
}

:root.blog { /* styling for a page whose root element (html) has the "blog" class */
	--main-border: 3px dashed white;
	--main-color: white;
}

remember to keep the variable names the same!

to make this work, you have to change the class of the <html> element of the page, in this example, we used :root.blog.

in the html code for the blog page, you add class="blog" to the html element, which will then switch to using the other values of the variables already defined.

in the end, many workarounds included using iframes to make lots shit work, god bless them.

levant's cyberspace

javascript-free workarounds i learned