Extending the Limits of CSS

Cascading Style Sheets—more commonly known as CSS—continues to be a cornerstone of web development. In Stack Overflow’s 2019 developer survey, CSS is clustered together with languages such as JavaScript, PHP, TypeScript, and even SQL, as well as frameworks such as Angular, jQuery, Node.js, and React, to form a typical web-development ecosystem.

Stack Overflow found that CSS is the second-most-popular language among developers, alongside HTML, and is also one of the most-loved languages and top-paying technologies globally.

“CSS is a language of the web, in that it’s the web developer’s tool for creating dynamic visuals on the web,” says Chen Hui Jing, a Developer Advocate at Nexmo and a Mozilla Tech Speaker. “In the same way painters use brushes and paints, and digital designers use Photoshop, web developers use CSS. But more than that, CSS lets us create dynamic layouts and visuals that can adapt to the different mediums through which our creations can be viewed.”

Tim Carry, a former Developer Advocate at Algolia, considers CSS a language of outcomes. “Because it’s a styling language, you can see the result of what you’re coding the moment you’re coding it,” he says. “It may be a weird language because you have no conditions, loops, or functions, but these constraints make you think differently.”

CSS was first proposed by Norwegian web pioneer Håkon Wium Lie in 1994 as a style sheet language for the web, with the World Wide Web Consortium publishing the first standard for it two years later. While the language began more than 25 years ago as a way to style and lay out pages on the web, CSS has since evolved to become a crucial element of user interfaces, a means of improving user experience, a vehicle for accessibility, and a major technology in front-end development. Yet developers are increasingly finding new ways to extend its limits, proving that there’s more to the language than just style—it’s also filled with substance.

Unexpected creations in CSS

Art and animation

The visual experiences of art and animation make the mediums the perfect playground for CSS. Take Diana Smith’s creations: The UI engineer coded Francine, an image in the style of an 18th-century oil painting, entirely in HTML and CSS. As a CSS creation, the digital art piece looks different depending on the browser it’s viewed on. Smith’s other CSS artworks include Lace, inspired by Flemish baroque portraits, and Zigario, designed in the style of a mid-20th-century advertisement.

Ana Tudor combines 3D transforms, trigonometric functions, and CSS to generate animated geometric shapes. “You might think that math doesn’t have a lot to do with writing style sheets, but you can actually do some amazing things with a little math in CSS,” she wrote on The Sass Way. “Math (particularly trigonometry) can help you model the real world. You’ll need it if you want to do something complicated with 3D transforms.”

Meanwhile, Julian Garnier made a 3D flying X-wing and a 3D solar system (albeit with some JavaScript for user controls) in CSS. Front-end web developer Keith Clark took it a notch further, building a CSS-powered 3D environment, complete with lighting and shadows, as well as a CSS-based virtual-reality experience.

Yuan Chuan blends art and animation using CSS. He developed a custom web component for drawing patterns with CSS and uses it to make generative art composed of graph-like patterns and entrancing animations.

Games

Compared to art and animation, games are more interactive and immersive, which can be a challenge for CSS. But some developers have taken on that challenge, constructing games made only with CSS.

Milan “Mino” Cernota developed two pure CSS action games in the same vein as the Super Mario video-game series. Similarly, Jamie Coulter developed a CSS-only adventure game, while Alexander Majorov emphasizes the zero lines of JavaScript code in his two no-JS games. Stephen Cook created his own version of the iconic Mario Kart racing game using 100% CSS—mostly as “a thought experiment to see how far CSS can be pushed,”he said later.

Meanwhile, Una Kravets built both a tic-tac-toe game and a hit-the-target carnival game using only CSS, and curated a collection of pure CSS games on CodePen. “I really love clever hacks and pushing the limits of CSS. Many people don’t realize how powerful it is,” she said in a blog post that detailed her development process behind these games. “There is value in experimenting and pushing boundaries to really understand a language.”

A search engine

With all its intricate back-end functionalities, a search engine might be deemed too complex to be coded using only CSS, but Carry did just that. What started as a joke in the spirit of an April fool turned into a working prototype.

Carry has long been experimenting with CSS, and has previously worked on recreating the flags of different nations in pure CSS “While doing the flags project, I discovered a few techniques that I reused in building the search engine,” he says. “But a lot of automation is involved with a search engine. You have to write 10 different CSS rules just to display one specific record.”

Instead of coding it all by hand, Carry employed a Ruby script to auto-generate some of the CSS code. “When I started writing in Ruby, it became like any other project. I needed to write functions, and write tests to make sure my functions were returning the correct thing” he says.

That wasn’t the only hurdle Carry encountered in building the search engine. The hardest part was knowing what he wanted to do but changing it in the middle of the project. “Initially, I had the idea of doing the search engine in pure CSS, and I wanted to stay true to that idea for as long as I could. But I realized it would be really slow, so I had to use a few lines of JavaScript for the part that’s listening to the input event,” he says.

