Someone built an x86 CPU emulator using pure CSS, for science

Alfonso Maruccia

Posts: 2,553   +947
Staff
In context: Thanks to JavaScript, WebAssembly, and other modern web standards, it is now possible to run a wide range of applications directly in a web browser. Programmer Lyra Rebane went even further by (ab)using Cascading Style Sheets to emulate a partially functional x86 processor.

The recently unveiled x86CSS project aims to emulate an x86 processor within a web browser. Unlike many other web-based emulators, Lyra Rebane's implementation is written entirely in CSS. More precisely, the x86CSS page hosts a C program compiled with GCC into native 8086 machine code, which is then executed through CSS-based logic.

Using "pure" Cascading Style Sheets to emulate a processor is not a common programming approach. CSS is primarily used to control the visual presentation and layout of web documents and is traditionally considered one of the foundational technologies of the modern World Wide Web, alongside HTML and JavaScript.

As Rebane explains on the project's homepage, advanced CSS features such as if() statements, style queries, and custom functions have enabled CSS to behave more like a general-purpose programming language. However, these capabilities are currently available only in Chrome and other Chromium-based browsers, meaning x86CSS is unlikely to support Firefox or non-Chromium browsers in the near future.

The programmer notes that she did not use large language models or other forms of artificial intelligence in developing the project, explaining that she does not believe "you can build a project like this with an LLM."

The x86CSS emulator still relies on a small JavaScript component to provide clock synchronization for the CSS-based execution model. However, it can revert to an entirely CSS-based implementation if script execution is disabled or unavailable in the browser. The emulator's webpage also requires a minimal amount of HTML because there is no way to load a stylesheet without basic document structure.

Rebane notes that the emulator implements the original 16-bit instruction set of the Intel 8086 processor, while omitting some additional instructions and features to improve performance. The x86CSS code can execute third-party binary software, but users must build and compile their own customized version of the emulator.

Implementing a portion of the original x86 instruction set architecture (ISA) using CSS is technically impressive, although the resulting system is not a practical emulation environment. The project operates slowly and does not include the additional components typically required to run custom DOS software in a DOSBox-like runtime. Nevertheless, it is reportedly capable of "running" Horsle for reasons that are not entirely clear.

Permalink to story:

 
Maybe the AI doom and gloom will end this, but there was a while there where any stack of entry level developer resumes seemed to include some with little obvious enthusiasm or talent, leaving you to wonder if the degree or application was maybe more based on market/family pressure than actual applicant interest.

This is the kind of side project that conclusively demonstrates the reverse.
 
That why "AI" LLM would never be able to replace humans, it can't really think for itself and create something new. So far fake "AI" can only do what it has learned from others.
 
The purpose of this somehow escapes me.
You can make a x86 emulator with electromechanical relays, with vacuum lamps, even with pipes and valves, but what's the point?

Making x86 emulator with CSS requires an actual x86 CPU to process the CSS rules - so it's the real x86 emulating itself, but with a zillion extra layers of entirely unnecessary complexity.
WOW!

Oh, and I'm sure a LLM can easily recreate this nonsense.
 
That why "AI" LLM would never be able to replace humans, it can't really think for itself and create something new. So far fake "AI" can only do what it has learned from others.

What new thing has been created here? This is a perfect task for AI. Taking an existing solution and replatforming it into another language.
 
What new thing has been created here? This is a perfect task for AI. Taking an existing solution and replatforming it into another language.
Unless someone had done it before, AI would have no idea how to code x86 instructions into CSS.
The purpose of this somehow escapes me.
You can make a x86 emulator with electromechanical relays, with vacuum lamps, even with pipes and valves, but what's the point?

Making x86 emulator with CSS requires an actual x86 CPU to process the CSS rules - so it's the real x86 emulating itself, but with a zillion extra layers of entirely unnecessary complexity.
WOW!

Oh, and I'm sure a LLM can easily recreate this nonsense.
No it doesnt? It's emulated entirely within CSS in a web browser.

Did you actually read the article?
 
All you need is a proof the language is a Turing-complete language, and the ability to do that necessarily follows, you don't have to actually do it.
 
Wow, this article really captures the versatility of the snake whip! 🐍 I love how it combines precision, control, and flair—perfect for both beginners and experienced users. The tips on handling and safety were super helpful. Definitely adding this to my practice routine!
 
Back