Hatena::ブログ(Diary)

latest log このページをアンテナに追加 RSSフィード

2009-07-22

日食 と uuAltCSS.js と CSS3 multiple background image

f:id:uupaa:20090722204939p:image

http://uupaa-js-spinoff.googlecode.com/svn/trunk/uuAltCSS.js/demo/box-shadow/solid_version/multibg1.htm

色々と制限はありますが、CSS3 の multiple background image を uuAltCSS.js に実装してみました。

日食の画像と、モノリス(?)みたいなステージと、ブラウザのアイコンが背景画像です。


色々

  • CSS3 の multiple background image を CSS2.1 しか解釈しないブラウザに食わせると、宣言が無視されます背景が真っ白になります
  • Firefox3.5用のコードを入れ忘れたので、Firefox3.5では動きません。

uupaauupaa 2009/07/24 08:43 「真っ白」は、CSS2.1 しかサポートしないブラウザで、background-image: url(...), url(...) が ignore されるという意味で使ってました(デフォルトの背景が白なのでbgが無視され結果的に)
説明不足でした。

またIE6〜8 では background-image: url(a.png), url(b.png);
といったCSSが適用されている要素の currentStyle を取得すると
"url(http://example.com/dir/a.png),%20url(b.png)" という文字列がとれてきます。
この文字列は URL として不正なので結果的に IE で multiple background image は無視されます。宣言レベルでは無視されていないようです。

IE 以外のブラウザで 要素の getComputedStyle を取得すると、"none" が取れてきます。こちらの場合はCSSの仕様通りに宣言が無視されているようです。

background-image, repeat, position は CSS3 spec にある機能を全て再現できていないのと、まだ開発中のため、独自の CSS プリフィクス(-uu-background-xxx)を付けてます。
また、レンダリング速度の兼ね合いもあって、-uu-background-position: には no-repeat 以外(現在のところ)指定できないようにしています。
ただし、WebKit系のブラウザではこれらは動作するため、WebKit用の指定と、uuAltCSS.js 用の指定を分けていました。

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト

コメントを書くには、なぞなぞ認証に回答する必要があります。

トラックバック - http://d.hatena.ne.jp/uupaa/20090722/1248263618