The Lost CSS Tricks of Cohost.org

Cohost.org: The Dead CSS Strategy

You may have never heard of Cohost.org. This custom-made Tumblr-like social media site is like a flash in the pan. In June 2022, Cohost was released in an invitation-only format, with its pink and burgundy login pages promising to provide a “better posting experience.” More than two years later, in September 2024, the website announced its closure, with its creators citing burnout and funding issues. Today, its servers are permanently shut down. Any link to cohost.org will redirect to Wayback Machine's slow but comprehensive archive.

Cohost.org's login page shows our beloved eggbug.

Despite its short lifespan, I believe Cohost delivers on its promise. This is largely due to its user base, consisting primarily of niche internet creatives and their friends – many have seen “posting” as an art form. These users are attracted by Cohost’s maverick anti-capitalist design, which sets it apart from mainstream alternatives. The website has no ads and followers, all information flows are arranged purely in chronological order, and the posting interface even supports a portion of HTML.

It is the latter characteristic that has spawned a unique community. For security reasons, any post using HTML will go through a cleaner to remove any malicious or malformed elements. But unlike most websites, Cohost's cleanup program is very loose. The vast majority of tags and attributes are allowed - most notably the inline CSS style on any element.

Users quickly grasped the creative opportunities hidden in Cohost's humble "New Post" mode. Within 48 hours after it was released, this emerging community found how to use it<details></details> Tags posting poems, transplanting 1999's Apple homepage and re-enacting a fast-paced WarioWare game. We call these posts “CSS crimes” and the person who created them is called “CSS criminals.” The developers of Cohost even inadvertently created an environment where the CSS community flourished.

In this post, I'll show you some tips we've found when trying to push the limits of Cohost's HTML support. If you dare to use these tips, be careful not to get labeled as a CSS criminal.

Width intrusion

Many of Cohost's CSS crimes rely on what user @corncycle calls "width intrusion". By combining<details></details> Elements and CSScalc() functions, we can get some very powerful features: combination locks, tile matching games, Zelda-style top view movement, and so on.

If you've been in the CSS world for a while, there's a good chance you've been exposed to old checkbox tricks. By combining checkboxes, tags, and creatively using the CSS selector, you can use the toggle function of the checkbox to achieve various functions. Tab area, push toggle, drop-down menu, etc.

However, since this trick requires a CSS selector, it means we can't use it on Cohost - remember, we only have inline styles. Instead, we used relatively new elements<details></details> and<summary></summary> . These elements provide the same visibility switching logic, but are now directly in HTML. No weird CSS is needed.

These elements work as follows:<details></details> All child elements of an element are hidden by default, except<summary></summary> element. When a summary is clicked, it "opens" the parent<details></details> element, causing its children to be visible.

We can add various styles to these elements to make this example more interesting. Below, I styled the composition elements to create a button effect that lights up when clicked.

This is by<summary></summary> Elements set fixed position and size, gray background color and outer border to achieve this to make it look like a button. When clicking it, a sibling

Will be displayed, covered with its own red background and border<summary></summary> . Normally, this<div> Will block further click events, but I gave it a statement <code>pointer-events: none . Now all clicks will be directly passed to the following<summary></summary> element that allows you to close the button. This is very clever, but it ends up being the same logic as before: something is switched to on or off. There are only two states. If we want to make games and other gadgets, we may need to represent hundreds to thousands of states.

Width intrusion gives us exactly that. Consider the following example:

In this example, three<details></details> The elements are located together in an inline flex container. Because all<summary></summary> The elements are absolutely positioned, so when they are closed, they are each<details></details> All elements have zero widths.

Now, these three<details></details> Each contains a small

. The first one has a child element with a width of 1px, the second one has a child element with a width of 2px, and the third one has a child element with a width of 4px. When a<details></details> When an element is turned on, it shows its hidden

, causing its own width to increase. This increases the width of the inline flex container. Because the width of the container is the sum of its child elements' widths, it means that its width corresponds directly to the specific opened<details></details> element. For example, if only the first and third<details></details> Open, the width of the inline flex container will be 1px 4px = 5px. Conversely, if the width of the inline flex container is 2px, we can infer that the only open<details></details> The element is the second one. Using this trick, we have managed to put three<details></details> The eight states of the container element are encoded into the width of the container element.

