JavaScriptを使ってクロスブラウザ対策を行うに当たってパフォーマンスが低下することを頭に入れておかないといけません。
またJavaScriptが実装されていないモバイルデバイスを中心としたブラウザに対しては動作しないケースも考慮しておきましょう。
CSS expression関数というのはIE 5以降(IE 5/IE 6/IE 7)でサポートされているIEの独自拡張による仕様で、CSS構文内にJavaScriptが記述できるというものです。
min-widthプロパティをサポートしていないIE 5/IE 6の代替のために用いられるケースがありますが、Webサイトのパフォーマンスが落ちたり、XSSの原因にもなったりしますので使用には注意が必要です。参考までに紹介しておきます。
width: expression ( document.body.clientWidth < 700 ? "700px" : "auto"); min-width: 700px;
ユーザーが利用しているブラウザの画面幅が700px未満の場合には、widthプロパティの値を700pxにセットし、700px以上の場合にはautoという値をセットするexpression関数です。
DocumentオブジェクトのclientWidthプロパティの値を評価することにより実現しています。
また、IE以外のユーザーエージェントに対しては下の「min-width: 700px;」というのが読み込まれます。
※IEBlogの2008年10月16日付のエントリ記事で、Expression関数のサポートの終了が正式に発表されました。IE 8に搭載される新しいレンダリングエンジンの標準モードにおいてExpression関数は無視されます。ちなみにIE 7とIE 8の互換モードにおいて、Expression関数は動作するようです。
詳しくはこちらをご覧ください
JavaScriptを使って古いWebブラウザで起こる表示ズレを回避する方法があります。
それは、dean.edwards氏がオープンソース(MIT License)で開発しているIE7.jsというライブラリです。これは「標準に準拠していないIE 5/IE 6といったWebブラウザをJavaScriptの力を使って標準に準拠させてしまおう!」というWebデザイナにとっては知っておいて損のないJavaScriptライブラリです。
現在も開発が続けられていて記事公開時点(2008年12月2日)ではversion 2.0 (beta3)です(ie7-js A JavaScript library to make MSIE behave like a standards-compliant browser).。
下記コードをhtmlのheadタグ内に記述すれば、IE5/IE6をWeb標準に対応させられます。
<!--[if lt IE 7]> <script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"> </script> <![endif]-->
下記コードをhtmlのheadタグ内に記述すば、IE7をIE8に対応させられます。(IE8.jsを使っている場合は別途IE7.jsを読み込ませる必要はありません)
<!--[if lt IE 8]> <script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"> </script> <![endif]-->
同じように、IE 5/IE 6は透過PNGをサポートしていませんが、IE7.js/IE8.jsを使えば、IE 5/IE 6でも透過PNGが使えるようになります。
適用させたいPNG画像の名前を「〜 *-trans.png」に変更するだけでOKなのです。
そのほか、IE7.js/IE8.jsを利用して、恩恵を受けられるセレクタやプロパティは下記URLからご確認ください。
▼IE 7/IE 8……The selectors and properties below should all work according to the W3C specifications.
今回はCSSの応用編として、駆け足で解説してきました。なんとなくですが、CSSの概要がつかめたでしょうか?
頭で理解したらすぐそれを体に覚えさせるためにも、実際にコーディングしてみることをオススメします。
簡単な半面、CSSは体系的に学んでいかないと身に付きませんので、実際に手を動かしながら覚えていきましょう。
Copyright © ITmedia, Inc. All Rights Reserved.