HTML5 は今すぐ
使えるのでしょうか？

Can I use HTML5 now?

Opera logo

ブラウザごとの HTML5
サポートの比較表
はどこにありますか。

Where can I find a comparison of HTML5 browser support?

例外だらけ

en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML5)

ブラウザが多い

Too many browsers

ユーザ設定が多い

Too many user customizations

デバイスが多い

Too many devices

変更が多い

Too many changes

ブラウザではなくて
ユーザのことを考えましょう。

Don't worry about the browser, worry about the user.

「最良のインターネット体験を
全てのデバイスへ」

“The best internet experience on any device”

「最良のインターネット体験を
できるだけ多くのユーザへ」

“The best internet experience
for as many users as possible”

新しい技術は？

What about new technologies?

Jigsaw pieces
  • HTML5
  • CSS3
  • SVG
  • WAI-ARIA
  • JavaScript

どのブラウザがどの技術に
対応していますか。

But which browsers support which technologies?

  • HTML5 Forms: Opera
  • Ruby (ふりがな): IE
  • Drag & Drop: Firefox
  • Web Sockets: WebKit

結果：混乱

Result: confusion

「Progressive Enhancement
は、最低限提供したい機能や
目的を「ベースライン」
として設定します。」

(standards.mitsue.co.jp)

最新の技術が使いたい場合…

If you want to use cool technology...

1

ブラウザの対応を調べます
例：<video>、SVG）

Detect the browser's support
(e.g. <video>, SVG)

Fallback


<video width=600 src="leverage-a-synergy.ogv" autobuffer controls>
    <p>This page demonstrates HTML5 video.
    You can download the video here:
    <a href="leverage-a-synergy.ogv">leverage-a-synergy.ogv</a></p>
</video>

Libraries


// raphaeljs.com

// Creates canvas 320 × 200 at 10, 50
var paper = Raphael(10, 50, 320, 200);

// Creates circle at x = 50, y = 40, with radius 10
var circle = paper.circle(50, 40, 10);

// Sets the fill attribute of the circle to red (#f00)
circle.attr("fill", "#f00");

// Sets the stroke attribute of the circle to white
circle.attr("stroke", "#fff");

Modernizr.com


<!-- In your HTML: -->

<input type="date" name="birthday" id="birthday">
  
// In your JavaScript:

if (!Modernizr.inputtypes.date){
    // if no native support, use a datepicker script
    createDatepicker(document.getElementById('birthday'));
}

2

心配いりません
（例：CSS3 の効果、
WAI-ARIA）

Don't worry
(e.g. CSS3 effects, WAI-ARIA)

CSS3 example / CSS3 の事例

One Web とは…

One Web is...

同一のインターネット体験

One unified experience

ユーザにとって最良な
インターネット体験

Best experience for each user

Thank you!

www.opera.com

@ourmaninjapan