Mostly Javascriptless
September 26th, 2025
About a week ago, I started to really play around with css and in the time since then I have replaced most of the javascript on my website with it. You see, modern css is very capable in itself. Sure, some things still need js (for example, my feed reader pages), but things like theme toggles, dropdown menus, even simple point and click games* only need some fancy css work. How? Modern css contains a ton of selectors and conditionals. You can check for properties, you can check for child elements, you can check for properties of child elements. A dropdown menu can just be a checkbox and a div and some fairly simple css. Literally. Let me show you.
<style>
div{
display:none;
}
input:checked + div{
display:block;
}
</style>
<label for="test">Check for dropdown</label>
<input type="checkbox"/>
<div>Dropdown text</div>
I’m not kidding, that’s all. No javascript, no queryselectors, just two elements and some very minimal css. Now, I would recommend using classes instead of raw element selectors for some finer control, but you technically don’t need that.
You can even use a similar checkbox system to toggle themes. Now, disclaimer before we begin, if you want to save the theme selection, yeah, you would need some javascript, buuuuut it isn’t needed just for the selector and you can always add the javascript for saving it later. Themes are as simple as
<style>
:root{
color-scheme: light dark;
&:has(input:checked){
color-scheme: dark;
}
&:has(input:not(:checked)){
color-scheme: light;
}
color: light-dark(black,white);
background-color: light-dark(white,black);
}
</style>
<label for="test">Check to toggle theme</label>
<input type="checkbox" id="test"/>
That’s it, you’re done. The theme will now swap on toggle.
What else can you do with css? Animations. It is so easy to animate things in css. As an example,
<style>
.wavey {
position: relative;
}
.wavey span {
position: relative;
display: inline-block;
animation: animate 2s ease-in-out infinite;
animation-delay: calc(0.1s * var(--i));
}
@keyframes animate {
0% {
transform: translateY(0px);
}
20% {
transform: translateY(-20px);
}
40%,
100% {
transform: translateY(0px);
}
}
</style>
<div class="wavey">
<span style="--i:4">W</span>
<span style="--i:5">a</span>
<span style="--i:6">v</span>
<span style="--i:7">e</span>
<span style="--i:9">y</span>
<span style="--i:10"></span>
<span style="--i:11">T</span>
<span style="--i:12">e</span>
<span style="--i:13">x</span>
<span style="--i:14">t</span>
<span style="--i:15"></span>
<span style="--i:16">U</span>
<span style="--i:17">w</span>
<span style="--i:18">U</span>
</div>
Okay, I'll admit. This would look complicated from the outside. All it's doing is sending a wave effect through all of the letters. I'm not going to get into the specifics of how css animations work, but basically it's keyframe-based and each of those little "--i" style tags is a variable that, for us, tells it how much delay before the animation starts. In this case, it waits with a slightly higher delay for each letter (hence the span spam) and moves them up and then back down when it gets to their turn. This results in a wave. I use css animations on my web page for the marquee at the bottom (all it does is move the items left).
The short of it? Javascript has its purpose but that purpose no longer has to be animations, dropdowns, theme changers, or etc. We have css for that now and, because of that, websites can be friendlier to people who don't use javascript. I frequently have my noscript extension on and javascript heavy pages will sometimes just straight up refuse to load. Heavy js can also often bog down websites for people with slow connections and, while technically heavy css can do that too, you'd need a lot more of it than you would the equivalent javascript.
I hope you learned something, Breebee