はじまりはじまり。
IE6よさらば【その2】
前回に続き、IE6をサポートしないWeb制作の可能性をみていきたいと思います。
前回はIE6では使えないセレクタをご紹介しました。
透過pngの使用
IE6はアルファチャンネルで透過されたpngをサポートしていません。
そのため、背景を透過して表示するために、IEの独自拡張を使う、JavaScriptのライブラリを使う、など色々対応策があります。
現実問題、使わざるをえないケースは多いかもしれませんが、IE6を考慮しなければわざわざそんなことをする必要はありません。透過pngを使うことが出来れば、デザインの幅は非常に大きく広がります。
<div id="box"></div>
#box {
width: 160px;
height: 40px;
background: #999 url(transparent.png) no-repeat;
border-top: 1px solid #EBEBEB;
border-left: 1px solid #EBEBEB;
border-right: 1px solid #666;
border-bottom: 1px solid #666;
}
font-sizeのpx指定
一般的に、font-sizeはpxなどで絶対的な数値指定をしない方がよいとされています。
これは、font- sizeが絶対値で指定されていると、ユーザーがブラウザで文字サイズを大きくしても大きさが変わらなくなってしまうため、ユーザビリティ上問題があるからです。しかし、モダンブラウザーは文字サイズの拡大縮小ではなく、ページ全体のズームが採用されているため、font-sizeを絶対値で指定しても、画像なども含めて純粋にページ全体を拡大縮小することができます。
<h1>font-size: px vs em</h1>
<p><img src="dw_cs4.png" alt="sample" width="70" height="74" />
Lorem ipsum dolor sit amet....</p>
h1, p {
font-family: verdana, sans-serif;
font-size: 15px;
}
img {
float: left;
margin: 5px;
}
属性セレクタの使用
IE6は属性セレクタを実装していません。IE7から使用できる属性セレクタを使えば、「a要素のhref属性が".pdf"で終わっていたら、特定のbackground-imageを表示する」などの汎用的なコーディングが可能になります。
<a href="/xxx.pdf">ドキュメントを見る</a>
a[href$=".pdf"] {
padding-right: 18px;
background : url("./file_acrobat.gif") no-repeat right top;
}
このようにIE6を非対象とするだけでデザインの幅、コーディングの汎用性が大きくかわることがわかります。制作者側のメリットばかりのようですが、IE6は頻繁にセキュリティ面での問題も浮上し、最近の中国からと思われるGoogleへのアタックもIE6の脆弱性がねらわれたとか。ユーザーサイドからみてもIE6を使い続ける理由はないでしょう。
IE6ユーザーの方にはアップデート、乗り替えを強く推奨します。
では次回もお楽しみに。
