最近Visualforceページを開発していて、reRenderで画面をリフレッシュした際にCSSで指定したスタイルが消し飛ぶ現象に遭遇しました。
今までそんな現象に遭遇したことがなかったので何が原因なのかと思ったのですが、どうも画面リフレッシュ後にHTML5の<section>タグなどがページのソースから除外されているということがわかりました。
この現象は次のコードで再現できます。
上記コードで確認すると次のようになります。
リフレッシュ前
リフレッシュ後
Google Chromeの機能を使ってコードを確認してみると、sectionタグの部分が存在していないことが確認できました。
VisualforceではHTML5のタグを使用できない...というわけではなくHTML5のタグをVisualforceページで使用したい場合は、apex:pageタグ内に docType="html-5.0" を指定する必要があります。
きちんとdocType="html-5.0"を指定してあげることでリフレッシュ後に除外される問題を回避できます。
ということでリフレッシュ時にCSSが崩れる場合は、docTypeの指定を忘れていないか確認しましょう...という話の予定だったのですが、CSSが崩れるのを確認した画面では、ちゃんとdocTypeが指定されていました。
docTypeを指定していてもCSSが崩れる原因はわからなかったのですが、何かリフレッシュ時にコードに影響がでるパターンがあるみたいです。(その画面ではsectionタグなどをdivタグに変更することで問題を回避できました。)
HTML5のタグはForce.comサイトで使用するための画面でよく使用することになると思います。開発の際にはリフレッシュ時にデザインが崩れたりしないか気をつけたほうがいいかもしれないです。
