CSS Expression

January,09 2012

こんにちは、ゼノフィ渡部です。

CSS Expressionでmax-width、max-heightをIE6で使用する方法をご紹介いたします。

CSS ExpressionはCSS内にJavaScriptを記述できるCSSの拡張機能です。

プロパティの値にダイナミック・プロパティを書き入れてスクリプトを記述することがきます。

2行目から3行目はIE6以外のブラウザ、7行目から8行目はIE6用のプロパティです。通常、max-widthなどのプロパティはIE6が対応していないので効果がありませんが、IEの独自拡張であるCSS Expressionでそれらを可能にします。

div.expression img {
  max-width: 340px;
  max-height: 240px;
}
 
div.expression img {
  _width: expression(this.width > 340 ? 340: true);
  _height: expression(this.height > 240 ? 240: true);
}

通常の大きさと高さを持った画像とCSSで最大の幅と高さを指定したソースを記述しています。

<p>
    通常の画像
</p>
 
<div>
    <img src="sky.jpg" alt="空" />
</div>
 
<p>
    max-width、max-heightを指定した画像
</p>
 
<div class="expression">
    <img src="sky.jpg" alt="空" />
</div>

CSS ExpressionのJavaScriptは強力ですが、パフォーマンスが落ちる、セキュリティホールができやすいなどのデメリットがあるため、多用はできません。使用を避けられる状況にある場合は、Expressionの記述は控えた方がよいと思います。

サンプル

CSS

div {
  margin: 0 0 20px;
}
 
div.expression img {
  max-width: 340px;
  max-height: 240px;
}
 
div.expression img {
  _width: expression(this.width > 340 ? 340: true);
  _height: expression(this.height > 240 ? 240: true);
}

HTML

<p>
    通常の画像
</p>
 
<div>
    <img src="sky.jpg" alt="空" />
</div>
 
<p>
    max-width、max-heightを指定した画像
</p>
 
<div class="expression">
    <img src="sky.jpg" alt="空" />
</div>

Webデザイン

CSS Expression