2008年6月15日にJohn Allsopp氏が来日し、英語にて『CSS Reloaded』というCSS3のプレゼンをおこないました。その後、彼のプレゼンを日本語へ翻訳し「CSS Reloaded」というプレゼンテーションをする度に、さまざまな人からCSS3はまだ使えないやIE6がサポートしていなからという意見を多数受けました。

そこでJohn Allsopp氏と話し合ったところ、「⁠そもそも日本ではクロスブラウザが見栄えのみにフォーカスしすぎているのではないだろうか？　Progressive Enhancementという考え方が普及してないのかもしれない」という結論にいたりました。

そこで今回、John Allsopp氏に、自身の考える、クロスブラウザ像を語ってもらいました（菊池崇⁠）⁠。

For a long time, web designers were (and sometimes still are) obsessed with making web pages appear the same in every browser. You can see where this idea comes from - afterall, with print design, designers have absolute control over the printed page.

（長い間、ウェブデザイナーは、どのブラウザでもウェブサイトがまったく同じように見えなければいけないと考えていました（いまでも考えてる人もいますが⁠）⁠。この考え方が何処から来たのかはわかりますよね。DTPのように見え方を自在にコントロールできる印刷ページならではのものでしょう。）

But not only is it not pOSsible for a design to look identical in every browser - it's not even desirable even if it were pOSsible.

（しかし、すべてのブラウザでまったく同じようにウェブページを見せることは不可能であり、可能だとしても望むものではありません。）

Here's why.

（それはなぜでしょう。）

Firstly, browsers are technically called "user agents" - the important term here is "user".

（まず最初に、ブラウザは“⁠ユーザーエージェント⁠”と呼ばれていますが、ここで重要なのは“⁠ユーザー⁠”という言葉です。）

The user is in control of many factors of their experience - the might zoom the font size up or down, they might increase or decrease the page size, and so on.

（ユーザーは自らの経験から、様々な機能がブラウザに実装されていることを知っています。例えば、文字のフォントサイズを大きくしたり小さくしたり、もしかしたらウェブページのページサイズそのものを大きくしたり小さくしたりできることも知っているでしょう。）

So, a page may look very different on the same system, with the same setup, and the same browser, depending on the user's preferences.

（つまり、同じセットアップ、同じブラウザ、同じシステム構成であってもユーザーの設定次第では、ウェブページの見栄えは変わってしまいます。）

Next, we have the reality that even with completely bug free browsers, pages in different browsers on different platforms may render differently for a number of reasons.

（次に、バグのないブラウザであっても、違うブラウザ、違うOSの元では表示に異なるという事実にはいくつかの理由があります。）

The font smoothing and rendering algorithms on Windows, Mac OS and other operating systems are all different.

（まず、WindowsとMac OSもしくは他のOSでは、フォントのアンチエイリアス、レンダリングモードなどが異なっています。）

The native DPI of different operating systems is different

（また、OSによってDPIも異なります。）

The physical display devices have different color temperatures, physical resolutions, and other physical characteristics.

（ディスプレイによっては色調、解像度、他にも様々な特徴があります。）

And then of course, as web browsers appear on more and more devices - televisions, mobile phones, game machines, and so on, the form factors move further and further away from the classic 1024 x 768px XGA screen.

（もちろん、ウェブは上記にあげただけでなく、もっと多くのデバイス上のブラウザで表示されています。テレビ、携帯電話、ゲーム機など、もはやウェブは、デスクトップの1024x768のXGAスクリーンだけにはとどまりません。）

Then, we have the challenge that over time specifications like CSS, HTML, SVG change and improve, and newer browsers improve on older ones. They fix up bugs, and implement new features (for example shadows in CSS, the HTML5 video element and so on).

（さらに、私たちは時間がたつにつれて変化と進歩するCSS、HTML、SVGと、古いブラウザより進化した新しいブウラウザへの挑戦しなければいけません。新しいブラウザはバグを修正し、新しい機能（例えば、CSSのshadowプロパティ、HTML5のvideo要素など）を実装しています。）

If our goal as web designers was to have the exact same rendering on any browser on any device, we'd

（もし、ウェブデザイナーのゴールがすべてのブラウザ、すべてデバイスでウェブページが同じように表示されることとするならば、そのウェブデザイナーは、）

• fail（失敗します。）
• expend an enormous amount of effort（膨大な時間と途方もない労力を要してしまいます。）
• probably go insane（まちがいなく気が狂います。）
• be missing the point（大事な事を見失ってしまいます。）

The point is that it's not only OK for the same page to look different on different browsers, and for different users - it's healthy. It's how the web works.

（つまり、大事なことは同じウェブページであっても、ブラウザもしくはユーザーによってウェブページが異なって表示されることは至って健全であり、これがウェブの仕組みでもあるのです。）

So, instead of striving for designs which are identical in every browser, our goal should be to make designs that provide access to the information and services on a page, regardless of the browser or device a person uses, but which take advantage of the specific features of a device, or browser.

（すべてのブラウザでまったく同じように見える努力する代わりに、私たちは、ウェブサイトの情報やサービスへアクセスしたり利用しやすいようにページをつくるように努力すべきです。そして、ブラウザ、ユーザーのデバイスによらず、そのブラウザ、ユーザーのデバイスの特徴や機能を活かすようなウェブサイトを作るべきなのです。）

We might serve a totally different style sheet for a hand held device, or television based browser than for a high resolution laptop.

（携帯機器、テレビに組み込まれてるブラウザには、高解像度のノートパソコンとは全く別のCSSを適用させるのがいいかもしれません。）

We might take advantage of newer CSS features in newer browsers, even though these aren't supported in many older browsers, provided that by doing so, we don't deny the users of the older browsers access to the services and information on the pages.

（たとえ多くの古いブラウザで実装されていなくても、より新しいブラウザに実装されている新しいCSSの機能をうまく活用しウェブページを作成しても、古いブラウザでページの情報にアクセスしたりサービスを利用するユーザーを無視することはできません。）

That's the real meaning of "cross browser", and should be an important goal of web developers.

（真の“⁠クロスブラウザ⁠”はウェブ開発者にとって大切なゴールでしょう。）