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:
- You must style the HTML5 page at css1k.com.
- Submissions must be in a single CSS file up to 1,024 bytes in size (minification is permitted).
- Vendor prefixes do not count toward the total. You should submit non-prefixed code and css1k.com will add the browser prefixes for you.
- External resources such as images, fonts and @imports are forbidden. You can’t use data URIs either — shame!
- Cross-browser compatibility is preferable, but you can use graceful degradation if necessary.
- 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.