As Carry made progress during development, he learned to work around the limits of CSS. The search engine works with a small number of records, but Carry cautions it’s still not something that should be used in production.

A new approach to writing CSS

Who would have thought you could write CSS in JavaScript? Max Stoiber for one, a JavaScript engineer who developed Styled Components, a CSS-in-JS library.

Styled Components combines the power of CSS with tagged template literals in JavaScript, allowing developers working with component-based JavaScript frameworks such as Angular, React, and Vue to write actual CSS code to style components. Because styles are now part of components, using these components as low-level styling constructs becomes easier.

Styled Components started in 2016 as a collaboration between Stoiber and web developer Glen Maddern. “We chatted about CSS-in-JS because we both liked the idea of it but didn’t like having to write CSS as JavaScript objects,” Stoiber says. “So we got together and prototyped the first version of what would turn into Styled Components, with the two core innovations being writing CSS as actual CSS and creating style components by default.”

As a new way of writing CSS, Styled Components provides the advantages of local scoping, server-side rendering, and using conditionals, functions, and other logic for style rules. “Styled Components simplifies dynamically updating CSS from JavaScript and optimizes the API for styling web apps based on components, rather than documents,” says Stoiber. Other CSS-in-JS libraries include framework-agnostic ones such as Aphrodite and Emotion, and framework-specific ones such as Radium for React.

This new construct has generally been met with support. But as with all things new, Styled Components has been met with some pushback. Stoiber says there are those who have not welcomed this new way of doing things that doesn’t align with what developers are used to.

Pushing the boundaries with CSS

Acknowledging the challenges associated with CSS is the first step in pushing the boundaries with the language. Once you overcome these, you can start building things with it you never thought possible. “CSS is almost boundless,” says Estelle Weyl, a consulting web developer, speaker, and author. “We’ve just been limited by legacy browsers and their lack of support for newer features. Also, there are many properties and even more values with better support with every browser release.”

Weyl highlights the upcoming :where() container that enables being specific without adding that specificity, selecting elements starting from the end of the list with :nth-last-of-type(), and the :focus-within and :target-within selectors. “There’s so much that CSS does that developers don’t know about,” she says. “You can now add generated content to inputs. Selectors have become so powerful that you can select any element without having access to the HTML markup.”

Carry’s advice is to start with a real-world object—the interface of a gaming console or a calculator, for example—and to try to recreate it using only CSS. “A great way to push the boundaries with a language is to make something that the language wasn’t meant to be doing in the first place,” he says.

Exploring new CSS properties and features, even if they’re yet to be widely implemented or are still in experimental versions of browsers, is another means of extending the limits of CSS. “Take the time to play around. I’m a big fan of CodePen for both inspiration and as a tool for trying out new things,” says Michelle Barker, Lead Front End Developer at Atomic Smash and author of front-end blog CSS {In Real Life}. “And if something doesn’t work as you’d like, you can contribute to the standards process by raising an issue, writing about your frustrations, or talking to implementers. Be part of the conversation that shapes the new CSS specifications.”

Envisioning the future of CSS

When pondering where the language is headed, Dave Geddes, creator of Mastery Games, a series of educational games to help developers learn CSS concepts through play, is most excited about CSS Grid Layout. “I think we’re only beginning to realize the power of CSS Grid. It’s a brand new ingredient in the bakery of the web,” he says. “We can make almost anything with it, and we’ve barely scratched the surface. I’ve been using it to create article, tile, and magazine layouts.”

Meanwhile, Chen is eyeing ongoing work on customization and internationalization. “CSS is introducing more features that take into account different writing modes, which means there’s an increased focus on the non-English-speaking community—and that’s a good development,” she says. “There’s also a lot of work being done to allow more customization of styles on interface elements, like scrollbars.”

But what many front-end developers are most looking forward to is working their own magic through Houdini, which in Chen’s words, “exposes parts of the CSS engine and allows developers to hook into the browser’s rendering engine. This opens up many opportunities for developers to create their own CSS properties.” Weyl, meanwhile, thinks of Houdini as JS-in-CSS: “Houdini will truly enable the pushing of boundaries, as it allows developers to implement new properties and values without having to wait for browsers to fully support all edge cases.”

Yet for all the promise that the future holds, finding ways to push the boundaries and extend the limits of CSS in the present fuels the creativity of front-end developers. “The constraints of CSS force you to do something creative with the language,” Carry says. “For me, CSS is similar to Lego bricks—if you have enough of them and enough time, you can create whatever you want.”

This article is part of Behind the Code, the media for developers, by developers. Discover more articles and videos by visiting Behind the Code!

Want to contribute? Get published!

Follow us on Twitter to stay tuned!

Illustration by Victoria Roussel