2018年5月28日

実験用スキンについて

実験に用いているスキンは、横メニューの3カラムマルチレイアウトスキン(と勝手に呼んでます)です。ボーダーがうるさかったり、色が気持ち悪いかったりするかもしれませんが、これはマージンなどがどう変わるか分かりやすくするためにつけたものです。 

3カラムマルチレイアウトスキンは1スキンファイルで1カラム、2カラム(左サイドバー)、3カラムに対応できますので、スキン製作者も楽ですし、利用者もいちいちスキンファイルを変更せずにレイアウトが変更できるので自分としては良いアイデアだと思っています。ただ、各種ブラウザへの対応が難しいのでこれまで一部を除き実験レベルに収めていました。

今後、実験を通して実用に耐えうる標準的なスキンの雛形のようなものが出来上がったらリファレンス(と呼ぶにはおこがましいですが)スキンとして公開したいと思います。

        

DOCTYPE宣言による違い

最小化

DotNetNuke4.xでは何も指定せずにスキンを作成してアップロードした場合、以下の既定のDOCTYPE宣言が挿入されます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

しかし、これではあまりに古い!というわけではありませんが、最近のエディタ、例えばVisual Studio2008のHTMLエディタあたりでも特に設定しなければXHTML1.0でファイルを作成しますので、何とかあわせられないのかという気はします。

そこで、全く同じHTML+CSSのスキンファイルでDOCTYPE宣言のみを変えて、一体どういう影響があるのかを試してみることにしました。試したのは、以下の通りです。

  1. HTML4.0 Transitional システム識別子なし(DotNetNukeの既定値)
  2. HTML4.0 Transitional システム識別子あり
  3. HTML4.0 Strict システム識別子なし
  4. HTML4.0 Strict  システム識別子あり
  5. HTML4.01 Transitional システム識別子なし
  6. HTML4.01 Transitional システム識別子あり
  7. HTML4.01 Strict システム識別子なし
  8. HTML4.01 Strict  システム識別子あり
  9. XHTML1.0 Transitional(XML宣言なし)
  10. XHTML1.0 Transitional(XML宣言あり)
  11. XHTML1.0 Strict(XML宣言なし)
  12. XHTML1.0 Strict(XML宣言あり)
  13. XHTML1.1(XML宣言なし)
  14. XHTML1.1(XML宣言あり)
  15. XHTML Basic1.0
  16. WML2.0

ちなみに、興味から15,16もやってみましたがこれらはモバイル用なので参考扱いとし、評価からは外すことにします。

結果は、実際に各種ブラウザで確認してもらえたらと思いますが、簡単に書くと、IE以外(Safari,Opera,FireFox,Chrome)はほとんど変化がありません(今回、IE5以前とNetscapeは対象に入れていません)。IE7の場合、HTML4.0 Transitional のシステム識別子なしのものが他のパターンに比べてマージンが違う程度で、これはこれで気をつけないといけませんが、問題はIE6です。HTML4.*のTransitional でシステム識別子なしのもの(1と5)とXHTMLでXML宣言ありのもの(10,12,14)以外は全て3段組みのレイアウトが崩れてしまいました。

どうやら、これらはIEが標準モード(Standard mode)あるいは互換モード(Quirks mode)で動いているのかで変わってくるようです。つまり、強制的に互換モードに変えてしまうことでレイアウト崩れを防ぐことができるようになるということです。この方法としては裏技的ですが、DOCTYPE宣言の出現前に半角空白または改行以外の文字を入れてやることで互換モードにすることが出来ます。つまり、XML宣言が入ることで結果的に互換モードになるというわけです。Microsoftが意識してこのような実装にしたのかはわかりませんが、とにかくこれでXHTMLでもレイアウトが崩れなくても済むようになります。

この結果から、今後はDotNetNuke5.0への移行も考慮して、XML宣言付きXHTMLでスキンを作っていきたいと思います。