The Misplaced CSS Methods of Cohost.org

You’ll be forgiven if you happen to’ve by no means heard of Cohost.org. The bespoke, Tumblr-like social media web site got here and went in a flash. Going public in June 2022 with invite-only registrations, Cohost’s peach and maroon touchdown web page promised that it might be “posting, however higher.” Simply over two years later, in September 2024, the location introduced its shutdown, its creators citing burnout and funding issues. Right this moment, its servers are gone for good. Any hyperlink to cohost.org redirects to the Wayback Machine’s gradual however complete archive.

The touchdown web page for Cohost.org, that includes our beloved eggbug.

Regardless of its brief lifetime, I’m assured in saying that Cohost delivered on its promise. That is in no small half attributable to its person base, consisting principally of area of interest web creatives and their pals — lots of whom already thought-about “posting” to be an artwork type. These customers had been interested in Cohost’s opinionated, anti-capitalist design that set it other than the mainstream options. The location was freed from ads and follower counts, all feeds had been purely chronological, and the posting interface even supported a subset of HTML.

It was this latter function that conjured a neighborhood of its personal. For safety causes, any submit utilizing HTML was handed by means of a sanitizer to take away any malicious or malformed parts. However in contrast to most web sites, Cohost’s sanitizer was remarkably permissive. The overwhelming majority of tags and attributes had been allowed — most notably inline CSS types on arbitrary parts.

Customers didn’t take lengthy to know the inventive alternatives lurking inside Cohost’s unassuming “new submit” modal. Inside 48 hours of going public, the fledgling neighborhood had discovered the best way to submit poetry utilizing the <particulars> tag, port the Apple homepage from 1999, and reimplement a quick-time WarioWare recreation. We known as posts like these “CSS Crimes,” and the individuals who made them “CSS Criminals.” With out even aspiring to, the builders of Cohost had created an surroundings for a CSS neighborhood to thrive.

On this submit, I’ll present you a couple of of the hacks we discovered whereas making an attempt to push the bounds of Cohost’s HTML help. Use these if you happen to dare, lest you too get labelled a CSS prison.

Width-hacking

Most of the CSS crimes of Cohost had been powered by a method that person @corncycle dubbed “width-hacking.” Utilizing a mix of the <particulars> component and the CSS calc() operate, we will get some fairly wild performance: mixture locks, tile matching video games, Zelda-style top-down motion, the listing goes on.

In case you’ve been across the CSS world for some time, there’s an excellent likelihood you’ve been uncovered to the previous checkbox hack. By combining a checkbox, a label, and artistic use of CSS selectors, you need to use the toggle performance of the checkbox to implement all kinds of issues. Tabbed areas, push toggles, dropdown menus, and so on.

Nevertheless, as a result of this hack requires CSS selectors, that meant we couldn’t apply it to Cohost — keep in mind, we solely had inline types. As a substitute, we used the comparatively new parts <particulars> and <abstract>. These parts present the identical visibility-toggling logic, however now immediately in HTML. No bizarre CSS wanted.

These parts work like so: All kids of the <particulars> component are hidden by default, aside from the <abstract> component. When the abstract is clicked, it “opens” the father or mother particulars component, inflicting its kids to change into seen.

We will add all kinds of types to those parts to make this instance extra attention-grabbing. Under, I’ve styled the constituent parts to create the impact of a button that lights up whenever you click on on it.

That is achieved by giving the <abstract> component a hard and fast place and measurement, a gray background coloration, and an outset border to make it seem like a button. When it’s clicked, a sibling <div> is revealed that covers the <abstract> with its personal pink background and border. Usually, this <div> would block additional click on occasions, however I’ve given it the declaration pointer-events: none. Now all clicks go proper on by means of to the <abstract> component beneath, permitting you to show the button again off.

That is all fairly nifty, however it’s in the end the identical logic as earlier than: one thing is toggled both on or off. These are solely two states. If we wish to make video games and different gizmos, we would wish to symbolize lots of to 1000’s of states.

Width-hacking offers us precisely that. Think about the next instance:

On this instance, three <particulars> parts stay collectively in an inline-flex container. As a result of all of the <abstract> parts are absolutely-positioned, the width of their respective <particulars> parts are all zero once they’re closed.

Now, every of those three <particulars> has a small <div> inside. The primary has a baby with a width of 1px, the second a baby with a width of 2px, and the third a width of 4px. When a <particulars> component is opened, it reveals its hidden <div>, inflicting its personal width to extend. This will increase the width of the inline-flex container. As a result of the width of the container is the sum of its kids, this implies its width immediately corresponds to the precise <particulars> parts which might be open.

For instance, if simply the primary and third <particulars> are open, the inline-flex container may have the width 1px + 4px = 5px. Conversely, if the inline-flex container is 2px extensive, we will infer that the one open <particulars> component is the second. With this trick, we’ve managed to encode all eight states of the three <particulars> into the width of the container component.

That is fairly cool. Possibly we might use this as a component of some type of puzzle recreation? We might present a secret message if the precise mixture of buttons is checked. However how will we do this? How will we solely present the key message for a selected width of that container div?

