As with general Web coding, when dealing with CSS and Static FBML, you have to take into account how different browsers render your HTML and CSS, particularly with Internet Explorer.
Because you can’t put the standard browser-detection scripts in your Static FBML box, as those methods require access to the <head /> tag, how can you detect the user-agent (browser) and provide unique content (particularly, a different stylesheet or styles) so your custom tab renders properly across all browsers and platforms? The answer: fb:user-agent.
Browser Detection with FBML fb:user-agent to the Rescue!
As I’ve noted on another post, you must use an external stylesheet for your CSS to work with Internet Explorer, using the <link /> tag.
If you need to have special CSS that addresses, say, an Internet Explorer CSS bug, you can create an IE-only stylesheet and link to it. Using the fb:user-agent FBML tag, you can call this stylesheet and only the targeted browser(s) will see that <link /> tag.
For example, if you need special CSS for just IE 6 and IE 7:
<fb:user-agent includes="ie 6,ie 7">
<link rel="stylesheet" type="text/css" href="http://www.my-domain.com/ie-6-7-only.css" />
Only IE 6 and IE 7 will see that <link /> tag and that CSS file can have styles that overwrite the general stylesheet styles of the same name, thus accommodating Internet Explorer’s often-lamented non-standard CSS implementation.
To target all Internet Explorer versions:
<link rel="stylesheet" type="text/css" href="http://www.my-domain.com/ie-only.css" />
There are other examples on Facebook’s page on the fb:user-agent FBML tag.
Make Sure You Call Your Stylesheets in the Correct Order!
If you use the above method to link to additional, browser-specific stylesheets, make sure you call them in the right order.
Most likely, you’ll want to call the general stylesheet first, followed by the one that creates browser-specific rules that overwrite the same rules in the general stylesheet.
The most important thing to remember is that as the stylesheets are loaded, style rules in the next stylesheet will override the rules in the previous stylesheet, if they have the same name.
Being able to detect what browsers are viewing your tab and tayloring your CSS to accommodate those browsers is essential to Web coding, and the fb:user-agent FBML tag is the ticket.
fb:user-agent Can Do Much More
You can also use the tag to display any content for specific browsers, or to exclude specific browsers. But browser detection seems the most useful application.