はじまりはじまり。
IE6よさらば
既報の通り、Googleは段階的にIE6のサポートを打ち切ると発表しました。
また、欧州では政府機関が公式にIE6からの乗り換えを推奨するなど、IE6のシェアは徐々に低下しています。
日本でもこの流れは同様ですが、企業のサイトなどがサポート外のブラウザーとするにはまだ勇気が必要かもしれません。
しかし、IE6を考慮しないだけでWebサイト制作はガラリと変わります。
IE6の問題点は様々ですが、中でも未実装のセレクタが多数ある点が非常に痛い点です。IE6を考慮しなければ次のようなセレクタが使えます。いずれの方法もIE6をサポートする場合はIE6を考慮するのであれば、対象の要素にclass属性やid属性が必要になります。
親要素 > 子要素 { プロパティ:値 }
- 子供セレクタ
- 親要素の直接の子要素を指定します。
例えばこんな使い方。
body > p { font-size: 1.5em }
body直下のpのみを指定しているので、それ以下の入れ子になっているpには適用されません。
前要素 + 後要素 { プロパティ:値 }
- 隣接セレクタ
- 前要素の直後の要素を指定します。
例えばこんな使い方。
h2 + p { font-size: 1.5em }
h2の後にでてくるpのみが選択されます。この例では第一段落だけを指定できます。
要素[属性="値"] { プロパティ:値 }
- 属性セレクタ
- 要素の属性、または属性の値によりスタイルを指定します。
例えばこんな使い方。
p[lang="en"] { color: #666 }
p要素にlang属性があり、かつenになっている場合、スタイルが適用されます。この属性セレクタは、before疑似要素、after疑似要素（IE7も未実装）と組み合わせると真価を発揮します。
例えばこんな使い方。
a[href="http://m-school.biz"]:after {
content: url("img/m-school.png");
}
a要素のhref属性がhttp://m-school.bizだったら、つまりリンク先がm-Schoolのときのみ、後ろにm-school.pngを表示する、というようなことがCSSのみで可能になります。
要素:hover { プロパティ:値 }
- :hover疑似クラス
- 対象の要素にマウスカーソルが重なった状態のスタイルを指定します。
IE6でも:hover疑似クラスは使えますが、a要素限定という制約があります。仕様上は、どの要素でも:hoverを使うことができます。
たとえはこんな使い方。
tr:hover { background-color: #ccc }
tr要素、つまりtableの行部分にカーソルがかさなると背景色がかわり、見やすくなります。
その他にも透過png画像に関する問題など、IE6を非サポートとするだけで制作の幅は大きく広がります。…というのは理想論で現実はそうはいかない！というご意見もあると思いますが、どこかで見切りをつけていかなければいつまで経っても変わらないのも事実です。
冒頭の通り、事実世界的にIE6の切り捨てが加速していますので、この流れを草の根的に大きくしていくのもWeb担当者の1つの役目かもしれません！
では次回もお楽しみに。
2010/02/17 追記
【その2】を書きました。