This is cool. Maybe we can use it as an element of some kind of puzzle game? If the correct button combination is selected, we can display a secret message. But how do we do it? How do we display secret messages only for a specific width of that container div?

In the CodePen in the preceding I added a secret message as two nested divs. Currently, this message is always visible – contains a TODO, reminding us to implement the logic and hide it unless the correct combination is set.

You may be wondering why we use two nested divs to display such a simple message. This is because we will use a special method to hide the message: we will make the width of the parent div .secret zero. Due to the use of overflow: hidden property, the child div .message will be cut and therefore not visible.

Now we are ready to implement our secret message logic. Since the percentage size is relative to the parent, we can use 100% as a substitute for the parent width. We can then construct a complex CSScalc() formula that is 350px if the container div is our target size, otherwise 0px. This way, our secret message will only be visible when the middle button is active and the other buttons are inactive. Try it!

This complex calc() function that controls the width of a secret div has the following figure:

You can see that this is a piecewise linear curve, built from multiple fragments using min/max. These fragments are placed in place so that the function reaches its maximum value when the container div is 2px - we have determined that this is exactly what happens when only the second button is active.

Variants of this technology can be used to implement a wide variety of games. Here is a Tower of Hanoi game I made that uses width and height to track the status of the game.

SVG animation

So far, we have seen some basic features that implement the game. But what if we want our game to look better ? What if we want to add ✨ animation ? ✨Believe it or not, this can actually be achieved using the power of inline CSS and SVG.

SVG (Scalable Vector Graphics) is an XML-based image format used to store vector images. It has extensive support online – you can<img alt="The Lost CSS Tricks of Cohost.org" > Use it in the element, or as the URL of background-image attribute, etc.

Like HTML, SVG files are also collections of elements . For SVG, these elements are<rect></rect> ,<circle></circle> and<text></text> etc. To name a few. These elements can define various properties such as fill color, stroke width, and font family.

One of the little-known features of SVG is that it can contain blocks to configure the properties of these elements. In the following example, SVG is used as the background for the div. There is a block inside the SVG, which will<circle></circle> The fill color is set to red.

A lesser -known feature of SVG is that its styles can be queried using media . The size used by these queries is the size of the div that is the background.

In the following example, we have a resized

, its background is SVG. There is a media query inside this SVG, and when the width exceeds 100px, it will<circle></circle> The fill color of the color is changed to blue. Grab the resize handle in its lower right corner and drag until the circle turns blue. Since resizing handles are not very useful on mobile devices, unfortunately, this CodePen and the next few CodePen are best experienced on desktops.

This is an extremely powerful technology. By combining this with width intrusion, we can encode the state of the game or widget into the width of the SVG background image. This SVG can then display or hide specific elements according to the corresponding game status through media queries.

But I promise you the animation. So, how is this done? It turns out that you can use CSS animations inside SVG. By using the CSS transition property, we can make the circle's color smoothly transition from red to blue.

marvelous! But be sure to look carefully at the source code before you try it yourself. You will notice that I have to add a 1×1px off-screen element with an ID #hack. This element applies a very simple (almost unobtrusive) continuous animation. Such "virtual animations" are necessary to resolve SVG animation error detection in certain web browsers. Without this trick, our transition attribute will not work consistently.

For fun, let's combine this technique with our previous secret message examples. Instead of switching the width of the secret message between 0px and 350px, I adjusted the calc formula so that the secret message div is usually 350px and becomes 351px if the correct combination is set.

The secret message is no longer HTML/CSS, but just a<text></text> The SVG background of the element with "secret message" written on it. Using media query, we change this<text></text> The transformation ratio of the div is set to zero unless the div is 351px. Using the transition property, we can smooth the transition between these two states.

Click the middle button to activate the secret message:

The first Cohost user to discover the usage of media query in the SVG background is @ticky, used for this post. I don't remember who found them animated, but I used this technique extensively to make this quiz that will tell you what kind of soil you would like if you were a worm.

Summarize

That's all now. I haven't touched on many techniques - i.e. interesting activities that people can do with resize property. If you want to explore the world of CSS crime further, I suggest you visit this wonderful link dump at YellowAfterlife, or this video review from rebane2001.

It is always painful to describe Cohost using past times. It's really a magical place and I don't think I can express correctly what it felt like there at its peak. The best thing I can do is share the trick we came up with: the lost CSS tips we invented when we “a better post.”