This presentation explores the "CSS crimes" subculture, a practice of utilizing Cascading Style Sheets (CSS) to create complex, interactive games and simulations within restricted environments, such as sanitized social media posts. The speaker, a security researcher, demonstrates that CSS is functionally a programming language capable of state management, boolean logic, and even CPU simulation without the use of JavaScript.
The talk details specific technical exploits including the use of the <details> and <summary> elements for state toggling, "width hacking" for spatial navigation and color cycling, and the implementation of logic gates via checkboxes and radio buttons. A primary case study, "CSS Clicker," illustrates advanced concepts such as Gray code-based state machines for efficient counting, hidden iframes for audio playback, and grid-based hover detection for mouse-tracking animations. The presentation concludes with an analysis of CSSβs esoteric capabilities, including network data processing and the security implications of CSS-based fingerprinting and the current lack of effective sanitization tools.
Technical Analysis: Implementing Logic and Games via Pure CSS
0:00 CSS as a Programming Language: The speaker establishes the premise that CSS qualifies as a programming language, leveraging its ability to handle complex logic and state.
1:46 Keyframe Hijacking: In sanitized environments (like the former platform Cohost) where style tags are stripped, users can "hijack" existing global keyframes to create animations. By applying local transforms to elements targeted by global animations, users can manipulate movement without defining new @keyframes.
4:25 State Management via <details>: The <details> and <summary> elements serve as the primary mechanism for "point-and-click" interactivity. By styling these elements and using absolute positioning, developers can create UI windows, adventure game paths, and inventory systems.
6:44 Width Hacking and Color Cycling: Interactive "pixels" are created by nesting summaries. As a details element opens, it alters the width of the container, shifting a horizontal block of colors to reveal a specific "pixel" color. This relies on the calc() function and percentage-based positioning.
9:05 2D Movement Mechanics: Top-down navigation is achieved by layering controls. Negative percentage values in a calc() function allow for bidirectional movement (e.g., swapping the order of summary elements to move left vs. right).
11:22 Interactive Properties and Counters:
The resize property combined with overflow creates interactive sliders and 3D environment rotators.
CSS Counters are used to display numeric data (scores) by calculating the dimensions of a container and applying modulo and round operations.
13:04 Randomness and SVG Exploits: Random values are generated by clicking on elements during a high-speed animation cycle. SVGs used as backgrounds can contain their own internal keyframes and media queries, bypassing parent document restrictions.
15:06 "CSS Clicker" Logic: A full-scale game built without JavaScript. It utilizes the "checkbox hack" where the :checked pseudo-class acts as a boolean IF statement to trigger styles on sibling or descendant elements.
18:12 CSS Logic Gates: Checkboxes and CSS variables are used to reconstruct standard logic gates (AND, OR, NOT). Labels are utilized to trigger these checkboxes from anywhere on the page via the for attribute.
19:48 Gray Code State Machines: To manage numeric increments efficiently, the speaker suggests using Gray code (where only one bit changes per increment) rather than standard binary to avoid requiring simultaneous user inputs for state changes.
21:07 Economic Simulation: An "upgrade store" uses width hacking. As "money" (represented by container width) increases, it physically moves upgrade buttons into the clickable viewport. The clamp() function converts these widths into binary "visible" or "hidden" states.
23:36 Audio Playback via Iframe: Audio is triggered without JavaScript by using anchor tags with a target attribute pointing to a hidden iframe, forcing the browser to load and play MP3 files within that frame.
24:11 Mouse Tracking (Oneko): Mouse-following animations are simulated by dividing the viewport into a grid of invisible squares. Each square contains a hover trigger that activates a specific frame of a sprite sheet animation.
25:05 Esoteric Implementations:
Empty HTML Documents: Using the HTTP Link header to load stylesheets into a document with zero body content.
CPU and Networking: References to building functional CPUs and processing server-sent binary data entirely within CSS animations and selectors.
28:01 Security and Performance Q&A: The speaker addresses the efficiency of CSS for UI transitions compared to JavaScript and highlights the privacy risks of CSS fingerprinting. A critical need for modern, robust CSS sanitizers is identified, as traditional tools struggle with modern CSS features.