Oct 30 2011

CSS Media Queries

Category: CSS,HTML5,Web Developmenttuxie @ 21:45

October’s Mozilla Dev Derby was about CSS Media Queries.

According to the Mozilla Developer Network documentation:

CSS 3 enhances support for media-dependent style sheets by letting style sheets be more precisely labeled. A media query consists of a media type and at least one expression that limits the style sheets’ scope by using media features, such as width, height, and color. Media queries let the presentation of content be tailored to a specific range of output devices without having to change the content itself.

This means, basically, you can switch style sheets depending on different properties such as the size of the browser window. Is a simple yet powerful feature, but I think the biggest challenge is coming up with something creative using such an unsophisticated feature.

I submitted two demos:


This demo aims to show how properties can be manipulated based on the browser window size. This works by defining different stylesheets for each of the dimensions you want to take actions on. For the demo I created 14 stylesheets, a base one for every widow size and 13 others for 100px, 200px, 300px and so on until 1300px width.

As you resize the window you’ll see changes in the rotation, opacity, background, width and height of the elements.

This was my first approach to Media Queries, nothing complex but it was fun to spice it up a little with transitions.

Santa’s Media Queries

Using CSS Media Queries this demo detects the size of your browser window and removes members of the family. Marge and Homer are not as alone as they’d like to be.

My second demo was more a design challenge than a code challenge. Given an image of The Simpsons sitting in their famous couch I started removing them one by one with GIMP until only Homer, Marge and Santa’s little helper were left. Brian, a friend, recommended me to add something more, that’s how spiderpig got behind the couch. I was told that it looks like he eats the people =P

It got over 100 visits in just 24hs, I was impressed.

Some very good demos by other developers in no particular order:

Maybe Michal meant “in” instead of “is” in “Too many fish is the sea”. Check out michal.b‘s other demos, they are great.

I’m already thinking about what I’m going to do for next month’s Derby with canvas. Let’s see what I can come up with.

I disabled comments because I was sick of spam. If you want to comment on anything write me to alvaro@(this domain).