[HTML5] IE10이하 익스플로러를 위한 대비책

웹표준·접근성

by 김일국 2013. 8. 1. 14:42

HTML5 웹표준으로 사이트를 개발할때, IE6,7,8,9 때문에 CSS나 js부분에서 여러가지 우회 경로를 사용하게 된다. 아래는 나타날 수 있는 문제점으로 레이아웃이 깨지게 된다.

깨지는 원리:

익스플로러에서 아웃라인 태그 인식
익스플로러는 header, footer 같은 아웃라인 태그의 DOM을 제대로 인식하지 못한다.
이는 아래 자바스크립트를 추가함으로써 해결된다.
<script type="text/javascript">
document.createElement('header');
document.createElement('nav');
document.createElement('article');
document.createElement('section');
document.createElement('aside');
document.createElement('footer');
</script>

위의 스크립트를 추가 후 결과를 확인하면 익스플로러 브라우저는 블록 레벨 태그(header, footer, article은 블록 레벨 태그임)를 인라인 레벨 태그로 인식한다.
따라서 css에 한 줄을 추가해 블록레벨로 인식시켜 준다.
<style type="text/css">
header, nav, article, section, aside, footer, menu, hgroup, figure,{display:block;}
</style> (주: display:block; 이 적용되지 않는다면, display:inline; 으로 대체한다.

위는 원리를 인식하기 위해서 인용을 하였고, 위 방식보다는 아래 방식으로 처리하는 것을 추천한다.

HTML5 태그를 익스플로러에서 인식시키기 위해 라이브러리를 링크할 수도 있다.
다음은 레미샤프가 제작하여 구글 코드를 통해 배포하고 있는 자바스크립트이다.

'if lt IE 9'는 IE9 이하 버전에 이 스크립트를 적용한다는 뜻이다.

html5shiv 자바스크립트에서 익스플로러를 위해 지원하는 HTML5 태그는
article, aside, audio, canvas, details, figcaption, figure, footer, header, hgroup, mark, meter, nav, output, progress, section, summary, time, video 이다.

익스플로러7 이하의 브라우저 웹표준 향상을 위한 스크립트

익스플로러7 이하의 브라우저를 위해 IE8.js 파일을 로드한다. 이 스크립트는 익스플로러 6에서 투명처리가 되지 않는 문제 등 웹표준 향상을 위한 편리한 기능을 제공한다.

익스플로러9 이하 브라우저에서 <canvas> 사용하기
<head>


</head>

excanvas.js파일과 canvas.text.js 파일을 연결해 주면 된다.
http://code.google.com/p/explorercanvas/
http://code.google.com/p/canvas-text/
위 링크에 접속하여 다운받으면 된다.

익스플로러9 이하 브라우저에서 CSS3 속성(radius, shadow) 사용하기
.box {
-moz-border-radius: 15px; /* for Firefox */
-webkit-border-radius: 15px; /* for Crome, Safari */
border-radius: 15px; /* Opera 10.5, 미래 브라우저들 */

-moz-box-shadow: 10px 10px 20px #000; /* for Firefox */
-webkit-box-shadow: 10px 10px 20px #000; /* for Crome, Safari */
box-shadow: 10px 10px 20px #000; /* Opera 10.5, 미래 브라우저들 */

behavior:url(ie-css3.htc); /* for 구형 익스플로러를 위한 스크립트 핵 */
}

behavior를 이용해서 ie-css3.htc 파일을 읽어오는 부분만 넣어주면 CSS3의 대표적인 속성을 이용할 수 있다.
ie-css3.htc 파일은
http://fetchak.com/ie-css3/ie-css3.htc 에서 다운받을 수 있다.

CSS3 프리픽스
* -moz-(파이어폭스)
* -webkit-(웹킨 엔진을 사용하는 크롬과 사파리)
* -o-(오페라)를 위한 '프리픽스' 코드

추가로

모든 브라우저에서 배경을 투명하게 처리하기 하기위한 방법을 소개한다

section#posts .post{
padding:0 10px 10px 10px;
color:#fff;
font-weight:bold;
/* works for IE 8. */
background-color:#999;
/* 기본 배경색 지정-투명도가 모두 적용되지 않았을 때 색상 */
background: #999;
/* RGBa 적용 - IE10,Firefox, Chrome, Safari, Opera ... */
background: rgba(0,0,0,0.3);
/* IE에서 Filter적용을 위해 배경을 지움 */
background: transparent !ie;
/* 정상적인 Filter적용을 위해 zoom:1을 적용 */
zoom:1;
/* IE5.5-7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#b2999999, endColorstr=#b2999999);
/* IE8,9 */
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#b2999999, endColorstr=#b2999999)";
}
적용 페이지는 http://time-space.biz 사이트의 메인 이다.

'웹표준·접근성' 카테고리의 다른 글

일본어 한자가 우리나라 브라우서에서는 한국 한자로 나올때 (0)	2014.01.23
form태그 안에서 input VS button 과 a 링크 사용에 대하여 (0)	2013.10.13
html 유효성검사시 주소표시줄의 공백문자 처리 (0)	2011.07.22
웹표준 코딩법 (0)	2011.07.21
웹접근성 자바스크립트를 이용한 페이지 이동 (0)	2011.07.06