Html5 browser api_support_1.0

SIGONG media Smart R&D

SangKil. An Deputy.Manager2012. 07. 18

HTML5 API ,

HOW IS SUPPORTED BROWSER?

AND Mobile

Element or JavaScript

API

Chrome 20ver

In-ter-netEx-

plorer 8

Op-erea 12

Fire-fox 13

Sa-fari 6

An-droid 4.0

Chrome

Ios5.1

An-droid 4.0

Ios 5.1

Win-dows phone 8

iput type=text Yes ✔ Par-tial ○

Par-tial ○ Yes ✔ Yes ✔ Par-

tial ○ Yes ✔ Par-tial ○ Par-

tial ○

Par-tial ○

Par-tial ○

input type=search Yes ✔ No ✘ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔

input type=tel Yes ✔ No ✘ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔

input type=url Yes ✔ No ✘ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔

input type=email Yes ✔ No ✘ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔

input type=datetime No ✘ No ✘ Yes ✔ No ✘ No ✘ Par-

tial ○ Yes ✔ Yes ✔ Par-tial ○ Yes ✔ No ✘

input type=date Yes ✔ No ✘ Yes ✔ No ✘ No ✘ Par-


input type=month No ✘ No ✘ Yes ✔ No ✘ No ✘ Par-


input type=week No ✘ No ✘ Yes ✔ No ✘ No ✘ Par-

tial ○ Yes ✔ Par-tial ○

Par-tial ○

Par-tial ○ No ✘

input type=time No ✘ No ✘ Yes ✔ No ✘ No ✘ Par-


input type=datetime-local

No ✘ No ✘ Yes ✔ No ✘ No ✘ Par-tial ○ Yes ✔ Yes ✔ Par-

tial ○ Yes ✔ No ✘

input type=number Yes ✔ No ✘ Yes ✔ No ✘ Yes ✔ Yes ✔ Yes ✔ Par-


Par-tial ○

input type=range Yes ✔ No ✘ Yes ✔ No ✘ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔

TabletsDesktop Mobile

* 현재 상용 버전 ( 가장 많이 사용중인 ) 브라우저 별 지원여부

Element or JavaScript

API

Chrome 20ver

In-ter-netEx-

plorer 8

Op-erea 12

Fire-fox 13

Sa-fari 6

An-droid 4.0

Chrome

Ios5.1

An-droid 4.0

Ios 5.1

Win-dows phone 8

input type=color Partial ○ No ✘ Par-

tial ○ No ✘ No ✘ Par-tial ○ No ✘ Par-

tial ○Par-

tial ○Par-

tial ○ No ✘

input type=checkbox Yes ✔ Par-

tial ○ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔

input type=image Partial ○ No ✘ Yes ✔ Par-

tial ○Par-

tial ○Par-

tial ○Par-

tial ○Par-

tial ○Par-

tial ○Par-

tial ○ Yes ✔

input type=file Yes ✔ No ✘ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔

textarea Yes ✔ Par-tial ○ Yes ✔ Yes ✔ Yes ✔ Par-


Par-tial ○

Par-tial ○ Yes ✔

select Yes ✔ Par-tial ○ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔

fieldset Partial ○ Par-tial ○ Yes ✔ Yes ✔ Par-

tial ○Par-

tial ○Par-

tial ○Par-

tial ○Par-

tial ○Par-

tial ○Par-

tial ○

datalist Yes ✔ No ✘ Yes ✔ Yes ✔ No ✘ No ✘ No ✘ No ✘ No ✘ No ✘ Yes ✔

keygen Yes ✔ No ✘ Yes ✔ No ✘ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ No ✘

output Yes ✔ No ✘ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ No ✘

progress Yes ✔ No ✘ Yes ✔ Yes ✔ Yes ✔ No ✘ Yes ✔ No ✘ No ✘ No ✘ Yes ✔

meter Yes ✔ No ✘ Yes ✔ No ✘ Yes ✔ No ✘ Yes ✔ No ✘ No ✘ No ✘ No ✘



Element or JavaScript API

Chrome

20ver

In-ter-netEx-

plorer 8

Op-erea 12

Fire-fox 13

Sa-fari 6

