CSS3のtransformをクロスブラウザで。

まだまだブラウザごとに実装にばらつきのあるCSS3です。
今、とりあえずワタクシが使いたいCSS3のプロパティはtransform。理由はいっこ前のブログ記事を参照してみてください。

で、思い切ってInternet Explorerをターゲットから外すのならば、その他の主要ブラウザは大体おなじ挙動をしてくれるのですが、ウチのサイトのアクセスログを見てみると、訪れてくれた人が使っているブラウザの過半数がIEなのですね。

10月(25日まで)のブラウザ統計 @ freefielder.jp

1	MSIE 8.0	32.1%
2	FireFox 3.6x	16.2%
3	Safari x.x	13.1%
4	MSIE 7.0	10.7%
5	MSIE 6.0	10.7%
6	Chrome x.x	5.6%
7	Mozilla x.x	3.1%
8	Opera x.x	1.3%

しかも他のブラウザと違って、IEは古いバージョンがなかなかしぶとく生き残っています。

ということで、IEを使っている人を無下にも扱えないので考えてみた。

今やりたいのは「transformプロパティを使って、文字を90度回転させる」ということです。IE以外の主要ブラウザでこれを実現するには、

.rotate{
    -moz-transform : rotate( 90deg );     /* for FF3.5~ */
    -webkit-transform : rotate( 90deg ); /* for Safari3~ , Chrome */
    -o-transform : rotate( 90deg );         /* for Opera10.5~ */
}

...と、こんな感じ。

これプラス、IE6〜IE8に対応できれば、訪問者の95パーセントくらいをフォローすることができます。IEの独自プロパティ「filter」を使ってみましょう。

.rotate{
    -moz-transform : rotate( 90deg );     /* for FF3.5~ */
    -webkit-transform : rotate( 90deg ); /* for Safari3~ , Chrome */
    -o-transform : rotate( 90deg );         /* for Opera10.5~ */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}

試してみる。

「こんにちは」とマリーが挨拶した…

...というのを縦書きで表示するとき、文全体を、幅が1文字分の<div>〜</div>で囲んでやって、さらに括弧と長音記号を90度回転させる。

「こんにちは」とマリーが挨拶した…

どうでしょう。
実際には適切なフォント(日本語等幅フォント)を指定してやらねば綺麗にいかなかったり、フォントサイズが12ポイントより小さいと何故かズレが目立ったりと気に入らないところもありますが、おおむね大丈夫。

現在、『縦書きWebページプロジェクト』というページで、~~CSS3に頼らずに、括弧や長音記号などを縦書き字形に変換することによって縦書きレイアウトを実現させているのですが~~、このtransformを使ったやり方のほうが、何かと良いところもあるのですねぇ。その辺りの話は、またいつか。

→ 2010.10.30 : 縦書きレイアウト用スタイルシートを、transformプロパティを使ったものに更新しました。
　　→ ブログ記事
　　→ 縦書きWebページプロジェクト

IEを含めた主要ブラウザ間で、CSS3のスタイルシートプロパティの互換性をできるだけ保たせるには幾つも方法がありますが、JavaScriptなどの外部ライブラリを使わずにコレを実現するために、とっても参考になるページはコチラ → CSS3 Please!

freefielder.jp

CSS3のtransformをクロスブラウザで。

カテゴリ:

タグ:

コメント