The Lost CSS Tricks Of Cohost Org

The Birth Of A CSS Playground

In the landscape of social media platforms, Cohost stood out from day one. Launched with an invite-only registration system, the platform's peach and maroon landing page promised something different: "posting, but better." That promise was fulfilled in ways the developers likely never anticipated.

What made Cohost special was its posting interface, which supported a subset of HTML. For security reasons, any post using HTML passed through a sanitizer that removed malicious or malformed elements. However, Cohost's sanitizer was remarkably permissive. The vast majority of HTML tags and attributes were allowed--most notably, inline CSS styles on arbitrary elements. This created an environment where creativity thrived despite constraints.

Within 48 hours of going public, users had already figured out how to post poetry using the <details> tag, port the Apple homepage from 1999, and reimplement a quick-time WarioWare game. The community called posts like these "CSS Crimes," and the people who made them "CSS Criminals." Without even intending to, the developers of Cohost had created an environment for a web development community to thrive.

These CSS Crimes ranged from simple decorative touches to fully functional games including Tower of Hanoi, Blackjack, Minesweeper, and complex puzzle boxes. The techniques developed during this period represent some of the most creative uses of CSS ever documented.

For developers interested in similar CSS layout techniques, understanding how flex containers calculate sizes was essential to the width-hacking approach.

Width-Hacking: State Management In Pure CSS

The most powerful technique developed on Cohost was called "width-hacking" by user @corncycle. This approach combined the <details> and <summary> HTML elements with the CSS calc() function to encode state into element widths, enabling complex interactive experiences without JavaScript.

The Checkbox Hack Evolution

Developers familiar with CSS tricks have likely encountered the checkbox hack. This technique combines a checkbox, a label, and creative CSS selectors to implement toggle functionality--tabbed areas, push toggles, dropdown menus, and more. However, the checkbox hack requires CSS selectors to connect the checked state to other elements, which wasn't possible in Cohost's inline-only CSS environment.

The solution was to use <details> and <summary> elements, which provide the same visibility-toggling logic directly in HTML without requiring external stylesheets. When a <summary> element is clicked, it "opens" the parent <details> element, causing its children to become visible. This built-in behavior became the foundation for CSS-only interactivity.

Building Interactive Buttons

The basic <details> and <summary> pattern can be styled to create interactive buttons. By styling the <summary> element with fixed dimensions, background colors, and borders, developers created buttons that changed appearance when clicked.

What made this technique powerful was the ability to layer additional content on top. When a <details> element opens, it reveals a child <div> that covers the <summary> with its own styling. Critically, this overlay could use pointer-events: none to allow clicks to pass through to the underlying <summary> element, enabling toggle functionality.

Encoding State With Width

The real innovation came when developers realized that opening multiple <details> elements changed the width of their container. Consider three <details> elements in an inline-flex container, each containing a child <div> with widths of 1px, 2px, and 4px respectively.

When a <details> element opens, it reveals its hidden child <div>, which increases the width of the parent <details> element. This, in turn, increases the width of the inline-flex container. Because the width of the container equals the sum of its open children's widths, the container's width directly corresponds to which <details> elements are open.

For example, if the first and third <details> elements are open (1px + 4px), the container width is 5px. If the container is 2px wide, only the second <details> element is open. With this technique, developers encoded all eight possible states of three toggle elements into the width of a single container.

Conditional Content With Calc()

The next step was using this width-based state encoding to show or hide content conditionally. By creating a parent <div> with overflow: hidden and a child containing the conditional content, developers could clip or reveal the child based on the container's width.

The key insight was using 100% as a stand-in for the parent's width within the child element. Combined with CSS calc(), developers created formulas that evaluated to specific widths only when the parent container matched certain dimensions. These formulas used min() and max() functions to create piecewise linear curves that peaked at specific widths.

This approach enabled features like combination locks that revealed secret messages only when the correct sequence of toggles was selected, and puzzle games where player actions changed the encoded state.

Modern Alternatives And Considerations

While width-hacking remains an impressive demonstration of CSS capabilities, modern web development offers more straightforward alternatives. CSS custom properties (variables) combined with JavaScript provide more maintainable state management. However, understanding width-hacking helps developers appreciate the full capabilities of CSS layout systems and can inspire creative solutions in constrained environments. Similar creative CSS problem-solving is needed when working with CSS perspective transforms.

SVG Animation And Media Queries

Beyond width-hacking, Cohost developers discovered powerful techniques for creating animations using SVG backgrounds with inline CSS.

SVG As A Styleable Background

SVG (Scalable Vector Graphics) is an XML-based image format that can be used in <img> elements or as the URL of a background-image property. What many developers don't realize is that SVG files can contain <style> blocks for configuring element properties.

A lesser-known feature is that SVG styles can use media queries, and the size used by those queries is the size of the div the SVG is a background of. This means an SVG background can respond to the dimensions of its container, enabling responsive visual effects.

Creating Responsive Animations

By combining SVG backgrounds with width-hacking, developers encoded game state in container width and used SVG media queries to show or hide specific elements based on that state. The result was fully interactive visual experiences created entirely with CSS.

