Ontwikkelaar propt complete 8086-pc in CSS-bestand van 300MB

Ontwikkelaar Ahmed Amer heeft CSS-DOS gemaakt, een complete pc in een CSS-stylesheet. Het CSS-bestand is maar liefst 300MB groot en bootst een pc na met een 8086-cpu, 640KB ram, een toetsenbord en een VGA-scherm. Het kan Windows 1.0, MS-DOS en zelfs DOOM draaien.

Amer erkent dat CSS dat css niet bepaald de ideale programmeertaal is voor het project, omdat ontwikkelaars de taal vooral gebruiken om websites op te maken. Zo kan CSS geen instructielijsten verwerken. In plaats daarvan definieert de programmeertaal eigenschappen zoals lettertype, grootte en kleur eenmalig en permanent.

Verder kan CSS ook geen variabelen op een later moment wijzigen en kunnen die variabelen niet naar zichzelf verwijzen. Daardoor stijgt de hoeveelheid code exponentieel. Amer heeft besloten de code daarom te genereren met een generatorscript.

De ontwikkelaar gebruikt de zelfgemaakte compiler Calcite om het bestand uitvoerbaar te maken in browsers. In theorie zou het al drie maanden duren om een DOOM-level te laden en zou de game met 0,00001fps draaien. Door Calcite kan de browser het CSS-bestand 200.000 keer sneller uitvoeren. Daarmee haalt DOOM een nog altijd niet zeer indrukwekkende framerate van 2fps.

Amer is kort over de reden om dit project te starten: "Ik maak me geen illusies: dit project was een ware kwelling om te maken en dient geen enkel praktisch doel", zegt hij. "Ik denk niet dat iemand de bongoman van Dark Souls ook maar heeft gevraagd waarom hij het deed." De enige reden om het CSS-bestand te bouwen was volgens Amer 'omdat het er niet was'.

DOOM in CSS

Door Imre Himmelbauer

Redacteur

16-07-2026 • 17:25

20

Reacties (20)

Sorteer op:

Weergave:

Ik begrijp nog niet helemaal (in lekentaal) hoe hij css nu heeft weten om te buigen naar een programmeertaal. Als iemand dit leuk zou kunnen verduidelijken haha?
In de CSS standaard is het concept @ function geïntroduceerd.

Erg handig om styles te manipuleren maar volgens mij niet helemaal goed over nagedacht, het laatste wat je wilt in een browser (zou ik denken dan) is nog een stackmachine introduceren.

Wordt nog leuk als er interactie komt met de javascript engine.
Hij laat hier zien welke beperkte 'programmeer' tools je kan gebruiken in CSS. Zoals ik het begrijp heb je een calc() functie, een gelimiteerde var en beperkte if-statement. Vandaar ook de 300MB gegenereerde source code.
Het misbruikt een escape hatch naar een soort gelimiteerde JavaScript eval functie. Vandaar dat het ook niet ‘echt’ puur CSS beschouwd kan worden.
Ik heb sterk het idee dat er een geheime marketplace is voor journalisten zodat je in komkommertijd een artikel kunt bestellen volgens het template "Ontwikkelaar bouwt X die doom kan draaien in Y".
Haha, ik weet niet wat het loon is van Tweakers reporters maar wel dat het verliesgevend is qua tijd als je dit kan, zelfs in een arm land.
Hahaha ik zou hier oprecht budget voor willen vrijmaken, dat zou echt een uitkomst zijn!
Zoek met terugwerkende kracht op .geek in de meuk submits
Wacht effe. Dus hij emuleert een PC in CSS. Maar omdat de resulterende massive CSS-file te langzaam “draait” in een browser, bouwt hij zijn eigen CSS “compiler”. Wat is dan nog het “voordeel” om het in CSS te schrijven? Dit klinkt allemaal echt als een heel vervelende bezigheidstherapie.
Als er .geek voor staat kun je er vanuit gaan dat er nooit een praktisch nut is. Het heeft vrijwel altijd een hoog "omdat het kan" gehalte
CSS-DOS: the AND operation, plus auxiliary @functions.

Extracted verbatim from the Kiln emitters (kiln/css-lib.mjs, kiln/patterns/flags.mjs).

Dependency tree:
--andFlags16/--andFlags8 (full FLAGS word after AND/TEST)
-> --and (16-bit bitwise AND, self-contained)
-> --parity (PF, 256-entry even-parity table over the low byte)
-> --lowerBytes
-> --bit (single-bit extract, for SF)
-> --rightShift
--and8 = --and truncated to 8 bits via --lowerBytes */
Van hier (op de "Find out how it works"-knop klikken). Om een idee te krijgen van hoe ver dit gaat. Zie ook de bijgaande code.

Volgende mij mag dit wel een cheatcode voor deze versie van Doom genoemd worden ;)

Wel mooi om iemand in deze tijd nog zulke dingen te zien doen. Is toch een combinatie van oude kennis met nieuwe technieken.

[Reactie gewijzigd door Stukfruit op 16 juli 2026 18:03]

Wat is dat toch, die fixatie met Doom in al dit soort artikelen...
'omdat het kan'.

Eerlijk doet het me denken aan Doom op 1 van mijn eerste echte PC's, een PS/2 model 30, die draaide deze game ook ongeveer met die framerate :D
Jemig, hoe kom je erop. Ik dabble regelmatig in CSS, ben geen fan. Juist omdat CSS declaratief is, maakt dit het extra knap.
Toen ik ICT studeerde zeiden we in de klas altijd: Verveling baart kunst! Ik vind dit wel een mooi voorbeeld daarvan :)
Leuk. Maar een 8086 CPU kan geen DOOM draaien. Daar is echt een 386+ CPU voor nodig. Dus een echte 8086 CPU zal het niet emuleren.
Oeps.

Ik kan me vergissen maar meen dat CSS ooit voor stijl is bedoeld en niet voor executeren code, laat staan een 8086 emulator.

Kunnen we dus een hoop misbruik van verwachten..

Om te kunnen reageren moet je ingelogd zijn