the no-JavaScript necronomicon
modified February 9, 2021.A book of CSS maledictions. A song for the glory and abuse of CSS. A perverse guide for the day-to-day CSS reprobate. Here I collect a bunch of links about implementing traditionally-JS features without using JS.
- Toggles with saved state: Embed a hidden checkbox somewhere in your page, and make the toggle button a
<label>tag. Write CSS to style your element one way when the checkbox is:checked, and another when the checkbox is not:checked. Clicking the<label>activates the toggle. Since most browsers save checkbox state when navigating, you get this toggle state saved for free. - Lazy-loading images with blur preview: Couldn’t find the link for this post, but the idea was to deliver the image as a CSS background. Have the initial background be the low-res blurred version, but write CSS to animate the background using the high-res version as the second keyframe, with an instantaneous timing function. As a result, the low-res keyframe is immediately replaced with the second high-res keyframe when it loads.
- Live server push without JS: The idea is to serve a video (specifically, MJPEG) which lazily fetches its later frames. Then hook up your server to send future frames dynamically. The end effect is an image that updates automatically as the server pushes content in the form of video frames. The example given is a no-JS counter which shows the current number of visitors on the site.
- Round or take mod of a numeric CSS variable: generally you can only simulate rounding if you can truncate, and you can’t truncate with
calc. Unless you multiply and divide by the smallest positive number representable by a double, that is:--shf: 4.9406564584124654e-324;. The same trick can be used to perform modulo. It’s super cursed, so here, the equivalent ofcalc(a mod b)is:
--a-mod-b: calc(var(--a) - (var(--a) / var(--b) * var(--shf) / var(--shf) * var(--b)));commands.md