XHTML1.0 TransitionalでPNGの半透明を使って、 Another HTML-lint で100点を取る。
簡単そうに見えて、意外と時間を費やしたのでメモ。
まずPNG半透明にはiepngfix.js を使う。
するとCSSの記述が
* html .iepngfix { behavior: expression(IEPNGFIX.fix(this)); } となるので、CSS validator でエラーとなってしまう。
そこでCSSを外に追いやってしまうのだが、下記のようにIEの分岐を使うと減点は0点だがエラーとなる。
それはそれで気持ち悪いので、javascriptで解決しようと思う。
<!--[if lte IE 6 ]> <script src="opt/iepngfix.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="opt/ie.css" media="screen" /> <![endif]-->
ブラウザの判定には、browserinfo.js を使ってみた。
<head>～</head>内に以下のように記述。
<script src="opt/browserinfo.js" type="text/javascript"></script> <script src="opt/switchinfo.js" type="text/javascript"></script>
switchinfo.js内には以下を記述した。
var bi = new BrowserInfo();
if( bi.ieVersion == 6 || bi.ieVersion == 5.5 ) {
document.write('<script src="opt/iepngfix.js" type="text/javascript"></script>');
document.write('<link rel="stylesheet" type="text/css" href="opt/ie.css" media="screen" />');
} これで、Another HTML-lint も CSS validatorもエラーが無くなった。
もう少し、省略できそうだがとりあえず問題は回避したからいいかな・・・
