How to specify a device-specific css file when I compress all the css files using pipeline in Django?

Question

In order to use CSS3 Media Queries to create a mobile version of my website, I'm gonna create a seperate css file used for small screen devices. If I don't use pipeline compressor in django, I would just add the following line after my main stylesheet:

<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="small-device.css" />

But now I'm using Django pipeline to compress all my css files including jquery,jquery-ui and my regular css file, it looks like as follows：

PIPELINE_CSS = {
'website-css': {
    'source_filenames': (
        'css/website-ui-theme/jquery-ui-1.8.19.custom.css',
        'css/jquery.lightbox-0.5.css',
        'css/shared.css',
    ),
    'output_filename': 'css/website.css',
    'extra_context': {
        'MEDIA_DOMAIN': settings.MEDIA_DOMAIN,
    },
},
}

So I'm wondering how I can include the media="only screen and (max-device-width: 480px)" information in my new small-device-spefic css file in the pipeline to let it know it's just for small devices.

score 1 · Accepted Answer · answered Feb 25 '13 at 18:14

Move your media query to the CSS file itself.

@media only screen and (max-device-width: 480px) {

   // Your CSS rules

}

The pipeline is just a compressor. It doesn't have any logic to handle things like conditional inclusion or media conditional link tags.

It literally just takes a list of files and turns them into one giant file.

score 1 · Answer 2 · answered Feb 25 '13 at 18:16

If your small-device.css is small (which it usually is) then it doesn't really matter if all devices get the code or not. Especially not since pipeline will compress it for you. In this case you just add small-device.css to the end of source_filenames and add the media query to that file like so:

@media only screen and (max-device-width: 480px) {

    /* All your small-device rules go here... */

}

How to specify a device-specific css file when I compress all the css files using pipeline in Django?

2 Answers2