Facebook Cookbook

Facebook and CSS: FBSS?

Problem

I think I’m getting a handle on this FBML thing, but what about CSS? Is there an FBSS?

Solution

Actually, no. You’re pretty much free to do whatever you’d like from a CSS perspective, and you can definitely follow best practices, such as linking to external CSS files rather than putting everything inline.

Discussion

You’ll likely run into some things that don’t work quite the way you expect them to, but for the most part, CSS on Facebook is the same as CSS off Facebook. A few things to look out for:

• CSS files, like images, are cached by Facebook’s server, so you need to change the name every time you change the contents of the file; otherwise, the Facebook server will continue to serve up the old version. See Beating the CSS, JavaScript, and Image Cache for two ways around this.

• Absolute positioning is one of the few things that is a little wonky. In the early days of Platform, it was possible to absolutely position elements from inside your app outside of the Canvas page frame, making them look like they were part of the Facebook interface. Since this posed obvious security issues, the div that contains your application’s content (which will have an id like app_content_12345) has the canvas_rel_positioning class applied, which sets it to position: relative. Since absolutely positioned elements inside of a relatively positioned element are positioned within their parents, that resets your top, left, bottom, and right values to being context-sensitive to ...