An-droid 4.0

Chrome

Ios5.1

An-droid 4.0

Ios 5.1

Win-dows phone 8

Canvas element Yes ✔

No ✘ Yes ✔

Yes ✔

Yes ✔

Yes ✔

Yes ✔

Yes ✔

Yes ✔

Yes ✔

Yes ✔

Video element Yes ✔

No ✘ Yes ✔

Yes ✔

Yes ✔

Yes ✔

Yes ✔

Yes ✔

Yes ✔

Yes ✔

Yes ✔

Audio element Yes ✔

No ✘ Yes ✔

Yes ✔

Yes ✔

Yes ✔

Yes ✔

Yes ✔

Yes ✔

Yes ✔

Yes ✔

Drag and Drop Yes ✔

No ✘ Yes ✔

Par-tial ○

Yes ✔

No ✘ No ✘ No ✘ No ✘ No ✘ No ✘

Application Cache Yes ✔

No ✘ Yes ✔

Yes ✔

Yes ✔

Yes ✔

Yes ✔

Yes ✔

Yes ✔

Yes ✔

Yes ✔

Cross-document mes-saging

Yes ✔

Yes ✔

Yes ✔

Yes ✔

Yes ✔

Yes ✔

Yes ✔

Yes ✔

Yes ✔

Yes ✔

Yes ✔

Server-Sent Events Yes ✔

No ✘ Yes ✔

Yes ✔

Yes ✔

No ✘ Yes ✔

Yes ✔

No ✘ No ✘

XMLHttpRequest Level 2

Yes ✔

No ✘Par-tial ○

Yes ✔

Par-tial ○

Yes ✔

Yes ✔

Yes ✔

Par-tial ○

Par-tial ○

Par-tial ○

WebSocket Yes ✔

No ✘ No ✘ Yes ✔

Yes ✔

No ✘ Yes ✔

Yes ✔

No ✘ Yes ✔

Yes ✔

Geolocation Yes ✔

No ✘ Yes ✔

Yes ✔

Yes ✔

Yes ✔

Yes ✔

Yes ✔

Yes ✔

Yes ✔

Yes ✔

Session Storage Yes ✔

Yes ✔

Yes ✔

Yes ✔

Yes ✔

Yes ✔

Yes ✔

Yes ✔

Yes ✔

Yes ✔

Yes ✔

Local Storage Yes ✔

Yes ✔

Yes ✔

Yes ✔

Yes ✔

Yes ✔

Yes ✔

Yes ✔

Yes ✔

Yes ✔

Yes ✔



Element or JavaScript API

Chrome

20ver

In-ter-netEx-

plorer 8

Op-erea 12

Fire-fox 13

Sa-fari 6

An-droid 4.0

Chrome

Ios5.1

An-droid 4.0

Ios 5.1

Win-dows phone 8

Indexed DD Yes ✔



No ✘ No ✘ No ✘ Yes ✔

Web SQL Database Yes ✔

No ✘ Yes ✔

No ✘ Yes ✔

Yes ✔

Yes ✔

Yes ✔

Yes ✔

Yes ✔

No ✘

Web Workers Yes ✔

No ✘ Yes ✔

Yes ✔

Yes ✔

No ✘ Yes ✔

Yes ✔

No ✘ Yes ✔

Yes ✔

Shared Workers Yes ✔

No ✘ Yes ✔

No ✘ Yes ✔


No ✘ Yes ✔

No ✘

Web Notifications Yes ✔

No ✘ No ✘ No ✘ Yes ✔

No ✘ No ✘ No ✘ No✘ No ✘ No ✘



목차1.FROMS2.Video / DOM3.Audio4.Drag and Drop5.Canvas6.Geolocation7.Web Storage8.App Cache9.Web Workers10.SSE(Server Sent Event)

1. FROM Element

Input Type : COLOR

<input type=“color” name=“favcolor” />

Example

TypeName Supproted

Color X X O X O

Date X X O O O

Datetime X X O O O

Input type Extended functionHTML5 has several new input types for forms. These new fea-tures allow better input control and validation.

TypeName Supproted

Datetime-local X X O O O

Email X O O X O

Month X X O O O

