Here is a rewritten version of the article, preserving the key information and tone while improving clarity and flow:
—
You’d be forgiven for not knowing about Cohost.org — the quirky, Tumblr-esque social media site that briefly flickered into existence. Launched publicly in June 2022 with an invite-only model, Cohost’s peach-and-maroon interface promised users “posting, but better.” Fast forward just over two years, and in September 2024, the site’s creators announced its closure, citing burnout and financial struggles. As of today, the platform is officially offline. Visiting cohost.org now simply redirects you to the Wayback Machine’s archive.
Despite its short lifespan, Cohost made good on its promise — largely thanks to a small but passionate community of internet creatives. These users, many of whom treated “posting” as an art form, were drawn to Cohost’s distinctly anti-capitalist ethos. The platform stood apart from mainstream social media: no ads, no follower counts, strictly chronological feeds, and even support for a subset of HTML in posts.
That final feature became the foundation of an unexpected phenomenon. While Cohost sanitized HTML input for security, its filter was unusually permissive. Most tags and attributes were allowed — including inline CSS. This openness sparked a wave of creativity. Within 48 hours of launch, users were already experimenting with the platform’s capabilities: posting poetry with
In this article, we’ll explore some of the ingenious techniques this community developed — clever hacks that pushed the boundaries of what was possible with Cohost’s limited HTML and CSS support.
Width-Hacking: Encoding State with Pixels
A foundational technique behind many CSS Crimes was what user @corncycle called “width-hacking.” By combining the
If you’re familiar with the classic “checkbox hack” in CSS — where a checkbox and label are paired with creative selectors to toggle content — you’ll understand the spirit of width-hacking. But since Cohost only allowed inline styles (and no CSS selectors), users had to find alternatives. Enter
.
These elements provide built-in toggle functionality: when the
is clicked, the
expands to reveal its children. By styling these elements creatively, users simulated buttons, toggles, and more. For example, a
styled as a button could reveal a red overlay
when clicked — and by using pointer-events: none on the overlay, clicks would still reach the button beneath.
But toggling between two states (on/off) wasn’t enough for more complex interactions. That’s where width-hacking came in. Imagine three
elements inside an inline-flex container. Each contains a hidden
with a width of 1px, 2px, or 4px respectively. When opened, the container’s total width reflects which
are active — effectively encoding binary states into pixel widths.
For example, if the first and third
are open, the container’s width becomes 5px (1 + 4). Using this trick, users could represent up to 2ⁿ states with n
elements — a powerful way to track game state or unlock secret messages.
To display content only at specific widths, users employed clever CSS calc() formulas. A div with overflow: hidden and a child message could be shown or hidden based on whether a calc() expression resolved to 0px or 350px, depending on the container’s width. This allowed for puzzles and games where the correct combination of toggles would reveal hidden content.
SVG Animation: Bringing Posts to Life
While width-hacking provided logic, SVGs brought style. Scalable Vector Graphics (SVG) are XML-based and widely supported on the web. Users embedded SVGs as background images in
elements and styled them inline — even using media queries and animations.
For example, an SVG could contain a element whose fill color changed based on the width of its container. Resize the container past 100px, and the circle turns blue — all powered by media queries inside the SVG’s
styled as a button could reveal a red overlay
when clicked — and by using pointer-events: none on the overlay, clicks would still reach the button beneath.
But toggling between two states (on/off) wasn’t enough for more complex interactions. That’s where width-hacking came in. Imagine three
elements inside an inline-flex container. Each contains a hidden
with a width of 1px, 2px, or 4px respectively. When opened, the container’s total width reflects which
are active — effectively encoding binary states into pixel widths.
For example, if the first and third
are open, the container’s width becomes 5px (1 + 4). Using this trick, users could represent up to 2ⁿ states with n
elements — a powerful way to track game state or unlock secret messages.
To display content only at specific widths, users employed clever CSS calc() formulas. A div with overflow: hidden and a child message could be shown or hidden based on whether a calc() expression resolved to 0px or 350px, depending on the container’s width. This allowed for puzzles and games where the correct combination of toggles would reveal hidden content.
SVG Animation: Bringing Posts to Life
While width-hacking provided logic, SVGs brought style. Scalable Vector Graphics (SVG) are XML-based and widely supported on the web. Users embedded SVGs as background images in
elements and styled them inline — even using media queries and animations.
For example, an SVG could contain a element whose fill color changed based on the width of its container. Resize the container past 100px, and the circle turns blue — all powered by media queries inside the SVG’s
But toggling between two states (on/off) wasn’t enough for more complex interactions. That’s where width-hacking came in. Imagine three
For example, if the first and third
To display content only at specific widths, users employed clever CSS calc() formulas. A div with overflow: hidden and a child message could be shown or hidden based on whether a calc() expression resolved to 0px or 350px, depending on the container’s width. This allowed for puzzles and games where the correct combination of toggles would reveal hidden content.
SVG Animation: Bringing Posts to Life
While width-hacking provided logic, SVGs brought style. Scalable Vector Graphics (SVG) are XML-based and widely supported on the web. Users embedded SVGs as background images in
For example, an SVG could contain a