IE7とCSS

『速習Webテクニック スタイルシート 上級レイアウト』から

河内 正紀

株式会社ロクナナ

IE7で強化された機能の例

• セキュリティ面の向上
• タブブラウジング機能の追加
• RSSリーダーの搭載
• ページズーム機能
• 透過PNG のサポート
• CSSサポートの強化

この機会に

馴染みの薄いセレクタやプロパティを使ってみる

各種セレクタ

• 子供セレクタ（A > B { }）
• 隣接セレクタ（A + B { }）
• 属性セレクタ（input[type="text"] { } ）
• a要素以外にも:hover擬似クラス
• :first-child擬似クラス

新たに対応となるプロパティの例

• 固定配置
  （position: fixed;）
• 幅、高さの最小/最大値
  （min-width/max-width/min-width/max-width）

ただし・・

セレクタのサポートや構文のバグが改善されたことによって、注意しなくてはならない点も。

用心しておきたいハック

• アンダースコアハック（_font-size: {}; ）
  →適用されない
• コメントフィルター（ font-size /**/: {}; ）
  →適用される
• 各種セレクタハック（属性セレクタを使ったものなど）
  →適用される
• スターハック（ * html #box { height: 1%; } ）
  →適用されない

IE7の正式リリース後に慌てないために

• まずはIE7beta版で確認
• 崩れていたら→ハックを確認
• ハックは別ファイルに振り分けておく？
  （条件付コメントを使う？？）

IE7がある程度普及してくると・・

• よりCSSをサポートしたブラウザに対して・・
  →最適なスタイルを提供
• そのほかのブラウザに対して・・
  →問題のない範囲でグレードを落として提供というのも

ありがとうございました

書店で見かけたら手に取ってみてください。