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

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」 で検索するのでは結果が結構違うからちょっと気になった。

さくらインターネットサーバに Ruby 1.9 をインストール

レンタルサーバとして有名な さくらインターネットサーバ (スタンダードコース) のユーザディレクトリ内に Ruby 1.9 をインストールしたのでその手順を書いておきます。

作業方法

インストール作業はサーバに SSH 接続して行いました。 ローカルマシンは Windows XP で、SSH 接続用のアプリケーションとして Tera Term を使用しました。

Ruby 1.9 インストール手順

では実際に行ったインストール手順を記します。 ここでは、~/env に ruby のインストールを行いますが、実際にインストールする場所は好きな場所にしてください。

既にサーバには接続し、ユーザホームに居ることとします。 まず、~/env フォルダの作成および移動、さらに ~/env/src フォルダの作成および移動を行います。

% mkdir env; cd env
% mkdir src; cd src

インターネット上から ruby のソースを取得し、解凍します。 その後、解凍してできたフォルダに移動します。 ruby のソースファイル名はその時の最新のものを指定してください。 2011 年 7 月 3 日時点で最新のものの URL は ftp://ftp.ruby-lang.org/pub/ruby/1.9/ruby-1.9.2-p180.tar.gz です。

% wget ftp://ftp.ruby-lang.org/pub/ruby/1.9/ruby-1.9.2-p180.tar.gz
% tar xvzf ruby-1.9.2-p180.tar.gz
% cd ruby-1.9.2-p180

次に configure を実行します。 このとき、オプションとしてインストール先を指定します。 (ここでは $HOME/env を指定しましたが、各自インストールしたい場所を指定してください。)

% ./configure --prefix=$HOME/env

問題なく configure が終わったらインストールを実行します。

% make
% make install
% make clean

これでインストールは完了です。

インストールした Ruby の使用

インストールが完了したら、ruby コマンドが絶対パス指定で使用できるようになります。 (絶対パス指定ではなく単に "ruby" と打ち込むと元々サーバーにインストールされている ruby が起動する。)

% /home/username/env/bin/ruby -v

また、CGI で使用する場合、Shebang 行に上記パスを指定してやればインストールした ruby で実行されます。

#! /home/username/env/bin/ruby
# ↑ CGI の 1 行目 (Shebang 行)
# ....
# ....

また、Ruby 1.9 からは RubyGems が標準で添付されていますので、gem コマンドも絶対パス指定により使用できます。

% /home/username/env/bin/gem -v

パスの追加

普通は CGI で使うと思うのであえてパスの追加をする必要もないと思いますが、パスの追加をする場合は以下の手順になります。

~/.cshrc というファイルがあるはずですのでそれを開き "set path" の先頭に "$HOME/env/bin" を追加。
設定ファイルを読み直す (ログインしなおすなり source コマンドを使うなり) と、新しい方の ruby にパスが通っているはずである。

% which ruby
/home/username/env/bin/ruby