Within the previous CodePen, I’ve added a secret message as two nested divs. At present, this message is all the time seen — full with a TODO reminding us to implement the logic to cover it except the proper mixture is ready.

You might surprise why we’re utilizing two nested divs for such a easy message. It’s because we’ll be hiding the message utilizing a peculiar methodology: We are going to make the width of the father or mother div.secret be zero. As a result of the overflow: hidden property is used, the kid div.message might be clipped, and thus invisible.

Now we’re able to implement our secret message logic. Because of the truth that proportion sizes are relative to the father or mother, we will use 100% as a stand-in for the father or mother’s width. We will then assemble an advanced CSS calc() formulation that’s 350px if the container div is our goal measurement, and 0px in any other case. With that, our secret message might be seen solely when the middle button is energetic and the others are inactive. Give it a attempt!

This sophisticated calc() operate that’s controlling the key div’s width has the next graph:

You’ll be able to see that it’s a piecewise linear curve, constructed from a number of items utilizing min/max. These items are positioned in simply the precise spots in order that the operate maxes out when the container div is 2px— which we’ve established is exactly when solely the second button is energetic.

A stunning number of video games may be carried out utilizing variations on this system. Here’s a tower of Hanoi recreation I had made that makes use of each width and top to trace the sport’s state.

SVG animation

To this point, we’ve seen some fundamental performance for implementing a recreation. However what if we would like our video games to look good? What if we wish to add ✨animations?✨ Imagine it or not, that is truly doable totally inside inline CSS utilizing the ability of SVG.

SVG (Scalable Vector Graphics) is an XML-based picture format for storing vector photos. It enjoys broad help on the internet — you need to use it in <img> parts or because the URL of a background-image property, amongst different issues.

Like HTML, an SVG file is a set of parts. For SVG, these parts are issues like <rect>, <circle>, and <textual content>, to call a couple of. These parts can have all kinds of properties outlined, comparable to fill coloration, stroke width, and font household.

A lesser-known function of SVG is that it might probably comprise <fashion> blocks for configuring the properties of those parts. Within the instance under, an SVG is used because the background for a div. Inside that SVG is a <fashion> block that units the fillcoloration of its <circle> to pink.

A fair lesser-known function of SVG is that its types can use media queries. The dimensions utilized by these queries is the scale of the div it’s a background of.

Within the following instance, we now have a resizable <div> with an SVG background. Inside this SVG is a media question which can change the fill coloration of its <circle> to blue when the width exceeds 100px. Seize the resize deal with in its backside proper nook and drag till the circle turns blue.

As a result of resize handles don’t fairly work on cellular, sadly, this and the subsequent couple of CodePens are finest skilled on desktop.

That is a particularly highly effective approach. By mixing it with width-hacking, we might encode the state of a recreation or gizmo within the width of an SVG background picture. This SVG can then present or conceal particular parts relying on the corresponding recreation state through media queries.

However I promised you animations. So, how is that performed? Seems you need to use CSS animations inside SVGs. By utilizing the CSS transition property, we will make the colour of our circle easily transition from pink to blue.

Wonderful! However earlier than you do this your self, make sure to have a look at the supply code rigorously. You’ll discover that I’ve had so as to add a 1×1px, off-screen component with the ID #hack. This component has a quite simple (and practically unnoticeable) steady animation utilized. A “dummy animation” like that is essential to get round some net browsers’ buggy detection of SVG animation. With out that hack, our transition property wouldn’t work constantly.

For the enjoyable of it, let’s mix this tech with our earlier secret message instance. As a substitute of toggling the key message’s width between the values of 0px and 350px, I’ve adjusted the calc formulation in order that the key message div is generally 350px, and turns into 351px if the precise mixture is ready.

As a substitute of HTML/CSS, the key message is now simply an SVG background with a <textual content> component that claims “secret message.” Utilizing media queries, we modify the rework scale of this <textual content> to be zero except the div is 351px. With the transition property utilized, we get a easy transition between these two states.

Click on the middle button to activate the key message:

The primary cohost person to find the usage of media queries inside SVG backgrounds was @ticky for this submit. I don’t recall who discovered they might animate, however I used the tech fairly extensively for this quiz that tells you what sort of soil you’d like if you happen to had been a worm.

Wrapping up

And that’s might be all for now. There are a variety of methods I haven’t touched on — specifically the enjoyable antics one can stand up to with the resize property. In case you’d wish to discover the world of CSS crimes additional, I’d suggest this nice linkdump by YellowAfterlife, or this video retrospective by rebane2001.

---

It would all the time damage to explain Cohost prior to now tense. It actually was a magical place, and I don’t suppose I’ll be capable of correctly convey what it was wish to be there at its peak. The most effective I can do is share the hacks we got here up with: the misplaced CSS tips we invented whereas “posting, however higher.”

---

The Misplaced CSS Methods of Cohost.org initially revealed on CSS-Methods, which is a part of the DigitalOcean household. You must get the publication.