Monday 12 August 2013

What are CSS Media Queries and how to implement them

CSS Media Queries are a feature in CSS3 which allows you to specify when certain CSS rules should be applied. This allows you to apply a special CSS for mobile, or adjust a layout for print.
The basic syntax looks like this:

// normal style
#header-image {
    background-repeat: no-repeat;
    background-image:url('image.gif');
}

// show a larger image when you're on a big screen
@media screen and (min-width: 1200px) {
    #header-image {
        background-image:url('large-image.gif');
    }
}

// remove header image when printing.
@media print {
    #header-image {
        display: none;
    }
}

But can also be called like this:
<link rel='stylesheet' media='all' href='normal.css' />
<link rel='stylesheet' media='print' href='print.css' />
<link rel='stylesheet' media='screen and (min-width: 701px)' href='medium.css' />
The advantage of this method is that only the valid CSS is downloaded; so no print.css is only downloaded when printing (or using print preview).
Combining mediaqueries can be done by combining them with an comma. The query below is to target devices with an device-ratio of 1.5. The first element is for webkit, the second if for all other browser (1.5 * 96).
@media screen and (-webkit-device-pixel-ratio: 1.5), screen and (resolution: 144dpi)
Because it's cascading all non-overwritten rules remain valid; e.g. the background remains no-repeat.
Using this syntax you can do a couple of things; 
  1. Tweak that font so it really fits on that old iPhone,
  2. Remove menus and fluff from Print pages
  3. Create a full responsive site, by creating 'breakpoints' where the page should get a different design.
For example:
#block1, #block2 {
    float: left;
    width: 100%;
}

@media (min-width: 1000px) {
    #block1, #block2 {
        width: 50%;
    }
}
This example shows the 2 blocks on big screens next to each other, while on small screens they will be displayed below each other.