I've been playing with the idea of adding a twitter feed to this blog for a while. I couldn't find a place for it that felt right. A few weeks ago I read Jon Hicks post on CSS Media queries, which got me thinking.

If you have a resolution 1100px or wider and a browser that supports css media queries, you'll see my twitter bar on the right hand side of the screen

If you don't (for example if you're using IE!) you'll see the usual clean layout. This is achieved using the following css media query code:

#tweet { display: none; }

@media screen and (min-width: 1100px) {
    #tweet { display: block; position: absolute; right: 0; top: 200px; width: 17%; color: White; background-color: black; padding: 10px; font-size: small; }
}

The tweet bar is just an html div with the id "tweet". All browsers see the display: none css. Browsers that support CSS media queries where the media is a screen (as opposed to print or handheld etc) and the display width is at least 1100px will inject the second selector which renders the tweet bar on the right of the screen.

This layout is definately not 100% complete, but it's a start and an interesting investigation into part of CSS3 that I didn't know existed!