HTML5 & 크로스 브라우징
HTML5의 새로운 시멘틱 요소들을 구 버전 IE를 포함하여 모든 브라우저에 걸쳐 제대로 작동시키기 위해서 어떤 기술을 이용해야 하는지에 대해 알아봅니다
먼저, 새로운 요소를 지원하지 않는 브라우저는 그것들을 어떻게 처리하는지 살펴보겠습니다.
HTML은 관대한 언어이면서 꽤 오랫동안, 대부분의 브라우저는 인식하지 못하는 요소와 속성들을 익명의 인라인 요소로 취급하고, 그러나 그 익명의 요소들에 스타일을 줄 수 있도록 허용하며 적절하게 처리해 왔습니다.
모든 브라우저들은 자체 지원하는 요소들을 목록화하여 가지고 있습니다.
예를 들어, 파이어폭스의 목록은 nsElementTable.cpp라 불리우는 파일에 저장되어 있고 이 파일은 브라우저가 맞닥드릴 요소들에게 어떻게 스타일을 주어야 하고, DOM에서 그것들을 어떻게 다루어 져야 하는지 등 처리방법을 말해줍니다.
이를 위한 예제를 하나 들어 보겠습니다.
아래의 아주 기본적인 페이지는 <time>요소를 담고 있고, 또 이 새로운 요소를 가리키고 있는 선언문을 포함한 내부 스타일을 가지고 있습니다.
<time>요소에 대한 자세한 내용은 차차 다루기로 하고, 여기서 제기되는 문제는 “브라우저가 이 <time>요소에 어떻게 스타일을 줄 것인가?”입니다.
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Style Unknown Elements - 1</title>
<style>
time { font-style : italic; }
</style>
</head>
<body>
<p>Make a historic journey on <time datetime="1959-05-28">May 28, 1959</time>.<p>
</body>
</html>첫째로, 좋은 소식은 대부분의 최근 브라우저가
하지만 IE의 구버전에서는 다릅니다. IE8을 포함한 그 이전의 버전에서는 <time>이라는 요소를 제대로 인식하지 못하여 텍스트에는 아무런 스타일 변화가 없습니다.
말할 필요도 없이, 우리가 풀어야 할 문제이고, 또 반가운 소식은 이 문제를 해결할 수 있는 방법이 있다라는 것입니다.
IE의 편익을 위해서 이 새로운 요소를 분명하게 선언해 줄 약간의 JavaScript를 사용해서 문제를 해결할 수 있습니다.
Sjoerd Visscher에 의해 개발된 이 기술은 새로운 요소를 제대로 인식하게끔 IE에 속임수를 씀으로서 새로운 DOM요소를 만들어 내는 일을 수반하고 있습니다.
아래와 같이 약간의 JavaScript를 추가하면 스타일이 적용될 것입니다.
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Style Unknown Elements - 1</title>
<script>
document.creatElement('time');
<script>
<style>
time { font-style : italic; }
</style>
</head>
<body>
<p>Make a historic journey on <time datetime="1959-05-28">May 28, 1959</time>.<p>
</body>
</html>이 간단한 JavaScript로 IE 브라우저는 속아서 이태릭체로 스타일 변화를 허용하며, 이 <time>요소를 제대로 인식할 것입니다.
하지만 이것은 단지 <time>요소 하나에만 적용된 해결방법인 셈 입니다.
다음 예제는 IE가 HTML5의 모든 새로운 요소들을 제대로 인식하게끔 할 수 있는 해결 방법을 보여 주고 있습니다.
여기에 원하는 모든 요소들을 포함시키면 됩니다.
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Style Unknown Elements - 1</title>
<script>
(function() {if(!/*@cc_on!@*/0)return;var e = "abbr,article,aside,
audio,canvas, datalist,details,eventsource,figure,footer,header,
hgroup,mark,menu,meter,nav,output,progress,section,time,video"
.split(','),i=e.length;while(i--){document.createElement(e[i])}})()
<script>
<style>
time { font-style : italic; }
</style>
</head>
<body>
<p>Make a historic journey on <time datetime="1959-05-28">May 28, 1959</time>.<p>
</body>
</html>하지만 보면 알수 있듯이, 페이지 마다 적용시키기에는 꽤 많은 JavaScript 입니다.
그렇다면 HTML5의 모든 새로운 요소들이 앞서 언급했던 목록화와 같이 되어 있다면 어떨까?
생성된 HTML5 페이지마다 새로운 요소들을 찾아서 기능을 대체하는 약간의 정규 표현 방식을 표현해 주는 방법이 있습니다.
바로 shiv 가 그 해결책이 될 수 있습니다.(이미 많이 알고 있겠지만..)
html5shiv
shiv는 HTML5 요소를 구형 브라우저에서 지원되지 않는 새로운 요소를 지원하고 스타일화할 수 있도록 도움을 주는 라이브러리입니다.
Remy Sharp의 허가로 “HTML5 Enabling Script”라 이름 지어졌는데, 흔히 “shiv”라 불리고 있습니다.
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Style Unknown Elements - 1</title>
<!--[if lt IE 9]>
<script src="js/html5shiv.js"><script>
<![endif]-->
<style>
time { font-style : italic; }
</style>
</head>
<body>
<p>Make a historic journey on <time datetime="1959-05-28">May 28, 1959</time>.<p>
</body>
</html>HTML5 페이지에 위의 예제와 같이 이 script만 링크시켜 인클루드 한다면 앞에 언급했던 모든 골치 아픈 문제들이 해결될 것 입니다.
또한 Remy가 구글에서 이 스크립트를 관리하고 있으니 http://html5shiv.googlecode.com/svn/trunk/html5.js로 바로 링크시켜도 상관없습니다.
여기로 링크시키기만 하면 JavaScript 안에 뭐가 있고 최신 버전인지 아닌지 신경쓸 필요도 없을 것 입니다.
그리고 조건부 주석안에 script 링크를 중첩시킨 것은 IE8을 포함한 그 이하 구버전에서만 Script를 불러 들여야 하기 때문입니다.
즉, html5shiv.js가 필요 없는 브라우저는 굳이 불러들일 필요가 없습니다.
자체적으로 새로운 요소에 대한 지원이 모두 이루어 지고 있기 때문입니다.
끝으로, 강조해야 할 두 가지 핵심사항이 있습니다.
- 첫째로, shiv는 요소 안에서 링크시켜야 됩니다. HTML5 페이지가 다 렌더링 되기 전에 IE 브라우저가 새로운 요소에 대해 인지하고 있어야 하기 때문입니다.
- 두번째로, shiv는 그 기능을 제대로 할 수 있게끔 하는 JavaScript에 의존하고 있습니다. 만약 유저의 대부분이 JavaScript의 기능을 끈 채로 웹 페이지를 브라우징하고 있다면, 마크업에 HTML5 요소명을 클래스 명으로 사용하는 등 대안을 고려해야 할 것입니다.
'HTMLㆍ웹표준ㆍ 웹접근성' 카테고리의 다른 글
| HTML5의 구조적인 요소들 #2 - <section>,<article> (0) | 2016.09.29 |
|---|---|
| HTML5 Elements #1 - <nav>, <aside>, <figure> (0) | 2016.09.29 |
| HTML5와 접근성 (2) | 2016.09.29 |
| HTML Tags (1) | 2016.09.15 |
| HTML(Hyper Text Markup Language) (0) | 2016.09.14 |
