An asynchronous web chat that sends and receives messages without using any JavaScript on the frontend.
CSS-Only Chat is a web chat application that operates without any JavaScript on the frontend, using only CSS and server-side techniques for real-time messaging. It solves the challenge of building interactive, asynchronous web applications using CSS hacks like background-image loading and infinite page loading. The project is a technical demonstration of how far CSS can be pushed beyond its typical styling role.
Frontend developers and web enthusiasts interested in CSS hacks, historical web techniques, and experimental projects that challenge conventional web development practices.
Developers choose this project for its unique approach to eliminating JavaScript while maintaining real-time functionality, serving as an educational tool and a proof-of-concept for CSS-driven interactivity. It stands out as a creative exploration of web constraints rather than a practical production solution.
A truly monstrous async web chat using no JS whatsoever on the frontend
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.
Eliminates client-side JavaScript entirely by using CSS :active pseudo-selectors to trigger requests via background-image loading, as detailed in the README's explanation of button detection.
Implements async messaging without page reloads using Comet-like long-polling and infinite page loading with Transfer-Encoding: chunked, demonstrating historical web techniques for server push.
Serves as a playful exploration of CSS limitations, inspiring developers to think beyond conventional web development with hacks like dynamic button regeneration and Redis pub/sub for inter-thread communication.
Reduces frontend complexity by relying solely on CSS and HTTP, avoiding JavaScript-related issues such as browser compatibility or script blocking, as highlighted in the project's philosophy.
README admits it's broken by browser background-image handling changes, prone to long-request timeouts, fast-clicking bugs, and concurrency headaches, making it unsuitable for production use.
Relies on CSS hacks that are not accessible to screen readers or users with disabilities, with the FAQ noting 'it's crazy inaccessible' as a key drawback.
Requires Redis for pub/sub communication and intricate server logic for infinite loading, adding deployment and maintenance overhead that contradicts the simplicity of a CSS-only frontend.
Author acknowledges minimal cleanup and 'exploratory coding' in the FAQ, leading to hard-to-maintain code that would need a rebuild for any practical application.