Number X X O O O

reange X X O O O

Search X X O O X

Tel X X X X X

Time X X O O O

url X O O X O

Week X X O O O

1. FROMS2. Video / DOM3. Audio4. Drag and Drop5. Canvas6. Geolocation7. Web Storage8. App Cache9. Web Workers10.SSE(Server Sent Event)

2. Video / DOM

<video width="320" height="240" controls="controls"> <source src="movie.mp4" type="video/mp4" /> <source src="movie.ogg" type="video/ogg" /> Your browser does not support the video tag.</video>

Example

Video TagHTML5 defines a new element which specifies a standard way to embed a video/movie on a web page: the <video> element.

Video Formats And Browser Support

Browser MP4 WebM Ogg

Internet Explorer 9

Yse No No

Firefox 4.0 No Yse Yse

Google Chrome 6

Yse Yse Yse

Apple Safari 5 Yse No No

Opera 10.6 No Yse Yse

<video width="320" height="240" controls="controls"> <source src="movie.mp4" type="video/mp4" /> <source src="movie.ogg" type="video/ogg" /> Your browser does not support the video tag.</video>

Example

Video TagHTML5 defines a new element which specifies a standard way to embed a video/movie on a web page: the <video> element.

Video Formats And Browser Support


Internet Explorer 9

Yse No No


Google Chrome 6

Yse Yse Yse



Video Tag

Test link page : http://html5demos.com/video

:Web Browser :Mobile Browser

http://html5demos.com/video


3. Audio

<audio controls="controls"> <source src="song.ogg" type="audio/ogg" /> <source src="song.mp3" type="audio/mpeg" /> Your browser does not support the audio element.</audio>

Example

Audio Tagdefines a new element which specifies a standard way to em-bed an audio file on a web page: the <audio> element.

Audio Formats And Browser Support


Internet Explorer 9

Yse No No


Google Chrome 6

Yse Yse Yse



Audio Tag

Link Page : http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_audio_all


http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_audio_all

1.FROMS2.Video / DOM3.Audio4.Drag and Drop5.Canvas6.Geolocation7.Web Storage8.App Cache9.Web Workers10.SSE(Server Sent Event)

4. Drag and Drop

Drag and Drop개체를 다른 위치로 이동시키는 일반적인 기능 , 표준으로 재정 되고 있으나 어떠한 속성은 drag-gable 될 가능성이 있음 .

Browser Support

Browser Yes/No

Internet Explorer 9

Yse

Firefox 4.0 Yse

Google Chrome 6

Yse

Apple Safari 5 Yse

Opera 10.6 Yse

Make an Element DraggableFirst of all: To make an element draggable, set the draggable attribute to true:

<img draggable="true" />

Note : Internet Explorer 8 및 이전 버전에서는 지원 하지 않음

Drag and DropExample Code

<!DOCTYPE HTML><html><head><style type="text/css">#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}</style><script type="text/javascript">function allowDrop(ev) {

ev.preventDefault();}

function drag(ev) {ev.dataTransfer.setData("text",ev.target.id);

}

function drop(ev) {ev.preventDefault();var data=ev.dataTransfer.getData("Text");ev.target.appendChild(document.getElementById(data));

}</script></head><body>

<p>Drag the W3Schools image into the rectangle:</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div><br /><img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69" />

</body></html>

Link Page : http://html5demos.com/drag

http://html5demos.com/drag

Drag and Drop



5. Canvas

CanvasHTML5 Canvas Element is web page use to draw graphics하나의 캔버스는 사각형구역이며 , 그픽셀 하나하나를 제어 할 수 있습니다 .

Browser Support

Browser Yes/No

Internet Explorer 9

Yse

Firefox 4.0 Yse

Google Chrome 6

Yse

Apple Safari 5 Yse

Opera 10.6 YseNote : Internet Explorer 8 및 이전 버전에서는 지원 하지 않음

CanvasExample Code

Create a CanvasCanvas Element 를 이용한 그리기 width, height 를 이용함

<canvas id="myCanvas" width="200" height="100"></canvas>

Draw With JavaScriptJavaScript 를 이용한 그리기

