You’d be forgiven in the event you’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 will 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 quick lifetime, I’m assured in saying that Cohost delivered on its promise. That is in no small half because of its consumer base, consisting principally of area of interest web creatives and their buddies — lots of whom already thought-about “posting” to be an artwork type. These customers have been interested in Cohost’s opinionated, anti-capitalist design that set it aside from the mainstream alternate options. The location was freed from commercials and follower counts, all feeds have 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 publish utilizing HTML was handed by a sanitizer to take away any malicious or malformed parts. However not like most web sites, Cohost’s sanitizer was remarkably permissive. The overwhelming majority of tags and attributes have been allowed — most notably inline CSS types on arbitrary parts.
Customers didn’t take lengthy to know the artistic alternatives lurking inside Cohost’s unassuming “new publish” modal. Inside 48 hours of going public, the fledgling neighborhood had discovered the right way to publish poetry utilizing the
tag, port the Apple homepage from 1999, and reimplement a quick-time WarioWare sport. We referred to 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 setting for a CSS neighborhood to thrive.
On this publish, I’ll present you a couple of of the hacks we discovered whereas attempting to push the bounds of Cohost’s HTML help. Use these in the event you dare, lest you too get labelled a CSS prison.
Width-hacking
Most of the CSS crimes of Cohost have been powered by a method that consumer @corncycle dubbed “width-hacking.” Utilizing a mix of the
For those who’ve been across the CSS world for some time, there’s an excellent probability you’ve been uncovered to the previous checkbox hack. By combining a checkbox, a label, and artistic use of CSS selectors, you should utilize the toggle performance of the checkbox to implement all kinds of issues. Tabbed areas, push toggles, dropdown menus, and many others.
Nonetheless, as a result of this hack requires CSS selectors, that meant we couldn’t apply it to Cohost — bear in mind, we solely had inline types. As a substitute, we used the comparatively new parts
and . These parts present the identical visibility-toggling logic, however now straight in HTML. No bizarre CSS wanted.
These parts work like so: All kids of the
component are hidden by default, apart from the component. When the abstract is clicked, it “opens” the father or mother particulars component, inflicting its kids to turn out to be seen.
We are able to add all kinds of types to those parts to make this instance extra fascinating. Under, I’ve styled the constituent parts to create the impact of a button that lights up if you click on on it.
That is achieved by giving the
component a hard and fast place and dimension, a gray background coloration, and an outset border to make it appear to be a button. When it’s clicked, a sibling
is revealed that covers the with its personal crimson background and border. Usually, this
would block additional click on occasions, however I’ve given it the declaration pointer-events: none. Now all clicks cross proper on by to the component beneath, permitting you to show the button again off.
That is all fairly nifty, nevertheless 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 need to make video games and different gizmos, we'd need to characterize tons of to 1000's of states.
Width-hacking offers us precisely that. Think about the next instance:
On this instance, three
parts stay collectively in an inline-flex container. As a result of all of the parts are absolutely-positioned, the width of their respective parts are all zero after they’re closed.
Now, every of those three
has a small
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 component is opened, it reveals its hidden
, 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 straight corresponds to the particular parts which are open.
For instance, if simply the primary and third
are open, the inline-flex container can have the width 1px + 4px = 5px. Conversely, if the inline-flex container is 2px huge, we will infer that the one open component is the second. With this trick, we’ve managed to encode all eight states of the three into the width of the container component.
That is fairly cool. Perhaps we may use this as a component of some type of puzzle sport? We may present a secret message if the correct mixture of buttons is checked. However how can we try this? How can 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 the moment, this message is all the time seen — full with a TODO reminding us to implement the logic to cover it until the proper mixture is ready.
Chances are you'll marvel why we’re utilizing two nested divs for such a easy message. It is because we’ll be hiding the message utilizing a peculiar technique: 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. Due to 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 are able to then assemble a sophisticated CSS calc() components that's 350px if the container div is our goal dimension, and 0px in any other case. With that, our secret message might be seen solely when the middle button is lively and the others are inactive. Give it a strive!
This difficult calc() perform that’s controlling the key div’s width has the next graph:
You may see that it’s a piecewise linear curve, constructed from a number of items utilizing min/max. These items are positioned in simply the correct spots in order that the perform maxes out when the container div is 2px— which we’ve established is exactly when solely the second button is lively.
A shocking number of video games might be applied utilizing variations on this method. Here's a tower of Hanoi sport I had made that makes use of each width and top to trace the sport’s state.
SVG animation
Up to now, we’ve seen some primary performance for implementing a sport. However what if we wish our video games to look good? What if we need to add ✨animations?✨ Imagine it or not, that is really attainable totally inside inline CSS utilizing the facility of SVG.
SVG (Scalable Vector Graphics) is an XML-based picture format for storing vector photos. It enjoys broad help on the internet — you should utilize it in 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 , , and , to call a couple of. These parts can have all kinds of properties outlined, resembling fill coloration, stroke width, and font household.
A lesser-known function of SVG is that it will possibly include blocks for configuring the properties of those parts. Within the instance beneath, an SVG is used because the background for a div. Inside that SVG is a block that units the fillcoloration of its to crimson.
A good lesser-known function of SVG is that its types can use media queries. The dimensions utilized by these queries is the dimensions of the div it's a background of.
Within the following instance, we have now a resizable
with an SVG background. Inside this SVG is a media question which is able to change the fill coloration of its 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 greatest skilled on desktop.
That is an especially highly effective method. By mixing it with width-hacking, we may encode the state of a sport or gizmo within the width of an SVG background picture. This SVG can then present or cover particular parts relying on the corresponding sport state through media queries.
However I promised you animations. So, how is that achieved? Seems you should utilize CSS animations inside SVGs. By utilizing the CSS transition property, we will make the colour of our circle easily transition from crimson to blue.
Superb! However earlier than you do this your self, make sure you take 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 persistently.
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 components in order that the key message div is often 350px, and turns into 351px if the correct mixture is ready.
As a substitute of HTML/CSS, the key message is now simply an SVG background with a component that claims “secret message.” Utilizing media queries, we alter the remodel scale of this to be zero until 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 consumer to find the usage of media queries inside SVG backgrounds was @ticky for this publish. 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 in the event you have been a worm.
Wrapping up
And that’s might be all for now. There are a variety of methods I haven’t touched on — particularly the enjoyable antics one can rise up to with the resize property. For those who’d prefer to discover the world of CSS crimes additional, I’d advocate this nice linkdump by YellowAfterlife, or this video retrospective by rebane2001.
It'll all the time damage to explain Cohost up to now tense. It actually was a magical place, and I don’t suppose I’ll be capable to correctly convey what it was prefer to be there at its peak. The very best I can do is share the hacks we got here up with: the misplaced CSS methods we invented whereas “posting, however higher.”
