Acid2 セーフな uuCSSBoost.js で、ヒャッハーな世界へようこそ
ブラウザのレンダリングの互換性テストといえば、Acid2, Acid3 が有名です。
モダンブラウザだと、Firefox3+, Safari2+, Opera9+, IE8の標準準拠モードが Acid2 をパスします。
さかのぼること 8ヶ月前
こんなことを語ってました。
- いまやってること
- CSSパーサーの実装
IE6, IE7でACID2をクリアさせようとすると、IEが理解できないCSSを自前でパースし、img src="data/image;base64,pngxxx" をデコードする必要があります。
pngデコーダを実装するためには zip のデコーダも実装する必要があるので、そこはあきらめ気味。外部のサイトで動作するPHPにbase64を丸投げして画像を受け取る方法もありだと思ってたり。
ACID2をクリアするのは正直無理だと思ってますが、その過程で得られるものが欲しいのです。
http://d.hatena.ne.jp/uupaa/20081004/1223067012
多大な時間とコストを投資し、基礎固めから始めた自作CSSパーサー(uuCSSBoost.jsuuAltCSS.js)に実用性があるのか、Acid2 で試してみました。
Acid2 で IE6 や IE7 が散々なレンダリングになる理由は大きく3つ
- 子セレクタ(.nose > div)が正しく理解されていない
- 隣接セレクタ(.picture p + p)が正しく理解されていない
- 属性セレクタ([class~=one])が正しく理解されていない
- クラスセレクタの同時指定(.two.error.two)が正しく理解されていない
- 不正な宣言(.parser { error: \}; })の解釈があやしい
- 不正なセレクタ(* html .parser)に一致する要素がある。対IE6
理由2. 機能が不足している
- position: fixed を IE6 は理解しない
- max-width系を IE6 は理解しない
- dataスキーム(data:text/css,.picture%20%7B%...)を IE6, IE7 が理解しない
- display: table, display: table-cell を IE6, IE7 は理解しない
理由3. レンダリングバグ
- inherit が正しく理解されていない
- 色の二重指定(.parser { background: red pink; })。IE6 では pink になる
- 不正な識別子(.parser { border: 5em solid red ! error; }) の解釈があやしい
- 他にも色々ありすぎて説明しきれない
じゃあそれ、uuCSSBoost.jsuuAltCSS.js で
CSSセレクタのバグと、不足している機能を補完した状態でレンダリングするとこうなります。
- 「良くわかんねーけど、IE7.js ってのが既にあるし、パクリっぽい
uuCSSBoost.jsuuAltCSS.js なんていらねーじゃん」 - 「
uuCSSBoost.jsuuAltCSS.js も IE7.js のようにレンダリングバグも修正しちゃえば? いーんじゃね?」
という考えをお持ちの方のために、IE8.js の結果も並べてみました。
より最新のスクリーンショット → http://d.hatena.ne.jp/uupaa/20090706
| オリジナル | + uuAltCSS.js | +IE8.js(IE7.jsでもほぼ同じ結果になる) | |
|---|---|---|---|
| IE6 |  |
 |
 |
| IE7 |  |
 |
 |
| IE8 |  |
|
 |
| Firefox2.0.0.20 |  |
|
-- |
| Firefox3.0.11 |  |
|
-- |
| Opera9.27 |  |
|
-- |
# ただし、IE8.js はIE7以下に適用する(↓)のが正しい用法なので、IE8 に IE8.js を読み込ませるのは想定外の使い方らしいです。
<!--[if lt IE 8]> <script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script> <![endif]-->
uuCSSBoost.jsuuAltCSS.js は「CSSセレクタを解釈し要素にスタイルを割り当てる」機能と「欠落している」機能(dataスキーム等)を補完します。IE7.js と違い、レンダリングバグは基本的にケアしません。
Acid2 + uuCSSBoost.jsuuAltCSS.js デモ
反省会
- IE8 と IE8.js の組み合わせは NG なんだね。でも IE8 の CSS セレクタって CSS3 準拠じゃないから :nth-child とか :last-child とか色々使えないんだけど、IE8.js は :nth-child が 使えるようになるって書いてある。
- IE8 で nth-child を使ったデザインがしたい場合に IE8.js を導入すれば… となるけど、IE に IE8.js を組み込むと、スマイリーが崩れるんだね
- ジレンマだね
- IE8 で nth-child を使ったデザインがしたい場合に IE8.js を導入すれば… となるけど、IE に IE8.js を組み込むと、スマイリーが崩れるんだね
uuCSSBoost.jsuuAltCSS.js はクロスブラウザ対応だよ。古いブラウザでも新しいブラウザでもレンダリングに悪影響を与えずに、CSS3セレクタを使ってWebページをデザインできるよ。- でも作りたてだから、色々あると思うよ。
- Acid2 対応作業の過程で、dataスキームにも対応したよ。
- IE6, IE7 で、<script src="data:text/javascript;base64,hogehoge"> とか、<link href="data:text/css,hogehoge"> とか使えるよ
- data:image/gif とか、data:image/png とかはダメだよ。
<!doctype><html><head><title></title></head><body> <script src="../uuAltCSS.js"></script> <script src="data:text/javascript;base64,YWxlcnQoImhlbGxvIHdvcmxkIik7"> // alert("hello world"); </script> <pre> <script src="../uuAltCSS.js"></script> <script src="data:text/javascript;base64,YWxlcnQoImhlbGxvIHdvcmxkIik7"> // alert("hello world"); </script> </pre> </body></html>
