Less than 10000 bytes of CSS3 Memory

You thought you were done with CSS3 Memory? I thought so too. Then 10K Apart came along, and I felt like finding out if I could optimize it to 10 kilobytes. Well, what do you know? It’s possible.

The original size was 120k (excluding typekit), and it got optimized to 9.3k. (It’s effectively 4k with gzip compression.)

How did I optimize it?

  • Removed line breaks and tabs from HTML, CSS and JS,
  • rewrote the initialization (which creates the cards) from PHP to JS. (Well actually @maarfijs did most of this,)
  • created a smaller pattern on the back of the cards,
  • removed the ampersand images, and used font-stacks of pre-installed fonts. (The 10K contest allows for Typekit usage, and I wanted to add a 1meg kit – just for kicks – but decided against it)

There’s a tiny chance that I will win, because there are some really cool entries, but it was well worth finding out if it was possible.

You can check out the Original CSS3 Memory or the 10k version.

Update: You can now rate CSS3 Memory 10k