PR

真のクロスブラウザとは

2009年1月27日(火)
菊池 崇

Progressive EnhancementとJavaScript

 JavaScriptはWeb標準に欠くことのできない非常に重要な技術の1つです。IEとモダンブラウザとの見栄えや挙動の差異を減らすために用いられたり、Ajaxのようにダイナミックに利用される技術です。ただし、JavaScriptを利用する上で最も気をつけなければならないことがあります。

 「unobtrusive JavaScript」という言葉あります。これは「でしゃばらないJavaScript」「邪魔をしないJavaScript」と称されます。JavaScriptを実装する際に、Webとしての本質のアクセシビリティを損なうような実装をしてはならないという意味です。例えば、JavaScriptを実装する際に、意味のない(セマンティックではない)class名をむやみに追加したり、角丸を実現するために

要素をむやみに吐き出すJavaScriptを実装し音声リーダーを邪魔したりしてはいけないということです。

WebKit系の進化とCSS3

 ここからは、CSS3について各ブラウザの特徴と合わせて紹介していきます。

 まず、WebKitに代表されるSafariはCSS3のサポートはおそらく、Opera、Firefoxよりも一歩先を進んでいるかもしれません。WebKit系は、最近CSS3の草案になったtransformプロパティやtransitionプロパティをサポートしています。また、独自実装ですがgradientプロパティもサポートしています。ここでは変形を実装できるtransformプロパティのrotate(回転)を紹介します(図2-1)。

 transform プロパティを記述する際には、transform-originプロパティを合わせて実装することをおすすめします。transform-originプロパティは、transformプロパティを適用する際の支点を設定します。デフォルトの状態では要素の中心に支点が設定されています。ただし、これでは最初は扱いづらいのでtransform-originを「0 0」に設定します。次に-webkit-transform: rotate(90deg);で、要素の回転を時計回りに90度で指定します。今回は、h1要素を回転させました(図2-2)。サンプルファイルはこちらからダウンロードできますので、参照ください(807_1.zip/0.689 KB)。

ActLink株式会社(http://www.actlink.co.jp/)にてプロデューサー、allWebクリエイター塾(http://all-web.org/modules/tinyd5/)では、XHTML+CSS、Microformatsの講師。また、2008年11月に行われたWeb Directions East(http://south08.webdirections.org/)のプロデューサーでもありMicroformats japanの代表。

Think IT会員サービス無料登録受付中

Think ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。会員登録を済ませてThink ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

他にもこの記事が読まれています