Opera 10.50 と background-clip (CSS 3 のプロパティ )

Web CSS

Opera 10.50 がリリースされました ね。 今回は CSS 3 のいくつかのプロパティに対応したということで、主要なブラウザの CSS 3 が進んでいることが実感できます。

Opera 10.50 で使用できる CSS 3 のプロパティに関しては下記記事が詳しいです。

background-clip がうまく動作しない！

というわけで意気揚々と CSS 3 のプロパティを Opera 10.50 で試してみたのですが、background-clip を使ったときに期待通りの動作をしないことに気づきました。

<div style="background-clip: padding-box; background-color: #FFEE99; border: dotted 10px #000000;">

  background-clip のテスト

</div>

Opera 10.50 であれば上記のコードで下の画像内の上のボックスのように、背景色がボーダーの内側まで表示され、ボーダーの背景は透過になるはずです。 しかし、実際には下のボックスのように、ボーダーが表示されなくなってしまいました。

[f:id:vividcode:20100304033517p:image]

背景を透過にすると background-clip: padding-box; にしてもちゃんと border は表示されるのですが、背景を指定するとだめなようでした。 実は Opera 10.50 ではまだ background-clip プロパティをサポートしていないのではないかと考えたりもしましたが、Opera Dev の下記記事を見てみるとちゃんと background-clip プロパティが使えてるわけで。。

しょうがないので Opera Dev のとこのコードを見ながらどういう状況であればちゃんとボーダーが表示されるのか調べてみました。

先祖要素に float: left; が指定されていればボーダーが表示される！

というわけで調べた結果、どうも background-clip: padding-box; を指定している要素の先祖要素に float: left; または float: right; が指定されていれば、ちゃんとボーダーが表示されるようです。

サンプルページを作成しアップロードしておきました。

そのうちバグ修正されるでしょうが、とりあえずは先祖の要素に float: left; を指定することで回避すればいいかなーと思います。 例えば html 要素に指定しておけば実害はほとんどないかと思います。 その際、width の指定をしておかないと表示領域の幅が小さくなってしまうかもしれませんのでご注意を。

html {

    float: left;

    width: 100%;

}

どうでもいいけど

正式名称としては 「Opera 10.50」 なのかな？ それとも 「Opera 10.5」 でもいいのかな。

「Opera 10.50」 と検索するのと 「Opera 10.5」 で検索するのでは結果が結構違うからちょっと気になった。