読者です 読者をやめる 読者になる 読者になる

tyoshikawa1106のブログ

- Force.com Developer Blog -

SFDC:VisualforceとHTML5-開発時に気をつけること

最近Visualforceページを開発していて、reRenderで画面をリフレッシュした際にCSSで指定したスタイルが消し飛ぶ現象に遭遇しました。

今までそんな現象に遭遇したことがなかったので何が原因なのかと思ったのですが、どうも画面リフレッシュ後にHTML5の<section>タグなどがページのソースから除外されているということがわかりました。


この現象は次のコードで再現できます。


上記コードで確認すると次のようになります。

リフレッシュ前

f:id:tyoshikawa1106:20140118212438p:plain

リフレッシュ後

f:id:tyoshikawa1106:20140118212722p:plain


Google Chromeの機能を使ってコードを確認してみると、sectionタグの部分が存在していないことが確認できました。

f:id:tyoshikawa1106:20140118213626p:plain

VisualforceではHTML5のタグを使用できない...というわけではなくHTML5のタグをVisualforceページで使用したい場合は、apex:pageタグ内に docType="html-5.0" を指定する必要があります。

f:id:tyoshikawa1106:20140118213135p:plain


きちんとdocType="html-5.0"を指定してあげることでリフレッシュ後に除外される問題を回避できます。


ということでリフレッシュ時にCSSが崩れる場合は、docTypeの指定を忘れていないか確認しましょう...という話の予定だったのですが、CSSが崩れるのを確認した画面では、ちゃんとdocTypeが指定されていました。


docTypeを指定していてもCSSが崩れる原因はわからなかったのですが、何かリフレッシュ時にコードに影響がでるパターンがあるみたいです。(その画面ではsectionタグなどをdivタグに変更することで問題を回避できました。)

HTML5のタグはForce.comサイトで使用するための画面でよく使用することになると思います。開発の際にはリフレッシュ時にデザインが崩れたりしないか気をつけたほうがいいかもしれないです。