FBMLではstyle要素内にハイフンをかいちゃいけないっぽい

と、思ったのですがlist-styleなんかは普通に使えるのでダメってこともないみたいです。

Facebookでファンページを作ったさいには、FBMLというアプリケーションを追加してやればオリジナルなコンテンツを設けることが可能です。HTMLとCSSをササっと書けば自分好みのデザインにすることも可能ということで実際に触ってみました。弊社のファンページは以下になります。
Facebook | まぼろし

また、「Facebookのファンページを自由にカスタマイズする方法 | Webクリエイターボックス」にあるように、style要素内にスタイルを書いてしまうとIEでダメな感じみたいですし、そもそもhead要素外にstyle要素を書くのはどうなの?ってのもあるのですが、いちいちインラインにするのは面倒なのでstyle要素内にスタイルを書いています。

各要素がどうなっているのかな

FBML内にHTMLを書くと各要素にはどんなスタイルが効いているのかを見てました。以下のような感じですね。

要素 指定されてるスタイル
div、ol、dl、table、blockquote 何もなし。ブラウザのデフォルトのまま。
h1
margin: 0;
padding: 0;
color: #333333;
font-size: 14px;
h2、h3、h6
margin: 0;
padding: 0;
color: #333333;
font-size: 13px;
h4、h5
margin: 0;
padding: 0;
color: #333333;
font-size: 11px;
p
margin: 1em 0;
font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
font-size: 11px;
text-align: left;
ul
list-style-type: none;
margin: 0;
padding :0;
dt
color: #777777;
dd
color: #000000;

FBML内ではラッパー的なdivを作って、一度各要素のスタイルを自分好みにリセットしてしまうと良さそうですね。

CSS3は使えるかな

続いてCSS3は使えるのかどうかを試してみたんですが、ベンダープリフィックス付きのプロパティは全滅です。Firefoxではいつからかborder-radiusに関してはベンダープリフィックスなしでもサポートするようになっていますので角丸になりますが、Chromeなんかではダメという状況です。なんでベンダープリフィックス付きのプロパティはダメなんでしょうねー。

他のドメインから背景画像を埋め込んでみる

他の方のファンページを見てみると、ファンページに埋め込まれている画像は全て「http://platform.ak.fbcdn.net/」からはじまるURLとなっているっぽいので、おそらくどこかに画像アップロード機能があるんだと思うのですが、良くわからなかったので、そうなったら別ドメインの画像は埋め込めないのかなーと試してみたらあっさりと埋め込めました。

ダメかなーと思っていただけにちょっと以外でしたね。

セレクタは使えるかな

さてセレクタはどうでしょか。今回は5つのセレクタしか試してないですが、結果は以下になります。

セレクタ 可否
nth-child
target
Begins with
Ends with
last-of-type

というわけで、CSS3から追加になったセレクタは結構使えないっぽいですね。なんで使えないのかなーとここでも悩んだんですけど、先のベンダープリフィックス付きのプロパティもダメな件とあわせて考えてみると、style要素内にハイフンを書いてしまうとダメというのは一貫していますね。もしかしたら違うかもしれませんが、おそらくそういうことみたいです。

その他

デモのためのHTMLには当初「box」というclass名なんかも使っていたんですが、Facebookの違う箇所でも同じclass名があるらしく、スタイルがかぶってしまうということがありました。いちいち確認してるのも面倒ですので、class名には他とかぶらないようなプリフィックスを付けておくのが良いでしょう。

弊社のファンページは変更してしまうかもしれませんが、以下ページが今回試したものです。ソースをコピってFBMLにはってみれば確認できますのでよろしければどうぞー。
FBMLのデモ

comment

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

TrackBack URL :