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:
width=400CSSBattle 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

instead of

since it’s shorter, and we don’t close the tag at all since it’s not required for things to render.
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

This introduces a pretty important golfing trick: replacing spaces with plus signs allows us to remove the quotes around attributes, saving a couple bytes. I’m not totally sure why this works. Someone suggested it may be related to this part of the HTML spec. If you have a better answer, please let me know!
This attempt also cleans up a couple of whitespace mistakes from the last attempt.
Attempt 3: 126 bytes

Using a tag instead of a

means that:
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 ( included), and does two great things:
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