The recent browser adoptions of aspect-ratio was great to see, but came with a strange sadness. I remembered the first time I discovered and used the old aspect ratio hack, which involved setting a percentage padding on one dimension, with the image set as a background, and felt a kind of weird nostalgia. There is a sort of joy from unearthing a solution like that, seemingly pulling off the impossible or sneaking in something not allowed, finding your design is not yet possible with the current spec then somehow delivering it anyway.
I've always loved any of these nifty solutions and workarounds, and for the longest time would never have considered them 'hacks'. There are no rules about what is allowed, and these enable something thought too difficult with surprising ease. In my early days learning CSS the thrill was in surfacing new combos that enabled me to get what i wanted, solving a puzzle using the available tools, as it was always so difficult to do just about anything. I became a massive fan of Lea Verou's CSS secrets videos, she seemed to have such knowledge of the abilities and limitations of CSS to create wonders. It felt like some sort of magic, the rules were bending and the impossible was happening. It made me want to create, it grew my love for the ingenuity of frontend development.
But isn't all this terrible? bad bad naughty dirty ways of creating more messy problems and not worth the minor solutions. Isn't the word 'hack' a criticism in development? meaning 'not the proper way', an inefficient solution that needs addressing. In Javascript there have been workarounds to immutability, classes, types and asynchronicity, it is a messy language, and all have found their ways into well supported libraries, variations like typescript or integrated into the native spec itself. These were quickly identified as problems, nobody cheered their attempted innovations or way of 'sort of' solving a problem. CSS is sort of a different beast, seemingly praising how its unsupported features can be mimicked, new outfits can be crafted by repurposing the old tatty rags in the cupboard.
But maybe the tide has turned.
Lea Verou recently created a course on Frontend Masters covering custom properties, demonstrating the incredible versatility of these variables to make CSS dynamic and reconfigurable to reduce CSS. But then, midway through the course a 'hack' was introduced. By using a whitespace value as a variable setting you can create fallbacks by confusing the property, allowing some toggles that are helpful in some settings. It kinda saddened me, whilst running through the spec of a mature CSS tool we still discussed workarounds by exploiting the logic. Have we not outgrown all this sillyness? Maybe I thought in the modern age of CSS (CSS4? 5?) with flex and grid, variable fonts, custom properties and image filters the hack solutions were becoming a thing of the past. Done are the days of 'sort of' achieving responsive layouts with floated divs and percentage widths, or even, shudder, sizing a transparent image to get even spacing between elements.
We're all grown up now, we are serious, we want to be super composable and functional adapting to context, are we not done with hacks?
CSS is really like nothing else, not quite a programming language, not quite markup, tested visually, endlessly different in its outcomes depending on many outside factors. CSS developers have two identities; part architect to ensure readable bug free clean code that can be adapted and scaled over time, part magician that distracts and deceives its audience to deliver the seemingly impossible. How on earth did you make real text that animates like it's being drawn on the screen? Is that a CSS cannon that fires in different trajectories? Sure that menu seems to morph on scroll and large images seem to all be loaded with optimum performance, just don't peek around in the devtools, you'd be horrified to know how we made it happen.
And therein lies the answer. CSS and its innovators have always used hacks, push the tools beyond their capable limits to achieve something exciting, causing envious developers to franticly inspect the element, desperate to know just how it was done. This can be a space for amazement but also expose the gaps and issues in CSS, which in turn drive the new features to browsers. It's not surprising that so many fantastic CSS features have been and continue to be released right now, creativity is the big mover. Houdini APIs could make it even easier for developers to try out new ideas and workarounds, the internal workings of CSS have been opened up to encourage more 'hacks'. It's clear this term, whilst considered nasty or wrong in any other context, is an integral part of CSS' history, and it's hard to see that going away.