Skip to main content

What can YOU do with 1 Kilobyte of CSS?

By Craig Buckler
JavaScript
Share:

I’ve been moaning about bloated web pages for some time now. Despite my protests, web page weights are rapidly approaching 1MB.

The CSS1K project illustrates what you can do with a single kilobyte of slim-lined stylesheet code. It’s been influenced by galleries such as Zen Garden and JavaScript competitions such as js1k.com but, to my knowledge, there’s never been a CSS challenge.

The rules are simple:

  1. You must style the HTML5 page at css1k.com.
  2. Submissions must be in a single CSS file up to 1,024 bytes in size (minification is permitted).
  3. Vendor prefixes do not count toward the total. You should submit non-prefixed code and css1k.com will add the browser prefixes for you.
  4. External resources such as images, fonts and @imports are forbidden. You can’t use data URIs either — shame!
  5. Cross-browser compatibility is preferable, but you can use graceful degradation if necessary.
  6. Your code must be released under the open source MIT license.

There are a few dozen entries so far. I particularly liked:

  • Skewed — clever, although not a great user experience!
  • Bbubles — great demonstration of CSS transitions
  • Bookshelf — what did you expect?
  • Desktop — Windows XP in 1K!
  • Geocities — ahh, the nostalgia!

There are relatively few impressive examples so this is your chance to show off your ninja-like CSS skills! If you decide to post an entry, please leave your link in the comments below…

Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.

Integromat Tower Ad