css file not getting updated

Question

the font of the content of my facebook app keeps getting italicized even when i've removed the italics from the css file. if i make minor changes in the css file and upload it to the server, the firebug shows the unedited previous css file and hence, the app keeps showing unformatted content. what exactly is going wrong here?

i made a new css file and copied the contents of the previous css exactly as it was, and i linked it in all the files which require css. but when i upload these files to the server, facebook canvas doesn't show any css at all. i replaced the css filename with the previous one, and it works. why is this?

Answer 1

Facebook does like to cache things. Persistently. I don't know why the new file wouldn't have worked, by I can recommend 'spoofing' your css filename with a spurious querystring variable, and incrementing it each time you make an update.

eg

href="my_css_file.css?x=1"

Answer 2

Sounds like the browser is caching your CSS file, which is why even Firebug sees the older version.

There are numerous ways you can prevent the browser from caching your CSS file during development (once in production mode, you probably want it to remain in the cache). The most common technique used by web frameworks like Ruby on Rails is to append a random query string to the URL, like so:

<link rel="stylesheet" type="text/css" href="style.css?96234987" />

...but the trick is that it should be different every time, so the browser thinks it's a different file.

Here are links to a simple trick for PHP, a JSP example, and other possible methods.

Answer 3

Actually it looks like facebook is currently experiencing some weird problems with styling. It doesn't cache any new styles, only displays what was previously cached (from yesterday). If you provide a new stylesheet url it will not be able to pull it up (like that url doesn't exist).

During normal conditions what others already suggested should work.

Answer 4

According to Include files on facebook developer wiki:

Stylesheet includes are cached automatically by Facebook. Just include a tag like:

<link rel="stylesheet" type="text/css" media="screen" 
href="http://yourapp.com/stylesheets/style.css?v=1.0" />

Increment the version number upon each change to your style sheet, as specified above.