補足

CSS3 見本

カスケーディング・スタイル・シートの現在の事実上の標準はレベル 2.1 です。事実上のと言うのは、2.1 はまだ正式に勧告されていないからです。しかしすでに次の標準の CSS3 の機能もだんだんと使えるようになって来ているのです。ブラウザー毎に独自に実装されている関係から、書き方も使い方も単純ではありません。しかもどのブラウザでも共通して使える機能は限られています。現段階で利用可能な機能をここで整理してみたいと思います。

box-shadow

filter:progid:DXImageTransform.
Microsoft.Glow(color="#00c3ff", Strength=5);
-moz-box-shadow:0 0 5px #00c3ff;
-webkit-box-shadow:0 0 5px #00c3ff;
box-shadow:0 0 5px #00c3ff;

ブロックに影を付けるプロパティ。縦横の距離がゼロの場合は周囲を縁取る光彩を表現します。重要な記述や広告を目立たせるような使い道が向いていると思います。 IE用のグロー・フィルターは他のブラウザーの opacity とは指定可能な値も実際の見え方もかなり違います。すべてのブラウザで同じようにというわけにはなかなかいきません。もっとも、すべてのブラウザで同じに見える必要はないという考え方もあります。最低限度の機能や内容を確保したうえで、先進的なブラウザーではより見やすく便利にという発想が今後は多くなっていくでしょう。

filter: progid:DXImageTransform.
Microsoft.Shadow(color="orange", direction=135, strength=5);
-moz-box-shadow:3px 3px 5px orange;
-webkit-box-shadow:3px 3px 5px orange;
box-shadow:3px 3px 5px orange;

影の方向を付けるには、IE ではシャドウ・フィルターを使用します。

transform

filter:progid:DXImageTransform.
Microsoft.Matrix(M11=-2.5,M12=0,M21=0,
M22=-2.5,Dx=0,Dy=0, FilterType="bilinear");
-moz-transform:matrix(-2.5, 0, 0, -2.5, 0px, 0px);
-webkit-transform:matrix(-2.5, 0, 0, -2.5, 0, 0);
-o-transform:matrix(-2.5, 0, 0, -2.5, 0, 0);

transform は線形変換の写像を得るプロパティです。Internet Explorer の属性名を使って簡単に説明してみます。まず以下のような行列式があるとします。これは点 (x, y) を点 (X, Y) に移動する式です。

X = x*M11 + y*M21 + Dx
Y = x*M12 + y*M22 + Dy

求める変換が得られるような一連の変数を IE のフィルターでは (M11, M12, M21, M22 , Dx, Dy) と列記します。また他のブラウザーでは (M11, M21, M12, M22, Dx, Dy) と指定してやります。並び順が違います。画像あるいはレンダリング済みの要素を回転、拡大、縮小、傾斜、反転させるような行列 (matrix) を用意することで、これらの変換をひとつのコマンドだけで実行出来るのです。

回転の行列式

S 倍の拡大縮小を行う行列式

このような計算は直感的に理解しにくいと言えます。そこで transform 対応のブラウザーでは回転 (rotate) 、拡大縮小 (scale) 、傾斜 (skew) 、移動 (translate) などの関数を利用して簡単に記述することが可能となっています。しかし IE では行列式で書くしかありません。主要なブラウザーすべてに対応させたい場合は matrix を避けては通れません。

IE について問題点を指摘しておきます。IE 以外のブラウザーでは変形を適用する要素の中心が原点となります。画像は画像の中心を原点に回転します。ところが IE では変形後の要素は元の位置での上辺と左辺に接する位置に自動的に移動します。画像を回転させると画像の中心が移動してしまうのです。実際に使うためにはこの移動の補正を行わねばならないでしょう。
また変形した要素が領域からはみ出た場合の処理を sizingMethod で指定することになっていますが、これを指定すると平面移動 (Dx, Dy) が無効化されてしまいます。よくよく注意が必要なのです。

クロスブラウザーで使える機能はだいたいこれくらいです。しかしブラウザーの進歩は実に早いので、どんどん他の機能も使えるようになっていくはずです。

クロスブラウザーにこだわらなければもっといろいろのことが出来ます。たとえばボックスの角をスタイルシートだけで丸くしたり、三次元の変形を行ったり、スクリプトなしでアニメーションさせたりすることが出来ます。実は iPhone、iPad、Android のブラウザーがこれらにとっくに対応しており、しかもスマートフォンの世界には Internet Explorer が居ません。なかなか敷居の高いところもあるのですが、iPhone だけが次の世代のウェブの世界に行ってしまいそうな状況です。

Progressive Enhancement

Wikipedia の記述によればプログレッシブ・エンハンスメント (漸進的改善) とはアクセシビリティの向上、意味的な HTML 記述、外部スタイルシートとスクリプト技術に重点を置いた、ウェブデザインにおける戦略です。プログレッシブ・エンハンスメントは階層的な作り方によって、インターネット接続やウェブブラウザーの種類を問わず、誰にでもウェブページの内容や機能を利用出来るようにします。同時により高品質の回線や先進的なウェブブラウザーではもっと良いページの見せ方をします。という考え方だそうです。つまりどんなブラウザーでも同じに見える必要はない。

Progressive enhancement is a strategy for web design that emphasizes accessibility, semantic HTML markup, and external stylesheet and scripting technologies. Progressive enhancement uses web technologies in a layered fashion that allows everyone to access the basic content and functionality of a web page, using any browser or Internet connection, while also providing those with better bandwidth or more advanced browser software an enhanced version of the page.

環境による表現形の相違を許容するというだけでは特に新しい考えではありません。ウェブには初期から複数のブラウザーが存在していたのですから、互換性の問題にどう取り組むかは当たり前の問題意識です。漸進的な進歩も常識です。ただそれに現在進められている統合的な標準の策定やセマンティックという理念が絡んでくることで、新しい意義を持つのです。

example


		<p class="csssample">Paper Flowers</p>

		

		.csssample {

		 width:360px;

		 padding:10px 0;

		 background:url(retro.png) center center;

		 text-align:center;

		 border-radius: 25px;

		 -moz-border-radius: 25px;

		 -webkit-border-radius: 25px;

		 -khtml-border-radius: 25px;

		 box-shadow: 0 2px 2px #cccccc;

		 -webkit-box-shadow: 0 2px 4px #cccccc;

		 -moz-box-shadow: 0 2px 4px #dddddd;

		 filter: progid:DXImageTransform.Microsoft.dropShadow(color=#cccccc, offX=0, offY=2, positive=true);

		 color:rgb(250, 250, 250);

		 text-shadow: rgb(20, 20, 20) 0 0 3px;

		 font-family:cursive;

		 font-weight:bold;

		 font-size:24pt;

		 border:solid 4px rgb(250, 180, 100);

		}

このコードを各ブラウザがどのように表示するかを見てみると、実際以下のようになります。それぞれの実装の違いにより、対応していないスタイルは無視されてしまっています。これほどの表示の違いが許容されるか否かはウェブページのコンテクストに依存します。たとえばセクションの見出しであれば、最低限テキストが読めれば問題はないと言えます。しかしロゴマークであれば完全に一致しなければ問題があるでしょう。その場合は画像を用いるのが正解です。

Firefox

Safari

Mobile Safari

Internet Explorer 6

Internet Explorer 7

Internet Explorer 8