HTML5 introduces several new features for forms, multimedia, graphics, and client-side storage. This document compares browser support for many of the new HTML5 features across desktop and mobile browsers. It finds that while support for features like <video>, <audio>, and the Canvas element is widespread, some features like drag and drop and Server-Sent Events have more limited support, especially on mobile. The document provides a useful reference for how new HTML5 features are supported across major browsers and platforms.
1. SIGONG media
Smart R&D
SangKil. An Deputy.Manager
2012. 07. 18
2. HTML5 API ,
HOW IS SUPPORTED
BROWSER?
AND Mobile
3. Desktop Tablets Mobile
Element or Chrome Inter Opere Firef Safar Andro Chrom Ios5. Andro Ios Windo
JavaScript 20ver net a ox 13 i 6 id e 1 id 5.1 ws
API Explo 12 4.0 4.0 phone
rer 8 8
Partia Partia Partia Partia Partia Partia
iput type=text Yes Yes Yes Yes Partia
l l l l l l
l
input type=sea
Yes No Yes Yes Yes Yes Yes Yes Yes Yes Yes
rch
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=ema
Yes No Yes Yes Yes Yes Yes Yes Yes Yes Yes
il
input type=dat Partia Partia
No No Yes No No Yes Yes Yes No
etime l l
input type=dat Partia Partia
Yes No Yes No No Yes Yes Yes No
e l l
input type=mon Partia Partia
No No Yes No No Yes Yes Yes No
th l l
input type=wee Partia Partia Partia Partia
No No Yes No No Yes No
k l l l l
input type=tim Partia Partia
No No Yes No No Yes Yes Yes No
e l l
input type=dat Partia Partia
No No Yes No No Yes Yes Yes No
etime-local l l
input type=num Partia Partia Partia
Yes No Yes No Yes Yes Yes Yes
ber l l l
input type=ran
Yes No Yes No Yes Yes Yes Yes Yes Yes Yes
ge
* 현재 상용 버전(가장 많이 사용중인) 브라우저 별 지원여부
4. Desktop Tablets Mobile
Element or Chrome Inter Opere Firef Safar Andro Chrom Ios5. Andro Ios Windo
JavaScript 20ver net a ox 13 i 6 id e 1 id 5.1 ws
API Explo 12 4.0 4.0 phone
rer 8 8
input type=col Partia Partia Partia Partia Partia
Partial No No No No No
or l l l l l
input type=che Partia
Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
ckbox l
input type=ima Partia Partia Partia Partia Partia Partia Partia
Partial No Yes Yes
ge l l l l l l l
input type=fil
Yes No Yes Yes Yes Yes Yes Yes Yes Yes Yes
e
Partia Partia Partia Partia Partia
textarea Yes Yes Yes Yes Yes Yes
l l l l l
Partia
select Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
l
Partia Partia Partia Partia Partia Partia Partia Partia
fieldset Partial Yes Yes
l l l l l l l l
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
* 현재 상용 버전(가장 많이 사용중인) 브라우저 별 지원여부
5. Desktop Tablets Mobile
Chrom Inter Opere Firef Safar Andro Chrom Ios5. Andro Ios Windo
Element or e net a ox 13 i 6 id e 1 id 5.1 ws
JavaScript API 20ver Explo 12 4.0 4.0 phone
rer 8 8
Yes Yes
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
✔ ✔
Parti Yes
Drag and Drop Yes No Yes No ✘ No ✘ No ✘ No ✘ No ✘ No ✘
al ○ ✔
Yes Yes Yes Yes Yes Yes Yes Yes
Application Cache Yes No Yes
✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔
Cross-document mess Yes Yes Yes Yes Yes Yes Yes Yes
Yes Yes Yes
aging ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔
Yes Yes Yes Yes
Server-Sent Events Yes No Yes No ✘ No ✘ No ✘
✔ ✔ ✔ ✔
XMLHttpRequest Le Parti Yes Parti Yes Yes Yes Parti Parti Parti
Yes No
vel 2 al ✔ al ○ ✔ ✔ ✔ al ○ al ○ al ○
Yes Yes Yes Yes Yes Yes
WebSocket Yes No No No ✘ No ✘
✔ ✔ ✔ ✔ ✔ ✔
Yes Yes Yes Yes Yes Yes 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
✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔
* 현재 상용 버전(가장 많이 사용중인) 브라우저 별 지원여부
6. Desktop Tablets Mobile
Chrom Inter Opere Firef Safar Andro Chrom Ios5. Andro Ios Windo
Element or e net a ox 13 i 6 id e 1 id 5.1 ws
JavaScript API 20ver Explo 12 4.0 4.0 phone
rer 8 8
Yes Yes Yes
Indexed DD Yes No No No ✘ No ✘ No ✘ No ✘ No ✘
✔ ✔ ✔
Yes Yes Yes Yes Yes Yes
Web SQL Database Yes No Yes No ✘ No ✘
✔ ✔ ✔ ✔ ✔ ✔
Yes Yes Yes Yes Yes Yes
Web Workers Yes No Yes No ✘ No ✘
✔ ✔ ✔ ✔ ✔ ✔
Yes Yes Yes
Shared Workers Yes No Yes No ✘ No ✘ No ✘ No ✘ No ✘
✔ ✔ ✔
Yes
Web Notifications Yes No No No ✘ No ✘ No ✘ No ✘ No✘ No ✘ No ✘
✔
* 현재 상용 버전(가장 많이 사용중인) 브라우저 별 지원여부
9. Input type Extended function
HTML5 has several new input types for forms. These new
features allow better input control and validation.
Example
Input Type : COLOR
<input type=“color” name=“favcolor” />
TypeName Supproted
Color X X O X O
Date X X O O O
Datetime X X O O O
10. 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
11. 1. FROMS
2. Video / DOM
3. Audio
4. Drag and Drop
5. Canvas
6. Geolocation
7. Web Storage
8. App Cache
9. Web Workers
10.SSE(Server Sent Event)
13. Video Tag
HTML5 defines a new element which specifies a standard way
to embed a video/movie on a web page: the <video> element.
Example
<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>
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
14. Video Tag
HTML5 defines a new element which specifies a standard way
to embed a video/movie on a web page: the <video> element.
Example
<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>
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
15. Video Tag
Test link page : http://html5demos.com/video
:Web Browser :Mobile Browser
16. 1. FROMS
2. Video / DOM
3. Audio
4. Drag and Drop
5. Canvas
6. Geolocation
7. Web Storage
8. App Cache
9. Web Workers
10.SSE(Server Sent Event)
18. Audio Tag
defines a new element which specifies a standard way to
embed an audio file on a web page: the <audio> element.
Example
<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>
Audio 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
19. Audio Tag
Link Page : http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_audio_all
:Web Browser :Mobile Browser
20. 1. FROMS
2. Video / DOM
3. Audio
4. Drag and Drop
5. Canvas
6. Geolocation
7. Web Storage
8. App Cache
9. Web Workers
10.SSE(Server Sent Event)
22. Drag and Drop
개체를 다른 위치로 이동시키는 일반적인 기능, 표준으로 재정 되고 있으나 어떠한
속성은 draggable 될 가능성이 있음.
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
Note : Internet Explorer 8 및 이전 버전에서는 지원 하지 않음
Make an Element Draggable
First of all: To make an element draggable, set the draggable attribute to true:
<img draggable="true" />
23. Drag and Drop
Example 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
27. Canvas
HTML5 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 Yse
Note : Internet Explorer 8 및 이전 버전에서는 지원 하지 않음
28. Canvas
Example Code
Create a Canvas
Canvas Element 를 이용한 그리기 width, height 를 이용함
<canvas id="myCanvas" width="200" height="100"></canvas>
Draw With JavaScript
JavaScript를 이용한 그리기
<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
32. GeoLocation
HTML5 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
Opera 10.6 Yse
Note : Internet Explorer 8 및 이전 버전에서는 지원 하지 않음
Link Page : http://html5demos.com/geo
http://slides.html5rocks.com/#geolocation
36. Web Storage
With 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
Opera 10.6 Yse
Note : Internet Explorer 7 및 이전 버전에서는 지원 하지 않음
Link Page : http://www.
37. Web Storage
Example Code
Storage,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
41. App Cache
HTML5에서는 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
45. Web Worker
JavaScript 구동 시에 JS 파일을 background 에서 독립적으로 Once Thread 에서 Multi
Thread 로 구동 할 수 있다.
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 지원 하지 않음
실행 할 때는 JS파일로 만들어서 사용해야 함
Link Page : http://www.
49. Server Sent Event
사용자의 웹페이를 자동 업데이트 하기 위한 기능
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://www.