DataURI on Dynamic Styles
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
static
templates
.gitignore
README
app.py

README

DataURI and Dynamic CSS
=======================

Read the related article at http://brajeshwar.com/2010/dynamic-css-and-datauri-to-the-rescue/

How this thing works
--------------------

Every page has some icons to be shown. The default placeholder icon is
inserted using a simple CSS rule and then after page load some simple
JS code gets the IDs of the actual images to be displayed (from the
special attribute `imgID`) and then constructs a link to a handler
which generates a CSS file with Data-URIs embedded in it so that we
can download all the required images with a single HTTP call and
insert them seamlessly into an HTML file.

Example:

Say the markup is like this -

    <li class="img img_500" imgID="500">Foo</li>
    <li class="img img_600" imgID="600">Bar</li>

The JS code extracts the "imgID" from the li and constructs a query
like the one below and inserts it into the DOM inside a link tag -

     stylesheets/logos.css?i=500|600

Then, the special handler generates a CSS file by reading the actual images and base64 encoding them.
The CSS file is loaded into the DOM and the new images show up instantly.

Limitations
-----------

We are currently limited by the maximum number of characters allowed
in an URL, though some clever form of encoding the data might help.

Running the sample app
----------------------

$ sudo easy_install flask
$ python app.py
$ open http://127.0.0.1:5000/

Authors
-------

Baishampayan Ghose http://freegeek.in
Brajeshwar Oinam http://brajeshwar.com
Prajwalit Bhopale http://prajwalit.com
Sidhant Godiwala http://sidhantgodiwala.wordpress.com