Introduction: When CSS Becomes a Programming Language
Let's be honest—when you think about CSS, you probably picture styling buttons, creating layouts, or maybe animating a hover effect. You don't think about running compiled C code. Yet in 2026, that's exactly what happened when a developer shared their x86 CPU emulator built entirely in CSS. No JavaScript. No WebAssembly. Just cascading style sheets executing 16-bit x86 assembly.
The original Reddit post sparked genuine disbelief—413 upvotes and 48 comments ranging from "This is insane" to "But why?" and "How is this even possible?" The project, hosted at lyra.horse/x86css/, represents one of those beautiful, impractical experiments that pushes our understanding of what web technologies can do. It's the programming equivalent of building a car out of toothpicks—technically impressive, functionally questionable, but undeniably fascinating.
In this article, we'll break down exactly how this CSS CPU emulator works, address the specific questions and concerns raised in the original discussion, and explore what this means for web development moving forward. Whether you're a seasoned developer or just curious about tech's outer edges, there's something here that will make you rethink what's possible with the tools we use every day.
The Original Project: What Actually Happened Here?
The developer's approach was deceptively simple in concept, mind-bending in execution. They used GCC to compile C code into 16-bit x86 assembly, then loaded that binary into a CSS-based emulator. The emulator itself uses CSS counters, custom properties, and complex selector logic to simulate CPU operations like memory addressing, arithmetic, and control flow.
From the Reddit comments, the immediate reaction was a mix of awe and skepticism. One user asked, "But does it actually execute instructions, or is it just displaying pre-calculated results?" Another commented, "This feels like using a screwdriver to hammer nails—impressive you made it work, but why?" These are exactly the right questions to ask.
The answer lies in how CSS has evolved. What started as a simple styling language now includes features that, when creatively abused, can perform computation. CSS counters can act as registers. The :checked pseudo-class can create state machines. Complex selector chains can implement logic gates. It's not efficient—it's not even practical—but it's technically Turing complete, which means in theory, you could compute anything with it.
What makes this particular implementation special is its connection to real hardware architecture. The developer didn't just create a theoretical CSS computer—they specifically targeted the x86 instruction set, which means you could theoretically run actual compiled programs (albeit extremely slowly and with severe limitations).
How CSS Can Emulate a CPU: The Technical Breakdown
Let's get into the weeds a bit. Traditional programming languages work with variables, loops, and conditional logic. CSS wasn't designed for any of these things. So how do you simulate a CPU without them?
The secret sauce is in three CSS features that most developers rarely use to their full potential. First, CSS counters (counter-increment, counter-reset) can store and modify numerical values. In the emulator, these act as CPU registers and memory locations. Each counter represents a specific piece of the CPU's state.
Second, the :checked pseudo-class on radio buttons or checkboxes creates persistent state. By associating different CSS rules with different checked states, you can build what's essentially a finite state machine. This handles the "control flow" of the emulator—determining which instruction to execute next based on current conditions.
Third, complex selector chains with sibling combinators (~) and attribute selectors can implement logical operations. For example, selecting an element based on multiple conditions creates AND logic. The :not() pseudo-class provides NOT operations. It's incredibly verbose compared to if (a && b) in JavaScript, but it works.
One Reddit commenter nailed it: "This is basically using CSS as a giant lookup table where each possible state has pre-defined styling rules." And they're right—the emulator works by mapping every possible CPU state to specific CSS rules that update counters and change which elements are displayed. It's computation through declaration rather than execution.
Performance Realities: Why You Wouldn't Actually Use This
Here's where we need to get practical. Several Reddit comments expressed concern about performance, and they were absolutely correct to do so. The CSS emulator is fascinating as a proof of concept, but it's terrible as an actual tool.
First, speed. Or rather, the lack of it. A modern JavaScript engine can execute billions of operations per second. This CSS emulator might manage a few instructions per second—if that. Every "instruction" requires the browser to recalculate styles, reflow elements, and repaint the page. It's computationally expensive in all the wrong ways.
Second, memory limitations. CSS counters have implementation-defined limits (usually around 2^31), and the emulator needs a separate counter for each register and memory location it simulates. The original project handles 16-bit x86, which means 64KB of addressable memory. Simulating that entirely with CSS counters would be... problematic, to say the least.
Third, development complexity. Writing this emulator required thinking about computation in a completely alien way. One commenter noted, "The mental overhead of programming like this must be insane." They're not wrong. Debugging would involve inspecting computed styles rather than setting breakpoints, and "stepping through code" would mean manually triggering CSS rule applications.
So why build it at all? The same reason people climb mountains—because it's there. Because it tests the boundaries of what's possible. Because sometimes the most valuable thing you learn from a project isn't how to build something useful, but how to think about problems differently.
The JavaScript Question: Why Avoid It Entirely?
This was perhaps the most common question in the original discussion: "But why not use JavaScript?" followed closely by "What's the point of avoiding JavaScript when it's built into every browser?"
The developer's choice to exclude JavaScript entirely is what makes this project interesting rather than just another web-based emulator. It's a constraint that forces creativity. In web development, we often reach for JavaScript by default—it's our hammer, and every problem looks like a nail. Removing that tool forces us to reconsider what our other tools can actually do.
There's also an educational aspect. By implementing a CPU emulator in CSS, the project reveals aspects of both CSS and CPU architecture that might otherwise remain abstract. You can't take shortcuts when you're building logic gates from CSS selectors—you have to understand exactly how they work.
That said, several commenters raised valid concerns about accessibility and practicality. A pure-CSS implementation means no keyboard navigation, no screen reader support, and limited interactivity. These aren't just nice-to-haves—they're requirements for real-world applications. The project serves as a reminder that while we can push technologies beyond their intended uses, we shouldn't necessarily do so in production.
Personally, I see value in both perspectives. The "why not JavaScript" crowd is right about practical applications. But the "because we can" crowd is right about exploration and discovery. The web needs both—the pragmatists who build usable tools and the explorers who show us what might be possible tomorrow.
What This Teaches Us About CSS in 2026
CSS has come a long way since its early days. What started as a simple way to add colors and fonts has evolved into a surprisingly powerful language. This emulator highlights several features that have transformed CSS from a styling tool into something approaching a programming environment.
Custom properties (CSS variables) have been a game-changer. They allow values to be computed, inherited, and modified dynamically. In the emulator, they likely serve as the "wiring" between different components, passing values from registers to ALU simulations to memory controllers.
The calc() function provides mathematical operations. While limited compared to a full programming language, it can handle the arithmetic needed for basic CPU operations. Combined with custom properties, it creates a primitive but functional computation system.
Perhaps most importantly, CSS now has better state management than ever before. The :has() selector (finally well-supported in 2026) allows parent selection based on child states, creating more complex conditional logic. Combined with :checked and other pseudo-classes, you can build surprisingly sophisticated state machines.
One Reddit commenter made an insightful observation: "This isn't about replacing JavaScript. It's about understanding that CSS is more powerful than we give it credit for." And they're right. Most developers use maybe 20% of CSS's capabilities. Projects like this force us to explore the other 80%.
Building Your Own CSS Experiment: A Practical Guide
Inspired to try something similar? Here's how to approach building your own CSS-based computational project without losing your sanity.
Start small. Don't try to emulate an entire CPU right away. Begin with a single logic gate—implement an AND or OR gate using CSS selectors. Use checkboxes for inputs, and style a label based on their combined states. It sounds trivial, but it teaches you the fundamental pattern of CSS-based computation.
Embrace the declarative mindset. In imperative programming (like JavaScript), you specify steps: "Do this, then do that." In CSS, you declare conditions: "When these things are true, look like this." It's a different way of thinking about problems. One Reddit commenter suggested imagining you're writing a giant switch statement where each case is a CSS rule—that's actually pretty accurate.
Use the right tools for visualization. Since you can't use console.log(), you'll need visual feedback. Change colors, borders, or content properties to reflect internal states. The content property with attr() or counter() can display values directly in the page.
If you're tackling a larger project and need to generate complex CSS rules programmatically, consider using a preprocessor like Sass or a build script. Writing thousands of selector rules by hand would be torture. As one experienced developer on the thread noted, "The real magic here isn't writing the CSS—it's writing the code that writes the CSS."
And if you find yourself needing to scrape documentation or examples for similar projects, tools like Apify's web scraping platform can help automate the collection of examples and techniques from across the web. Just remember to respect terms of service and copyright when gathering inspiration.
Common Questions and Misconceptions
"Is this actually useful?"
Not in the traditional sense. You wouldn't use this to run actual software. But it's incredibly useful for understanding CSS's capabilities and limitations. It's a teaching tool, a conversation starter, and a boundary test.
"Does this mean CSS is Turing complete?"
Yes, with certain features enabled. CSS combined with HTML forms (checkboxes, radio buttons) has been proven Turing complete. This emulator serves as additional evidence. That doesn't mean you should write your next web app in CSS, but it does mean the theoretical capability exists.
"How does I/O work without JavaScript?"
Limited forms, at best. Checkboxes and radio buttons provide input. The content property and visible styling changes provide output. For anything more complex, you'd need JavaScript. This is why the emulator is more demonstration than application.
"What about browser compatibility?"
Surprisingly good for a project like this. The CSS features used are well-established and supported across modern browsers. The real compatibility issue isn't with CSS—it's with the mental model required to understand what's happening.
"Could this be optimized?"
Marginally, but you'll quickly hit fundamental limits. CSS wasn't designed for computation, so you're fighting the language every step of the way. Some Reddit commenters suggested using CSS Houdini for lower-level access, but that requires JavaScript to register the Houdini components, defeating the "no JavaScript" constraint.
The Bigger Picture: What This Means for Web Development
Projects like this CSS CPU emulator matter beyond their immediate impracticality. They push boundaries, reveal hidden capabilities, and inspire innovation in unexpected directions.
First, they demonstrate the importance of understanding your tools deeply. Most developers know CSS at a surface level—enough to get the job done. But truly mastering a technology means knowing not just what it's designed for, but what it's capable of when pushed beyond those designs. This is why I always recommend having a few CSS reference books on hand, even in an age of online documentation.
Second, they highlight the creative potential of constraints. By forbidding JavaScript, the developer was forced to find solutions in unexpected places. This is a valuable mindset for any developer—when your usual approach is blocked, what alternatives exist that you haven't considered?
Third, they serve as excellent teaching tools. Explaining how a CPU works using JavaScript might make sense to programmers, but showing how those same concepts map onto CSS selectors and counters forces a different kind of understanding. It's like translating a poem into another language—you discover nuances in both languages you never noticed before.
Looking toward the future, projects like this suggest that the lines between styling, content, and logic might continue to blur. We already have CSS-in-JS and JS-in-CSS approaches. Maybe future web standards will embrace this convergence more formally.
Conclusion: The Value of Beautifully Impractical Experiments
The CSS x86 emulator won't change how we build websites. It's too slow, too complex, and too limited for practical use. But that's not why it matters.
It matters because it shows what's possible when someone looks at a tool and asks, "What else can this do?" It matters because it inspires other developers to push boundaries in their own work. And it matters because in an industry increasingly focused on practical outcomes and business value, we still need space for pure exploration.
As one Reddit commenter perfectly summarized: "This is the web dev equivalent of performance art—it's not about building something useful, it's about making you think differently about the materials."
So take a lesson from this project. The next time you're working with CSS—or any technology—ask yourself what hidden capabilities you might be overlooking. Try building something intentionally impractical. Share it with others. You might not create the next breakthrough framework, but you'll almost certainly learn something valuable in the process.
And if you need help bringing your own experimental web project to life but lack specific skills, remember that platforms like Fiverr's community of creative developers can connect you with specialists who think just as outside the box as the CSS emulator's creator.
The web is built on both practical tools and impractical experiments. We need both to move forward. Here's to the next beautifully useless, technically brilliant project that makes us all rethink what's possible.
