Developer Creates a Two-Way Chat Using Only CSS and HTML

Web-based chat clients are nothing special these days, with most websites coming with a chat that pops-up from one of the web browser's corners at some point.

What most of these chat implementations have in common is the use of JavaScript, a programming language that today is one of the main technologies for creating interactive web apps and websites, along with CSS and HTML.

To get a sense of what a core web development technology is, JavaScript is currently used by 95.2% of all the websites according to W3Techs.

The CSS-only chat ... whatchamacallit

While developers have previously tried their hand at creating bidirectional web chats without using JavaScript [1, 2, 3] they had to resort to other languages such as Python and also add a number of libraries to the list of requirements.

Two days ago, however, a software developer from San Francisco who goes by the name of Kevin Kuchta managed to do what no one else did before, create a fully-functional two-way chat using only CSS and HTML.

A possible exception is Harmless, a basic CSS-chat app from last year which, unfortunately, has some small inconveniences like infinitely growing DOM and no way to distinguish between the chat's users.

So, it turns out that css background-images don't get loaded until the relevant selector is triggered.

Many people might say "neat!"

I used it to build a bi-directional CSS-only async chat. pic.twitter.com/0BRGxsTRxy

— Kevin Kuchta (@kkuchta) May 7, 2019

As Kuchta describes it on css-only-chat's GitHub page, this is a "truly monstrous async web chat using no JS whatsoever on the frontend" which can be used to send messages between users in a web browser without having to reload the page.

His CSS-only chat works by combining background-images loaded via pseudoselectors and a forever-loading index page which keeps the discussion going and the messages going between browsers.

The developer also explains the inner workings of the CSS-only chat on the project's page, detailing what goes behind the scenes when the data is sent by one of the chat users and when the message is received on the other end.

CSS-only chat's inspiration

Kuchta got his inspiration to create his JavaScript-less async web chat from security researcher Davy Wybiral who recently demonstrated on Twitter how websites can make use of just CSS and HTML to monitor the mouse movements in a browser window from within another web browser window, a tracking method which also works in Tor Browser.

Wybiral's proof-of-concept got a lot of reactions on Twitter and, as pointed out by other Twiter users [1, 2], other techniques to keep track of mouse movements using only CSS and HTML have also been discovered in the past.

Some of those CSS-based user tracking methods could be used to collect info like screen resolution, the browser name, link click events, as well as the OS by checking the supported fonts.

Here's a PoC that confirms my hunch.

*Neither* of these windows use JavaScript but the position of the cursor in the left window is sent to the right window. This works on Tor Browser with JS disabled. pic.twitter.com/cnfOy5OkUj

— davy (@davywtf) May 3, 2019

Moving away from the dark side of CSS trickery, Kuchta's proof-of-concept two-way web chat shows just how much can be achieved even without having to rely on interpreted high-level programming languages such as JavaScript.

Obviously, this is not a finished product but, with some extra polishing and a better way to type text, it could actually be a feasible idea to use as a web-based support chat for instance—even though, for some, it may seem like witchcraft.