XML宣言について
HTML2011年2月5日
HTML文書はHTMLタグから始まりますが、XHTMLの場合、HTMLタグの前に「XML宣言」と「DOCTYPE宣言」を記載する必要があります。
XML宣言
<?xml version="1.0" encoding="UTF-8"?>
DOCTYPE宣言
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" />
簡単に言うと、「XML宣言」は「この文書はXMLである」ということを宣言するためのものであり、「DOCTYPE宣言」は言語のバージョンや定義を宣言するための記述になります。
このXML宣言は「必須」ではありませんが「推奨」されているものであり、HTMLにはXML宣言が必要とされています...が、この記述を加えることで、IE6においては後方互換モードで動作し、通常とは異なったCSSの解釈をすることになります。
以下、具体的にCSSの解釈が変わる箇所です。
- ボックスの幅の解釈の違い
- img要素のpaddingプロパティが効かない
- marginプロパティのautoが効かない
1.ボックスの幅の解釈の違い
標準準拠モードの場合、width・padding。marjinを同時に記述した場合、widthの幅を基本とし、paddingとmarginが足されていきます。
しかし、後方互換モードではwidthの幅にpadding・marginの幅も含まれることになり、width:500px、padding:10px、margin:10pxをした場合、実際のボックスの幅は460pxとなってしまいます。
2.img要素のpaddingプロパティが効かない
これはそのまんまですが、後方互換モードの場合、img属性にpaddingを設定しても余白は確保されません。
3.marginプロパティのautoが効かない
ボックスのセンタリングをするためにmargin:0 autoといった記述をよく記述しますが、IE6の後方互換モードではこれを解釈しません。ボックスをセンタリングするためにはtext-align:centerを併用し、かつdivを入れ子にする必要があります。
XML宣言は入れなくてもよい
未だシェアのそれなりにあるIE6を無視できない現状を踏まえると、できることならXML宣言は避けたいものです。
色々詳しく調べてみたのですが、W3Cの勧告にて、「XML宣言は文書のエンコーディングがデフォルトのUTF-8またはUTF-16以外のとき、XML宣言は必要です」と明記されています。
つまりDOCTYPE宣言でのcharsetがUTF-8もしくはUTF-16であれば、XML宣言は問題なく省略する事ができます。
ただし、サーバーの仕様上、EUC-JPやshift_jisに限定される場合もあり、その場合においては記述しなくてはなりませんが、個人的にはそのような場合においても省くべきだと思います。CSSの煩雑さやパフォーマンスの高いHTML設計を行う意味でも、あえて記述する必要は無いでしょう。
先日、クライアントのガイドラインに沿って設計する案件があり、そのガイドラインに「XML宣言は必ず記述すること」とあり、マジかよーと思いましたが、XML宣言を記述した上でIE6対応も含めてガチでCSS設計する、というのは初めてだったので大変勉強になりました。
この記事を読んでいる方にオススメの記事
- HTMLURL正規化[rel=”canonical”]で重複コンテンツ対策
- HTMLauケータイでJPEG画像が表示されないトラブル
- HTMLDreamweaverでの正規表現
- HTMLHTML5/CSS3で設計してみました
- HTML国内のレスポンシブWebデザイン10選
- HTMLHTML5の特徴をまとめてみました
- ※承認制のため、即時には反映されません。
この記事にコメントする