<script type="text/javascript">var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");ctx.fillStyle="#FF0000";ctx.fillRect(0,0,150,75);

</script>

Link Page : http://paperjs.org/examples/hit-testing/ http://slides.html5rocks.com/#canvas-2d-example

http://paperjs.org/examples/hit-testing/

http://slides.html5rocks.com/


Canvas


6. GeoLocation

GeoLocationHTML5 Geolocation API is used to get the georaphical position of a user. ( 단 , 개인정보이기 때문에 사용자가 승인한 경우만 사용할 수 있습니다 .)

Browser Support

Browser Yes/No

Internet Explorer 9

Yse

Firefox 4.0 Yse

Google Chrome 6

Yse

Apple Safari 5 Yse


Link Page : http://html5demos.com/geo http://slides.html5rocks.com/#geolocation

http://html5demos.com/geo


GeoLocation



7. Web Storage

Web StorageWith HTML5, web pages can store data locally within the user's browser.

Browser Support

Browser Yes/No

Internet Explorer 8

Yse

Firefox 4.0 Yse

Google Chrome 6

Yse

Apple Safari 5 Yse


Link Page : http://www.

Web StorageExample CodeStorage,check browser support for localStorage&sessionStorage LocalStorage/SessionStorage 확인

if(typeof(Storage)!=="undefined“) { // Yes! localStorage and sessionStorage support! // Some code.....} else { // Sorry! No web storage support..}

<!DOCTYPE html><html><body>

<div id="result"></div><script>if(typeof(Storage)!=="undefined“) { localStorage.lastname="Smith"; document.getElementById("result").innerHTML="Last name: " + localStorage.lastname;} else { document.getElementById("result").innerHTML="Sorry, your browser does not support web storage...";}</script>

</body></html>

Link Page : http://slides.html5rocks.com/#web-storage


Web Storage



8. App cache

App CacheHTML5 에서는 Cache 를 개발자에 의해 임의적인 Control 이 가능

Browser Support

Browser Yes/No

Internet Explorer No

Firefox 4.0 Yse

Google Chrome 6

Yse

Apple Safari 5 Yse

Opera 10.6 Yse

Note : Internet Explorer 지원 하지 않음

Link Page : http://slides.html5rocks.com/#app-cache


App Cache



9. Web Worker

Web WorkerJavaScript 구동 시에 JS 파일을 background 에서 독립적으로 Once Thread 에서 Multi Thread 로 구동 할 수 있다 .

Browser Support

Browser Yes/No


Firefox 4.0 Yse

Google Chrome 6 Yse

Apple Safari 5 Yse

Opera 10.6 Yse

Note : Internet Explorer 지원 하지 않음 실행 할 때는 JS 파일로 만들어서 사용해야 함


Web Worker



10. Server Sent Event

Server Sent Event사용자의 웹페이를 자동 업데이트 하기 위한 기능

Browser Support

Browser Yes/No


Firefox 4.0 Yse

Google Chrome 6 Yse

Apple Safari 5 Yse

Opera 10.6 Yse

Note : Internet Explorer 지원 하지 않음


Server Sent Event


Etc. 부록Canvas VS SVG

부록 . Canvas VS SVG


Canvas SVG

해상도 의존적 해상도에 독립적

Event Handler 지원안함 Event Handler 지원

좋지않은 덱스트 렌더링 거대한 렌더링이 필요한 어플리케이션에 적합(google Map)

결과를 png 나 jpg 로 저장가능 복작해질경우 랜더링이 느림

많은 객체가 주주 다시 그려져야 함으로 그래픽 집약적인것에 적함

게임어플리 케이션으로 부적함

Reference Site Listhttp://slides.html5rocks.com*http://html5please.com/http://www.html5rocks.com/en/*http://caniuse.com/#search=canvas*http://html5demos.com/http://html5test.comhttp://www.w3schools.com/

Sample Source Code Linkhttps://github.com/mycup/html5Lab


http://html5please.com/

http://www.html5rocks.com/en/

http://caniuse.com/

http://html5demos.com/

http://html5test.com/

http://www.w3schools.com/

https://github.com/mycup/html5Lab

Thank You.

Technology

Html5 browser api_support_1.0