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 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

54

Reacties (54)

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?
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.
Het misbruikt een escape hatch naar een soort gelimiteerde JavaScript eval functie. Vandaar dat het ook niet ‘echt’ puur CSS beschouwd kan worden.
Misschien is dit niet de eerste gedachte van de ontwikkelaar, maar ik denk dat het emuleren van een pc in een CSS-file laat zien wat je met CSS kunt. Of in dit geval, wat je vanuit CSS kunt doen: een JavaScript starten en van daaruit verder gaan. CSS is (of was) 'slechts' een methode om de opmaak van een website te regelen.
Wat bedoel je hiermee?
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.
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
De laatste alinea geeft antwoord:
De enige reden om het CSS-bestand te bouwen was volgens Amer 'omdat het er niet was'.

[Reactie gewijzigd door kars noordhuis op 16 juli 2026 22:57]

Mijn vraag was meer retorisch bedoeld. Dit had ik uiteraard ook gelezen. Meestal is er bij dit soort projectjes toch wel iets interessants, nuttigs of educatiefs te ontdekken. Maar bij deze ontgaat het me echt.

Kan je een spijker in een plank slaan met een gummetje? Goh, nee, dat lukt niet. Maar wacht, ik ontwikkel een extra gladde en dunne spijker en een extra poreuze plank. Nu lukt het wel! Kost je wel een uur per spijker. En de spijker valt er daarna heel makkelijk weer uit. En het heeft me een jaar van m'n leven gekost om te ontwikkelen. Tja...
Hallo! Het is de maker hier. Stel je voor dat je een videogame speelt, of een Lego-set in elkaar zet. Het is een uitdaging, maar hij is zo ontworpen dat je kunt winnen, en je weet dat je het kunt. Dit project was spannend omdat ik echt niet wist of het überhaupt mogelijk was. Het is nog nooit eerder gedaan. Ik begrijp de vergelijking met een spijker in een plank slaan – dat is net zo arbeidsintensief en nutteloos. Maar het cruciale verschil is dat je weet dat je het met de spijker en de plank kunt doen. Er waren momenten in dit project dat ik wilde opgeven, maar iets zorgde ervoor dat ik doorging. En het uiteindelijk voltooien en het Doom te laten opstarten was een vreugdevol moment. Veel vreugdevoller dan een game uitspelen of een marathon lopen. Ik hoop dat dat ergens op slaat.
Het is net zo nuttig of nutteloos als een marathon lopen. Voor de eerste keer weet je niet of je het kan, en terwijl je ermee bezig bent is het op allerlei momenten ECHT niet leuk. Toch zijn er jaarlijks honderdduizenden die het doen.

Ieder z'n hobby?

Bedankt voor (de aanleiding voor) het leuke artikel, en leuk dat je hier ook meeleest :)
Wat is dat toch, die fixatie met Doom in al dit soort artikelen...
Op een elektrische tandenborstel vond ik tot nu toe toch wel de meest indrukwekkende :P
Kennelijk is Doom de ideale benchmark voor dit soort maffe projecten.
Moeten we niet een keer over stappen op crisis?

Dan weetje je zeker dat je over 200 jaar nog results kan vergelijken (en Doom wordt dan op een plank deeltje gespeeld)
Kan niet. Doom is:
  • Niet afhankelijk van een driver van je videokaart (die na een paar jaar niet meer werkt);
  • Niet afhankelijk van andere componenten (die na een paar jaar stuk gaan);
  • Geheel in C geschreven en dat is al best low level en ondersteunt toch bijna alle CPU-architecturen (waarbij andere programmeertalen een veel beperkter bereik/ondersteuning hebben).
Natuurlijk was dit niet serieus bedoeld.

Maar als opvolger die juist het tegenovergestelde heeft bereikt vond ik dat wel een leuke.

Doom= kan op alles
Crysis= zal de 5090 deze wel aankunnen?

En optimalisatie spelen zeker mee.

Drivers blijven wel werken hoor alleen de ondersteuning vervalt ivm nieuwe/andere hardware/software.
Of bedoelde je de videokaart?
Want de eerste videokaart, de 3dfx waar ik met gestoord veel plezier carmaggedon mee heb gespeeld doet het nog steeds.
En eigenlijk heb ik met videokaarten niet zoveel probleem.
En daarmee ook je tweede punt, mijn eerste pc je weet wel met die 3dfx die werkt ook nog steeds.
Na 30 jaar.

Eerlijk snap ik je eerste punten niet zo en het laatste punt neem ik graag van je aan, software is niet mijn ding...jaja lekkere tweaker he!
En is er een driver voor je 3Dfx Voodoo voor die electrische tandenborstel? Dat is precies het punt wat er gemaakt wordt.
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".
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
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.
Ik mis nu echt de + grappig. :P
Ja, dat kon vroeger wel. Ik mis die knop enorm :/
'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 :)
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]

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.

Om te kunnen reageren moet je ingelogd zijn