Smooth Transitions And The Dummy Animation Hack

Adding CSS transitions to SVG backgrounds created smooth animations. The transition property could animate color changes, transforms, and other properties within the SVG. However, developers discovered that some browsers didn't consistently apply transitions without a "dummy animation"--a continuous, nearly imperceptible animation on an off-screen element with an ID. This hack forced browsers to recognize that animations were active and apply transition effects.

The SVG animation techniques enabled developers to create animated quizzes, interactive displays, and visual puzzles. One notable example was a "What kind of soil would you like if you were a worm?" quiz that used animated transitions between questions and results, all powered by SVG backgrounds.

Complete Games Built With CSS

The combination of width-hacking and SVG animation enabled developers to create complete, playable games using only HTML and CSS. These "CSS Crimes" represented the pinnacle of creative constraint-driven development.

Tower Of Hanoi

One developer created a fully playable Tower of Hanoi puzzle using both width and height to track disk positions across three pegs. Players could click disks to move them according to the classic puzzle's rules, with the game state encoded entirely in CSS properties.

Blackjack

Another developer built a Blackjack card game using CSS to handle card drawing, score calculation, and win/lose conditions. The game tracked player and dealer hands using width-encoded state and displayed results through conditional content reveal.

Other Notable Examples

The CSS Crimes archive documents over 100 interactive creations including Minesweeper clones, puzzle boxes, combination locks, optical illusions, and animated displays. Each demonstrates different aspects of what CSS can achieve when developers push its limits. A Minesweeper clone demonstrated how grid-based games could be implemented with CSS, where the game board was created using HTML tables or CSS Grid, with mine locations revealed through carefully constructed width-based conditions.

These experiments in CSS border styling and creative layout techniques showcase the depth of what CSS can accomplish.

Performance Implications And Best Practices

While these CSS-only techniques are impressive, they come with important performance considerations that developers should understand.

Render Performance

Width-hacking relies on layout changes to encode state, which triggers browser reflow. Each time a <details> element opens or closes, the browser recalculates layout for affected elements. For simple interfaces, this overhead is negligible. For complex games with many encoded states, the performance impact can become noticeable, especially on lower-powered devices.

Animation Performance

SVG animations using transition properties can be performant when animated properties are limited to transforms and opacity. These properties can be hardware-accelerated on most devices. However, animating properties like width, height, or layout-affecting properties triggers reflow and can cause janky animations. Our frontend development team follows these animation best practices to ensure smooth, performant user experiences.

Maintainability Concerns

CSS-only solutions, while creative, can be difficult to maintain and modify. The complex calc() formulas used in width-hacking are opaque and require careful documentation to understand. For production applications, the maintainability benefits of JavaScript-based state management often outweigh the novelty of CSS-only approaches.

When To Use These Techniques

These techniques are valuable for understanding CSS capabilities, creating educational demonstrations, and working in constrained environments where JavaScript isn't available. They also provide inspiration for creative visual effects even in applications that do use JavaScript. For most production applications, the recommendation is to use the simplest approach that meets requirements.

Creative CSS In Modern Web Development

The legacy of Cohost's CSS Crimes extends beyond the platform itself. The techniques developed there demonstrate principles that apply to modern web development, including Progressive Enhancement, creative constraint-driven development, and understanding CSS capabilities.

Progressive Enhancement

The CSS Crimes movement exemplified progressive enhancement--creating experiences that work without JavaScript and enhance when available. While many CSS-only games on Cohost could have been simpler with JavaScript, their CSS-only implementations demonstrated what was possible with HTML and CSS alone.

Creative Constraints

The constraints of Cohost's HTML sanitization forced developers to think creatively about CSS capabilities. Similar constraint-driven development can lead to innovative solutions even in unconstrained environments. Sometimes limitations push developers toward more elegant solutions than they would have discovered otherwise.

CSS Capability Awareness

Understanding the full capabilities of CSS helps developers make better decisions about when to use CSS versus JavaScript. The CSS Crimes demonstrated that many common UI patterns--toggles, tabs, accordions--can be implemented with CSS alone, while others benefit from JavaScript involvement. This knowledge empowers our web development services team to choose the right approach for each unique project requirement.

Practical Applications

For web developers today, the CSS Tricks of Cohost offer several practical takeaways. First, understanding layout fundamentals like calc(), flexbox, and grid enables creative solutions that might not be obvious from surface-level CSS knowledge. Second, SVG is more powerful than many developers realize--beyond static images, SVG can contain interactive styles, animations, and responsive behavior. Third, constraints can drive innovation. The limitations of Cohost's HTML support pushed developers to discover capabilities of CSS that might otherwise have remained unexplored.

For developers interested in creating centered input file uploads, understanding flexbox layout principles is equally important for modern CSS implementation.

Sources

1. CSS-Tricks - The Lost CSS Tricks of Cohost.org - Original comprehensive article by Blackle Mori documenting width-hacking and SVG animation techniques
2. YellowAfterlife - Some of the CSS crimes of all times - Extensive linkdump of 100+ CSS crime examples including complete games