About this site
Two experiments with one rule: no JavaScript. A garden of outfits for one document, and a cabinet of things CSS isn’t supposed to do.
The garden, and where the idea came from
In 2003 Dave Shea started the CSS Zen Garden: one HTML file, and anyone could send in a stylesheet for it. It showed a generation of designers that the markup and the look could be separated, and that the look could be almost anything. It is still up, and still worth an afternoon.
This garden borrows the idea and nothing else. The document is our own, the Slopwright’s workshop manual; none of the Zen Garden’s HTML, words, ids or designs are used. All 34 outfits were designed by machine, for the Slopwright, and say so.
Ten of the outfits are places rather than page styles: the manual staged in a theatre whose curtains open as you scroll, a dive through the sardine tin, a lift through the Backrooms, a corridor, a pop-up book, a workbench in 3D, a day passing at the window. They use scroll-driven animations, view timelines, 3D transforms and animated @property values, all behind @supports: where a browser lacks one, the scene stands still in a finished state, and the text reads the same. Everything that moves stops when you ask for reduced motion. Moving from one outfit to another is a cross-document view transition where the browser has them; elsewhere it is an ordinary page load. The table below says which browsers did what when we checked.
Every outfit lives at its own address, /t/<name>/. Those pages are written by a build script from one source file, and are identical byte for byte except for the one <link rel="stylesheet">. The site’s check proves it on every run, along with no sideways scrolling on a phone and measured text contrast for every outfit. Try them on switches outfits in a frame, with links that target it.
Is CSS Turing complete?
Not on its own, and the honest answer takes three sentences.
Rule 110 is Turing complete. It is a one-dimensional cellular automaton: a row of cells, each on or off, where each cell’s next state depends only on itself and its two neighbours. Matthew Cook proved that, given an infinite row and a suitable repeating background pattern, it can simulate any computation.
HTML and CSS can compute one step of it. With checkboxes for cells and :has() for the rule, CSS works out which cells of the next row should be on. Our Rule 110 does exactly that, and the check compares every generation with a reference computed in JavaScript, inside the test only. A well-known earlier demonstration, by Eli Fox-Epstein, built Rule 110 from HTML and CSS; this one is our own build of the idea.
But CSS doesn’t loop. A selector can’t make a checkbox checked. Someone has to press a key or click for every cell that turns on, so a person (or a keyboard) is the clock. And the row here is sixteen cells wide, not infinite, so strictly it is a finite machine, like every real computer. So: CSS plus HTML plus a patient human is Turing complete in the same sense Rule 110 is. CSS alone computes one step and waits.
Browser support
Some exhibits use features that are new. Each one is behind @supports with a fallback that still works, or says plainly that it doesn’t. The second column is your browser, worked out by CSS as you read this. The third is what the site’s check found in real browsers on 2026-10-14.
| Feature | This browser | Checked | Without it | Used by |
|---|---|---|---|---|
:checked + ~ | YesNo | Chromium 149: yes Firefox 141: yes | Nothing to fall back from; every browser has had it for years. | Tabs, from radio buttons, Noughts and crosses, A slideshow that plays itself, The lamp, drawn, Rule 110 |
:target | YesNo | Chromium 149: yes Firefox 141: yes | Universal. | A modal with no script, The stockroom maze |
:has() | YesNo | Chromium 149: yes Firefox 141: yes | Without :has() it can’t work; the page says so instead of half-working. | Tooltips that know where they are, The big light, A form that tells you off, politely, Keeping score, A four-bit adder, Noughts and crosses, The stockroom maze, A slideshow that plays itself, Lamplight (outfit) |
<details name> | CSS can’t test this | Chromium 149: yes Firefox 141: yes | The drawers still open and close; more than one can be open at once. | One drawer at a time |
popover | YesNo | Chromium 149: yes Firefox 141: yes | The :target version below works everywhere. | A modal with no script |
anchor positioning | YesNo | Chromium 149: yes Firefox 141: no | The tip sits above the whole passage, positioned the old way, instead of beside its word. | Tooltips that know where they are |
scroll-snap | YesNo | Chromium 149: yes Firefox 141: yes | Universal. | A carousel on rails |
::scroll-marker | YesNo | Chromium 149: yes Firefox 141: no | Plain links to each slide do the same job. | A carousel on rails |
scroll-driven animations | YesNo | Chromium 149: yes Firefox 141: no | No bar; a line says it isn’t available. Nothing else depends on it. | Reading progress, Into the tin (outfit), Going down (outfit), The long corridor (outfit), Canopy (outfit) |
@property | CSS can’t test this | Chromium 149: yes Firefox 141: yes | Typed values can’t animate: the hands jump instead of turning, and the numbers don’t count. | Reading progress, A clock that can’t tell the time, Into the tin (outfit), A day at the bench (outfit), Weather in a teacup (outfit) |
:user-invalid | YesNo | Chromium 149: yes Firefox 141: yes | Errors show only when you send the form, from the browser’s own validation. | A form that tells you off, politely |
CSS counters | YesNo | Chromium 149: yes Firefox 141: yes | Universal. | A form that tells you off, politely, Keeping score, A four-bit adder, A clock that can’t tell the time, Going down (outfit) |
3D transforms | YesNo | Chromium 149: yes Firefox 141: yes | Universal. | Depth, On the bench (outfit), The long corridor (outfit), Pop-up book (outfit) |
container queries | YesNo | Chromium 149: yes Firefox 141: yes | The layout follows the window instead of its box. | Outfits |
view() timelines | YesNo | Chromium 149: yes Firefox 141: no | The scene starts in its finished state (curtains open, pages up) and stays there. | Curtain up (outfit), Pop-up book (outfit) |
cross-document view transitions | CSS can’t test this | Chromium 149: yes Firefox 141: no | Going from one outfit to the next is an ordinary page load, with no animation. | Curtain up (outfit), Into the tin (outfit), Going down (outfit), On the bench (outfit), The long corridor (outfit), Pop-up book (outfit), A day at the bench (outfit), Lamplight (outfit), Canopy (outfit), Weather in a teacup (outfit) |
conic and radial gradients | YesNo | Chromium 149: yes Firefox 141: yes | Universal. | The lamp, drawn, Lamplight (outfit), Canopy (outfit), Weather in a teacup (outfit) |
Who made it
A machine, for the Slopwright, like everything else on slopped.site. The rule of no JavaScript is checked, not promised: every exhibit is tested with JavaScript switched off, and the build refuses any page with a script or an inline handler. The one page that isn’t this site’s own is the not-found page, which every slopped.site shares and which does run a little script.
Without a script, some things are out of reach: this site can’t be installed as an app, can’t remember your choices between pages, and the outfit switcher can’t tell which outfit its frame is showing.