Code golfing is a type of programming where the goal is to accomplish a task using as few bytes as possible. CSSBattle is a code golfing battleground where players complete to recreate target images using CSS and HTML.
The rules are fairly simple:
No external resources (sorry, no )
Your solution must render correctly in Chrome (just for scoring purposes)
This can be a pretty fun departure from day-to-day front-end work. There’s no need to worry about maintainability, semantics, performance, accessibility, or anything other than making a thing really, really small and still render correctly.
A golf solution in 12 attempts
This type of thinking is a pretty dramatic departure from how most of us are writing front-end code for production sites (I hope!), so I’ve been posting all of my solutions on GitHub in an effort to both share some knowledge and learn from others. As a fortunate side effect, it also means there’s a fairly detailed history of my submissions.
Here’s a start-to-finish account of my attempts CSSBattle’s 7th target, which looks like this:
CSSBattle Target #7 — Leafy Trail
The “just center the dang thing” method
A reasonable first approach is to simply stick an element in the middle of the page, slap a box shadow and a border radius on it, and call it done. If we were writing this “for real,” it might look like this:
But that’s 423 bytes! That won’t do for CSS golf, so let’s see what we can remove.
Attempt 1: 144 bytes
Here’s a golfed version. There’s definitely some weirdness going on here — no , no , no, no nothin’. The browser doesn’t need them (and, in fact, inserts them for us), so we save a lot of bytes by leaving them out. We’re using
The CSS itself isn’t much different, aside from the fact that we’ve used a huge box shadow instead of a background on the body element (“background” is long so avoiding it can be beneficial). It’s also inlined in the element since a
tag costs extra bytes.
You may have noticed that we used 5in for the spread in our last box shadow. Playing with weird units is a huge part of CSS golfing. In this case, we just need the shadow to cover the 400×300 canvas and ‘5in‘ (480px) is shorter than any pixel value.
Attempt 2: 141 bytes
Using a tag instead of a
We no longer spend bytes setting height or width on a paragraph
We get access to bgcolor
bgcolor is a deprecated attribute that comes up often in CSS golf solutions. It only works on a few tags (
Saves us from spending bytes on “background:“
Saves us a byte by allowing us to omit # in hex colors. Additionally, if a color ends in one or two zeros, we can remove them and it will still render correctly. For example, FFFF00 is the same as FFFF.
There’s a golf regression in this iteration! Can you spot it?
The “border” method
By this point, I had spent quite a few hours tinkering on and off with this target and was getting pretty stuck. Fortunately, CSSBattle has a friendly community on Spectrum that is more than willing to lend a hand.
At the time, Praveen held the #1 spot with two bytes fewer than I had managed, so I asked for some help. He suggested leveraging both the and elements to position everything while using borders in place of a background color.
Attempt 4: 126 bytes