19

I am trying to create a dynamic CSS file using the Django templating engine or any other means.

Currently, I have a CSS rule that looks like this:

background-image: url('http://static.example.com/example.png');

Where http://static.example.com corresponds to the STATIC_URL variable in Python. Using the Django templating engine, I could theoretically write something like this:

background-image: url('{{ STATIC_URL }}example.png');

My question is, how can I use the Django templating engine (or any other means) to generate CSS dynamically?

Improve this question

2 Answers 2

Reset to default
14

A very good solution here is to use django-compressor. Firstly, if you are serving more than one CSS file, compressor is going to help improve page load times by dropping the number of requests.

A side effect of compressing / concatenating files is that compressor rewrites urls in the css file, so relatively referenced static files (e.g. ../img/logo.png) automatically become fully qualified urls, with the static file url (e.g. http://static.example.com/img/logo.png).

Alternatively you can write custom filters to achieve what you want, or, you can compress your completely static CSS, and some dynamic portions into a single file (for e.g. do this in your base layout file):

{% compress css %}
   <link .... />
   <style>
       .some_rule {background-image:{{MEDIA_URL}}/img/logo.png}
   </style>
{% endcompress %}

This also means you don't have to worry about efficiency, as the css/js files are generated on first access of a template which uses them, and they are stored as plain files in your static directory (this is configurable), so they are served as normal, static files.

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

Thanks for the nice explanation. This was one of the solutions I came across when searching, but I didn't see an easy way to use it.
It is a great tool to use to improve performance, I usually just use it for concatenation, and run a yuicompressor on the source css and js files on deploy, and concat different CSS files for various browsers with quirks (requires having browser detection middleware, and variables available in RequestContext to achieve)
I don't understand how the ../ works in the development environment, but it does. Anyone know?
11

You basically have two options:

  1. Serve your CSS dynamically, with an entry in urls.py, etc., just as if it were an HTML page. Your template file will simply be CSS instead of HTML, but will use normal Django template syntax, etc.

  2. Shortcut: Reference your background image with a relative path. This may or may not be possible for your environment, but it's a convenient way of having a static CSS file reference different paths depending on where it's hosted.

Improve this answer

4 Comments

Thanks. I don't think the relative path method is robust enough for my needs, but might work in another setup. The first method would work, but I'm a little worried about the speed.
You may like the @cache_page decorator: docs.djangoproject.com/en/1.3/topics/cache/#the-per-view-cache
@Wylie - You can test the speed, but there's probably not going to be a problem. I have a user.css file that my pages reference that is not a file at all, ever - it's dynamically generated every time it's requested. I thought of doing a generate-and-cache but there has been no performance reason to do so.
I know it has been a while, but could you elaborate on "Serve your CSS dynamically, with an entry in urls.py, etc., just as if it were an HTML page."?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.