cssdjangomedia-queriesdjango-pipeline

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

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.

Solution

  • 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.