Editing CSS

Overview

One can either add CSS to the default CSS already used by apps, or completely replace all of it with a custom CSS, possibly starting with the default CSS and then editing it. The former is generally good if the changes are really small, the latter is better for extensive customization.

CSS for Facebook

In facebook the CSS will be processed so that it can only apply inside the application canvas (this means no styling of facebook tabs, menus), every rule will be automatically prefixed with .app_content_<application_id>, so the CSS rules can't refer to .app_content or any of the elements outside it. Certain Classes/IDs will also be renamed by Facebook in case they consider the name as something that could collide with Facebook-used names, this all happens automatically so it only mean that using firebug you should be aware that #app<application_id>_something actually is #something in the original CSS.

Facebook also limits the size of the CSS to 64KB, the catch is that this is after facebook has processed it, and it is almost impossible to determine how much bigger the processing makes the CSS without actually having facebook process it. If it's too big facebook returns an empty CSS possibly containing an error message about the size (but that is not visible anywhere except in the CSS file as processed by facebook). This is something to keep in mind when copying the whole default CSS as it is quite large and might grow too big once additional rules are added (to help with this one can remove things from the copied default CSS that don't apply to the campaign format the CSS is being written for, so if you customize sweepstakes you don't really need all the video-entry styles).

Facebook also limits the types of CSS fields that can be used, generally all standard CSS is allowed, also certain browser-specific things are allowed (for example -moz-border-radius), but a lot of browser-specific fields are not (at this time) allowed and will automatically be filtered out (for example -webkit-border-radius).

In terms of assets for your custom design, Facebook proxies assets and will not keep re-downloading them from the original server. This is generally a good thing because this saves the original server from being hit with massive load but it does also mean there is no easy way to tell Facebook to update its cache other than just renaming the file of an asset.

CSS for Microsite

On the microsite there is no limit to what can be done with CSS.