ブログのエントリーはここから
IE4 Netscape4 に配慮する。
CSSでレイアウトを行う時に問題となるのは対象のブラウザをどうするかではないでしょうか。
現行の最新ブラウザ、いわいるモダンブラウザを対象とする場合が多いのですが
問題は・・・・
IE4・Netscape4
等のCSSにしっかり対応出来ないブラウザ。
正直なところこれらのブラウザにCSSでレイアウトするのは不可能・・・・
いやいや、断言は出来ませんがモダンブラウザとの共存はかなりハードだと思います(^_^;)
最新より少し手前のものに関してはがんばり次第だと思います。（出来ればやりたくないですが…）
そんなこんな？なのでこれらのブラウザは対象としないとします。
（対象とする場合はtabelでレイアウトする方が得策でしょう。）
しかし対象外にするとしても、そのままレイアウトが崩れるCSSを適用させるのは
作り手の横暴です。ユーザーに配慮していないとても酷い話です。
そこで「IE4・Netscape4」にはCSSを適用しないようにする方法をとる事とします。
方法は以下の通りです。↓
○Windows版IE4
→@importで弾く
○Netscape4
→@importによる取り込みに未対応、media属性でscreen以外を指定
例を出すとこんな感じです。
※今回は読み込むCSS名をimport.cssして例を書きました。
1、htmlのheadの部分に以下の用に書き読み込みようのCSSを読み込みます。
読み込んだ先のCSS（今回だとimport.css）には※スタイルは記述しません。
なのでスタイルの記述されているCSSを別途用意します。
私の場合は以下のようにレイアウトに合わせて分けるようにしています。
common→全体に関わるものを記述。基準とするフォントの指定やスタイルの初期化等。
header→ナビゲーション等のヘッダー部分。
primary→メインコンテンツの部分。
secondary→サブコンテンツの部分。
footer→フッター部分。
3、読み込んだ先のCSS（今回だとimport.css）に@importでスタイルを記述したCSSを
を読み込む
/*import.css*/
@charset "utf-8";
@import url(common.css);
@import url(header.css);
@import url(primary.css);
@import url(secondary.css);
@import url(footer.css);
/*import.css*/
このようにする事でCSSをまったく読み込ませない状態になります。
ここで大事になるのが先日書いた htmlを正しく書く です。
htmlを正しく書いていればCSSが切れている為に見た目は質素になりますが、
最低限の情報を収集する事は可能になります。
