Is it possible to pass parameters to css file?

Question

I see a statement like the following in HTML source

<link rel='stylesheet' type='text/css' href='/css/jquery-ui.css?700241AD2550.node' />

What does this mean? Is it like passing a param or a suffix to the filename?

Answer 1

It is not, at least in this context, passing details to the CSS. Generally that's a means of ensuring a browser's cache can be busted by the CSS provier when assets are being concat'd or minified. using my.css?somestringofnumber is also generally considered inferior to using a unique filename, for example my-12312341234.css but both methods are used widely.

Note the asset pipeline guide on fingerprinting for Rails:

1.2 What is Fingerprinting and Why Should I Care?

Fingerprinting is a technique that makes the name of a file dependent on the contents of the file. When the file contents change, the filename is also changed. For content that is static or infrequently changed, this provides an easy way to tell whether two versions of a file are identical, even across different servers or deployment dates.

When a filename is unique and based on its content, HTTP headers can be set to encourage caches everywhere (whether at CDNs, at ISPs, in networking equipment, or in web browsers) to keep their own copy of the content. When the content is updated, the fingerprint will change. This will cause the remote clients to request a new copy of the content. This is generally known as cache busting.

And on the query string method:

The query string strategy has several disadvantages:

1. Not all caches will reliably cache content where the filename only differs by query parameters: Steve Souders recommends, "...avoiding a querystring for cacheable resources". He found that in this case 5-20% of requests will not be cached. Query strings in particular do not work at all with some CDNs for cache invalidation.

2. The file name can change between nodes in multi-server environments: [...] When assets are deployed to a cluster, there is no guarantee that the timestamps will be the same, resulting in different values being used depending on which server handles the request.

3. Too much cache invalidation: When static assets are deployed with each new release of code, the mtime (time of last modification) of all these files changes, forcing all remote clients to fetch them again, even when the content of those assets has not changed.

Fingerprinting fixes these problems by avoiding query strings, and by ensuring that filenames are consistent based on their content.

Answer 2

It seems like a token which is there for browser so that browser loads the new version of file and don't use the cached version. I don't think its possible to pass a parameter to a css file.

Answer 3

You can't pass a parameter to a CSS file, but if you can get in between the request for the CSS and the return of it, you can modify the returned file. For example:

http://code.tutsplus.com/tutorials/how-to-add-variables-to-your-css-files--net-2663

Answer 4

Just like how links to webpages can use query parameters (after the "?") and the webserver can return a webpage that depends on those query parameters, links to stylesheets can also use query parameters and the webserver can return a dynamically generated CSS file that uses those parameters.

For Javascript this can be used for JSONP requests, usually with a ?callback= parameter.

For CSS, dynamic stylesheets are less common. Often, its just a trick to work around browser caches.

Answer 5

Yes, it's possible. However, probably this is not the case.

Assuming you use Apache + PHP, jJust add this to your httpd.conf file:

<Files "*.css">
    SetHandler application/x-httpd-php
</Files>

Now .css will be parsed with PHP parser, so you can read GET parameters.

Note this could avoid caching and thus hurt performance. And could be dangerous if you allow people to upload .css files to your site.

Answer 6

You can call that number a version. Each time you modify your css, it's best to version it so in case your browser don't display the latest modifications on the web, the version part forces it to reload the css again and the latest edits could be visible on the web.

Best way to version your css is :

<link rel='stylesheet' type='text/css' href='/css/style.css?v=1' />
<link rel='stylesheet' type='text/css' href='/css/style.css?v=2' />
......

Answer 7

I am guessing that this is some way to avoid caching the css file on the browser. This is done by abusing the href field since the ?... will be ignored by your(or the) server, while the browser will still think its fetching a file different from the original .css file.

For instance pretend I wanted to refresh the css on a page, I could do something like this:

<link rel='stylesheet' type='text/css' href='/style.css?version_0'/>

and then later to reload it:

<link rel='stylesheet' type='text/css' href='/style.css?version_1'/>

and so on...