Do most browsers support CSS for tags such as fb:like?

Question

Most browsers support tags such as

<fb:like ... >    </fb:like>

(which is a Facebook XFBML tag). Is the namespace:tagname actually part of the standard of naming tags?

Also, how about CSS support? Seldom do I directly style it like

fb:like { font-size: 11px }

but for people who are experienced with it, does it work with most modern browsers? (IE 6 too?) Is there any case where it doesn't work or even crash a browser? Probably some of the mobile browsers are not so well equipped to handle this.

Answer 1

Browser handling for tags of the form namespace:tagname is very different in IE to other browsers and is definitely not standardized. However, it seems that in your particular case styling of the element is quite straightforward. Use:

fb\:like { font-size: 11px }

Tested and working in IE6, IE7, Firefox 3.6 and Chrome 10.

Answer 2

Is the namespace:tagname actually part of the standard of naming tags?

Yes. The namespace:type syntax is defined in the XML 1.0 grammar, and as such is adopted by languages like XHTML and XFBML.

Also, how about CSS support?

The namespace operator for CSS3 selectors is |, defined in this spec.

So as a quick example, one might style it like this:

@namespace fb url(http://www.facebook.com/2008/fbml);
fb|like { font-size: 11px; }

: symbolizes pseudo-class (and pseudo-element in CSS2), which clearly fb:like isn't.

Note that this will not work in IE < 9, which doesn't recognize XML-serialized pages and consequently don't implement namespaces in CSS. If you want better browser support you can treat : as part of the element name and use fb\:like as the selector, as Alohci says.

Answer 3

Most pages don't support fb:like tags... They require either an iframe which loads a supporting page from Facebook that does include the required meta tags, namespace, etc. to understand it...

...or they ask the developer to include these meta tags as well as the necessary xfbml links to make their pages parse this namespace.

Namespaces are good and make sense parsing ML. All HTML is really ML with a namespace. Facebook wants you to include their namespace. However, they understand you might not be so willing to, so ask you to instead include javascript to work around these "namespace" issues and just parse the respective tags. Kudos to Facebook for working around this.

Now you're interested in styling these tags. Most browsers consider unknown namespaces as a "display: inline". You can apply "style attributes" to it, but they wont be recognized. You'll either have to follow Facebook's rules for styling these fb:like tags (i.e. what their javascript is willing to parse as an acceptable attribute - you can find that here). Best thing to do? Either wrap this fb:like with a "div" and style that div for positioning purposes, or work with Facebook's defined attributes for their javascript-parsing ML.

Will browsers support the Facebook namespace in the future? Well, considering how long it took for HTML5 to FINALLY be recognized, probably not. Either Facebook will create their own browser (and who knows, even Google created Chrome in 6 iterations / 2 years, and it rivals if not BEATS IE6 / 7 in terms of penetration rates if not all sorts of other reasons).

Or Facebook may be considered a perfectly worthy namespace in future browsers... Doubtful but hey, consider FB / TW are icons used EVERYWHERE (including Starcraft 2!). So ya know... there's hope.

In the meantime, work within their system.

Answer 4

While this is an old post, I think it is worth noting that the <namespace:tagname> pattern is something Facebook uses in their XHP extension. XHP is Facebooks own PHP extension, which make PHP able to interpret XML nodes as PHP objects, essentially transforming XML nodes to simple HTML nodes.

Our own <fb:like> tags are probably still handled by javascript, but I'm guessing XHP is being used somewhere on their end of the API.

Answer 5

Tags like exist only within XFBML framework (i.e. you need to include Facebook JavaScript libraries to make them work)

There is no CSS support the way you are asking.

fb:like { font-size: 11px }

The CSS code above won't work. But you can assign CSS class to this tag the standard way.