セキュリティの勉強をしている時に、CSSの話題があったのですが、そこでCSSの中にJavaScriptが書けることを知りました。
なお、IE7までの独自仕様で現在は廃止されております。 過去の話ではありますが、メモ書きとして残しておきます。
CSS expressionとは
言葉で説明するよりも、具体例を見るほうがわかりやすいです。 @ITにあるサンプルを引用します。
width: expression ( document.body.clientWidth < 700 ? "700px" : "auto"); min-width: 700px;
この例では、JavaScriptの三項演算子を使い、widthの値を分岐させています。 なお、現在であればmin-widthプロパティを使えば事足りますので、あくまでサンプルです。
expression関数の使い方は単純で、関数の中にJavaScriptを書くだけです。
XSS（クロスサイトスクリプティング）に注意
不正なJavaScriptをCSS内に仕込むことによって、悪用される危険性があります。 @ITの記事にも、同様の注意事項が書いてありました。
CSS expression関数というのはIE 5以降（IE 5／IE 6／IE 7）でサポートされているIEの独自拡張による仕様で、CSS構文内にJavaScriptが記述できるというものです。
min-widthプロパティをサポートしていないIE 5／IE 6の代替のために用いられるケースがありますが、Webサイトのパフォーマンスが落ちたり、XSSの原因にもなったりしますので使用には注意が必要です。参考までに紹介しておきます。
https://atmarkit.itmedia.co.jp/ait/articles/0812/02/news133_3.html より
まとめ
IE8で廃止された仕様のため、現在の主要ブラウザであれば、expressionは動きません。 しかしながら、CSSを使ってXSS（クロスサイトスクリプティング）ができる事実は、目から鱗でした。
なお、本記事で紹介したやり方は、CSSの中にJavaScriptを書くものでした。 仕様が廃止された現在でも同じことを実現したい場合、JavaScript側からCSSを制御する形になるかと思います。
やり方はいろいろありますが、たとえばQueryを使えば、わりとお手軽に実装できます。
