IE9에서 HTML5 개발할 때 활용할 수 있는 팁

1. IE9에서 HTML5 개발하기
황리건, 한국 마이크로소프트

3. 1

5. Mul$-­‐Core
CPU
GPU
Architecture
GPUs

6. myContext.drawImage(image,
sx,
sy,
sWidth,
sHeight,
dx,
dy,
dWidth,
dHeight);

7. fishH
fishW
sY
sX

10. var
myCanvas
=
document.getElementById('myCanvas');
var
ctx
=
myCanvas.getContext("2d");
…
ctx.save();
ctx.translate(x,
y);
ctx.scale(scale,
scale);
ctx.transform(flip,
0,
0,
1,
0,
0);
ctx.drawImage(imageStrip,
fishW
*
cell,
fishH
*
species,
fishW,
fishH,
-­‐fishW
/
2,
-­‐fishH
/
2,
fishW,
fishH);
scale
=
nextScale;
ctx.restore();

14. <script
type="text/javascript">
function
addWebApp()
{
try
{
window.external.msAddSiteMode();
}
catch(ex)
{
//
Site
Mode
not
supported.
}
}
</script>
<button
onclick="addWebApp()"
title="Click
to
add
this
webpage
to
your
Windows
Start
menu.">
Launch
in
Site
Mode</button>

16. 2

29. 3

31. 7000
top
sites

32. DOM
• XHTML
• DOM
Core
(createDocument)
• L2
(addEventListener)
• L3
(DragEvent)
• Traversal
• Range
• SelecWon
• DOMContentLoaded
• getElementsByClassName
• …
Graphics
• Video
• Audio
• Canvas
• SVG
• Shapes
• Text
• TransformaWons
• Events
• Styling
• …
CSS3
• Media
Queries
• Color
(opacity)
• Backgrounds
&
Borders
• Selectors
• Namespaces
• Fonts
• Values
and
Units
• …

33. CSS3 New additions – Borders
33
• Borders
• border-color
• Values : top right bottom left
<div
style="
border-­‐color:red
green
orange
blue;”>
• border-radius
• Values : Top-Left Top-Right Bottom-Right Botton-Left Width
<div
style="
border-­‐radius:
0px
100px
100px
0px;”>
• border-style
• Values : dotted | dashed | groove | ridge | double
<div
style="
border-­‐style:
dotted;”>
• box-shadow
<div
style="
box-­‐shadow:
5px
5px
10px
#000;”>

34. CSS3 New additions – Backgrounds
34
• Backgrounds
• background-origin
• background-clip
• background-size
• multiple backgrounds
div.Sample
{
height:
200px;
width:
720px;
padding:
150px
20px
20px
20px;
background:
url(body-­‐top.gif)
top
left
no-­‐repeat,
url(banner_fresco.jpg)
11px
11px
no-­‐repeat,
url(body-­‐bottom.gif)
bottom
left
no-­‐repeat,
url(body-­‐middle.gif)
left
repeat-­‐y;
}

35. • Color
• HSL colors
<div
style="background-­‐color:
hsl
(0,100%,
50%);">
• HSLA colors
<div
style="background-­‐color:
hsla
(0,100%,50%,0.2);">
• RGBA colors
<div
style="background:
rgba
(255,
0,
0,
0.2);">
• Opacity
<div
style="background:
rgb
(255,
0,
0)
;
opacity:
0.5;">
CSS3 New additions – Color
35

36. CSS3 New additions – Text Effects
36
• Text effects
• text-overflow
<div
style=“
text-­‐overflow:
ellipsis;”>
• word-wrap
<div
style=“
word-­‐wrap:
break-­‐word;”>

37. CSS3 New additions – Selectors
37
• User-interface box-sizing
• resize
• outline
• nav-top, nav-right, nav-bottom, nav-left
• Selectors
• Attribute selectors
 [att^=val] att attribute whose value begins with the prefix “val”.
 [att$=val] att attribute whose value ends with the suffix “val”.
 [att*=val] att attribute whose value contains the substring “val”.
p[title^=“sample"]
{background:
yellow;}

38. CSS3 New additions – Web Fonts / Media Query
38
• Basic box model
• overflow-x
• overflow-y
• Web fonts
@font-­‐face
{
font-­‐family:
Whimsy;
src:
url('Whimsy.woff');
}
<div
style=“
font:
24pt
Whimsy,
sans-­‐serif;”>
• Media Queries
@media
(max-­‐width:1024px)
{
.displaytext
{
background-­‐color:
#F0F;
font:
24pt
sans-­‐serif;
}
}
@media
(max-­‐width:800px)
{
.displaytext
{
background-­‐color:
#F00;
font:
18pt
sans-­‐serif;
}
}

39. if(
navigator.userAgent.indexOf('MSIE')
!=
-­‐1
)
{
//
Code
written
for
browser
X
}
else
{
//
Code
written
for
browser
Y
}

41. =
체크 포인트
=
대응 코드
기능 체크
버전 체크

42. IE8에서 문제되는 케이스