인터넷 익스플로러 HTML5 호환성 가이드

HTML5 호환성 가이드 타이틀

HTML5은 각 브라우저 벤더들이 참여해서 개발하는데 각 기능들마다 표준안에 대한 논의가 이루어지는 속도가 다르고 각 브라우저 벤더가 독자적으로 개발하는 기술들도 있기 때문에 브라우저들마다 HTML을 지원하는 사양이 다르다. 그래서 각 브라우저는 주기적인 업데이트로 기존의 문제점을 해결하고 새로운 기능을 추가해서 가능한 한 최신의 상태를 유지하지만, 사용자가 브라우저를 최신 상태로 유지하지 않거나 유지하지 못하는 경우가 있기 때문에 사이트의 운영 목적에 따라서 최신 기술에 대한 하위 호환성을 고려해야 한다.

인터넷 익스플로러는 마이크로소프트가 2015년 이후에 업데이트를 중단했고, 2022년 6월 15일에 서비스를 완전히 종료한다고 발표했는데도 여전히 사용하는 사람들이 많기 때문에 가능한 한 많은 사람들에게 올바른 콘텐츠를 제공해야 하는 사이트라면 클라이언트의 요구에 따라 인터넷 익스플로러 구 버전에 대한 호환성을 고려해야 한다. 인터넷 익스플로러 구 버전에서 HTML5를 사용하는 방법을 저장해두고자 인터넷 익스플로러 HTML5 호환성 가이드를 작성했다.

주의사항
1. HTML5 호환성과 관련된 모든 정보를 다루지 않는다.
2. 2022년 6월 15일부터는 인터넷 익스플로러 HTML5 호환성을 고려할 필요가 없다.
3. 웹상의 정보를 종합해서 작성했기 때문에 사실과 다른 정보가 있을 수도 있다.

목차

  1. HTML5 문서 기본 구조
  2. MDN Web Docs의 HTML5 호환성 가이드
  3. 폴리필을 사용한 HTML5 호환성 가이드
Quick Menu
HTML 문서 구조 MDN 호환성 가이드 폴리필 호환성 가이드

HTML5 문서 기본 구조

○ HTML5 기본 태그

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>HTML5 Reference</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    …
    <script src="example.js"></script>
  </body>
</html>

(1) <!DOCTYPE html>
문서에 HTML5 마크 업이 포함되어 있음을 선언한다. HTML5를 지원하지 않는 브라우저에서는 HTML5의 새로운 기능을 무시한 채 기존에 확립된 HTML을 기반으로 문서를 렌더링 한다.

(2) <html lang=”ko”>
문서가 어떤 언어로 작성되었는지 명시해야 한다. 시각 장애인이 사용하는 스크린 리더가 <html lang=”ko”>를 인식하고 문서에 영어가 있다면 한국어로 해석해서 말해준다.

(3) <head>
문서가 사용하는 정보를 담는다.

(4) <meta charset=”utf-8″>
문자 집합을 선언한다. 일부 브라우저는 브라우저가 예상한 문자 집합과 다른 경우 HTML 문서의 구문 분석을 다시 시작하기 때문에 <head> 바로 다음에 <meta charset=”utf-8″>를 작성해야 한다.

(5) <body>
문서의 내용을 담는다.

(6) <body> … <script src=”example.js”></script></body>
<script>는 <body>의 최하단에 위치해야 한다. 사용자가 웹사이트를 요청하면 브라우저는 렌더링 엔진으로 HTML과 CSS를 읽어서 화면에 표시하고, 자바스크립트 엔진으로 자바스크립트를 읽어서 실행한다. 만약에 HTML 태그 사이에 자바스크립트 코드가 위치하면 렌더링 엔진이 HTML을 읽다가 자바스크립트 코드를 발견하면 HTML 읽기를 중단하고 자바스크립트 엔진이 자바스크립트를 읽고 실행한 다음 다시 렌더링 엔진이 HTML을 이어서 읽기 때문에 사용자 경험을 저해하고, HTML 사이에 HTML 구조와 CSS를 변경하는 자바스크립트가 있다면 오류가 발생한다.

○ 인터넷 익스플로러 브라우저 모드 적용

<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>를 작성하면 인터넷 익스플로러가 문서를 렌더링 할 때 사용자가 인위적으로 설정한 호환성 보기를 무시하고 브라우저가 지원하는 호환성 보기 중 가장 최신 버전으로 렌더링 한다. 인터넷 익스플로러 호환성을 고려한다면 반드시 작성해야 하는 메타 태그이다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>HTML5 Reference</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    …
    <script src="example.js"></script>
  </body>
</html>

○ 인터넷 익스플로러에서 지원하지 않는 HTML5 태그

  • main
  • details
  • summary
  • time
  • data
  • meter
  • picture
  • input type: color, date, datetime-local, time, month, week

MDN Web Docs의 HTML5 호환성 가이드

1. MDN Web Docs의 HTML5 호환성 가이드를 따른 index.html

인터넷 익스플로러 9 미만은 HTML5를 전혀 지원하지 않기 떄문에 HTML5의 의미있는 요소를 알 수 없는 요소로 인식해서 HTML5의 의미있는 요소에 대해 CSS를 적용할 수 없는데, MDN Web Docs의 HTML5 호환성 가이드를 따르면 인터넷 익스플로러 9 미만에서 HTML5의 의미있는 요소 중 <article>, <aside>, <footer>, <header>, <nav>, <section>, <time>에 대해 CSS를 적용할 수 있다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>HTML5 Reference</title>
    <!--[if lt IE 9]>
      <script>
        document.createElement("article");
        document.createElement("aside");
        document.createElement("footer");
        document.createElement("header");
        document.createElement("nav");
        document.createElement("section");
        document.createElement("time");
      </script>
    <![endif]-->
    <noscript>
      <p><strong>This web page requires JavaScript to be enabled.</strong></p>
    </noscript>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    …
    <script src="example.js"></script>
  </body>
</html>

(1) 알수없는 요소 사용
조건부 주석인 <!–[if lt IE 9]> … <![endif]–>를 사용해서 인터넷 익스플로러 9 버전 미만에서만 HTML5의 의미 있는 요소를 생성해서 CSS를 적용할 수 있게 한다. 단 생성된 요소들이 실제 요소가 가지는 기능을 수행하지는 못한다.

(2) 자바스크립트 비활성화 체크
<noscript>를 추가해서 자바스크립트가 비활성화된 경우 <noscript> 내 텍스트를 출력해서 자바스크립트가 비활성화되어 있다고 알려줘야 한다.

2. MDN Web Docs의 HTML5 호환성 가이드를 따른 style.css

오래된 브라우저에서는 알 수 없는 요소를 display:inline;으로 인식하기 때문에 각 요소의 기본 스타일이 블록 태그인 경우 해당되는 요소들의 스타일을 display:block;라고 변경해야 한다. <time>은 기본 스타일이 display:inline;이라서 스타일을 변경할 필요가 없다.

article,
aside,
footer,
header,
nav,
section {
  display: block;
}

3. MDN Web Docs의 HTML5 호환성 가이드를 주의사항

MDN Web Docs의 HTML5 호환성 가이드를 적용하면 HTML 유효성 검사 결과에 오류가 발생했다고 표시될 수 있다.

폴리필을 사용한 HTML5 호환성 가이드

polyfill은 구 버전 브라우저에 최신 기능을 사용하는데 필요한 기능을 추가하는 코드이다. poly는 여러 가지 기술을 사용해서 해결한다는 의미이고, fill은 기술이 필요한 브라우저의 구멍을 채운다는 의미이다. 폴리필을 사용하면 서버에 데이터를 요청하는 횟수가 증가하고, 서버로부터 데이터를 받는 데 시간이 더 걸리고, 자바스크립트 엔진이 데이터를 읽고 실행하는 데 시간이 더 걸리고, 이 모든 과정을 진행하기 전에는 렌더링 엔진이 HTML과 CSS를 읽을 수 없어서 전반적인 사용자 경험을 저해하기 때문에 가능한 한 사용하지 않는 편이 좋다.

○ html5shiv

인터넷 익스플로러 6 버전부터 8 버전까지 HTML5의 의미 있는 요소에 CSS 스타일을 지정할 수 있게 하고, 인터넷 익스플로러 6 버전부터 9 버전, Safari 4.X 버전, iPhone 3.X 버전, Firefox 3.X 버전에서 의미 있는 요소 중 블록 요소들에 대해 display:block를 지정한다.

html5shiv 사이트의 html5shiv.min.js를 사용하면 되고, 인터넷 익스플로러에서 인쇄 기능을 사용한다면 html5shiv-printshiv.min.js를 사용해야 한다. 최신 버전은 3.7.3 버전으로 2015년 7월 이후로 업데이트가 없다. 2015년 7월에 마이크로소프트가 윈도우 10을 출시하면서 엣지가 등장했고, 인터넷 익스플로러 11 버전 밑으로는 지원을 중단한다고 밝히면서 html5shiv의 업데이트도 중단된 것으로 추정된다.

1. html5shiv 파일 용량 비교

파일명용량
html5shiv.js10.4KB
html5shiv.min.js2.67KB
html5shiv-printshiv.js16.3KB
html5shiv-printshiv.min.js4.26KB

2. html5shiv.min.js를 따른 index.html

조건부 주석인 <!–[if lt IE 9]> … <![endif]–>를 사용해서 인터넷 익스플로러 9 버전 미만에서 html5shiv.min.js가 실행되도록 작성해야 한다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>HTML5 Reference</title>
    <!--[if lt IE 9]>
      <script src="html5shiv.min.js"></script>
    <![endif]-->
    <noscript>
      <p><strong>This web page requires JavaScript to be enabled.</strong></p>
    </noscript>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    …
    <script src="example.js"></script>
  </body>
</html>

3. html5shiv 주의사항

html5shiv를 사용하면 document.createElement로 태그를 생성했을 때 일부 메서드가 정상적으로 작동하지 않고 이 문제는 해결 방법이 없다. html5shiv의 printShiv 버전을 사용하면 인쇄 및 인쇄 스타일과 관련된 전체 DOM을 변경하기 때문에 복잡한 웹사이트 또는 페이지에 많은 인쇄 스타일이 지정된 경우 성능 문제와 스타일 깨짐 문제가 발생할 수 있다.

○ picturefill

인터넷 익스플로러에서 <picture>, <img>의 srcset 속성, sizes 속성을 사용할 수 있게 한다. picturefill 사이트의 picturefill.min.js를 사용하면 된다. 최신 버전은 3.0.2 버전으로 2016년 2월 이후로 업데이트가 없다. 2015년 7월에 마이크로소프트가 윈도우 10을 출시하면서 엣지가 등장했고, 2016년 1월부터 인터넷 익스플로러 11 버전 밑으로는 지원이 중단되면서 picturefill의 업데이트도 중단된 것으로 추정된다.

1. picturefill 파일 용량 비교

파일명용량
picturefill.js45.1KB
picturefill.min.js11.5KB

2. picturefill 사용하기

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>HTML5 Reference</title>
    <script>
      document.createElement("picture");
    </script>
    <script src="picturefill.min.js" async></script>
    <noscript>
      <p><strong>This web page requires JavaScript to be enabled.</strong></p>
    </noscript>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    …
      <picture>
        <source srcset="examples/example-small.jpg" media="(min-width: 1200px)">
        <source srcset="examples/example-big.jpg" media="(min-width: 768px)">
        <img srcset="examples/example.jpg" alt="">
      </picture>
    …
    <script src="example.js"></script>
  </body>
</html>
(1) 알 수 없는 요소 사용

HTML5의 <picture>를 생성해서 CSS를 적용할 수 있게 한다.

(2) 인터넷 익스프롤러에서만 스크립트 실행하기

인터넷 익스플로러 10 이상에서는 <!–[if lt IE 9]> … <![endif]–>와 같은 조건부 주석을 사용할 수 없기 때문에 자바스크립트로 사용자 에이전트 문자열을 확인해서 인터넷 익스플로러만 가지고 있는 특정 문자열의 존재 여부를 확인하고 해당 문자열이 있을 때만 스크립트를 실행하도록 해야 한다.

인터넷 익스플로러의 사용자 에이전트 문자열은 구글에서 Internet Explorer User Agent Strings로 검색하면 각 버전별 사용자 에이전트 문자열을 볼 수 있다. 인터넷 익스플로러 11의 경우 “Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; rv:11.0) like Gecko”인데, 모든 인터넷 익스플로러의 사용자 에이전트 문자열에는 Trident라는 인터넷 익스플로러 렌더링 엔진명이 들어있기 때문에 일반적으로 Trident와 같은 고유의 문자를 탐색해서 인터넷 익스플로러 유무를 판단한다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>HTML5 Reference</title>
    <script>
    if (navigator.appName === "Netscape" && navigator.userAgent.search("Trident") != -1) {
      document.createElement("picture");
      document.write('<script src="picturefill.min.js" async><\/script>');
    }
    </script>
    <noscript>
      <p><strong>This web page requires JavaScript to be enabled.</strong></p>
    </noscript>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    …
      <picture>
        <source srcset="examples/example-small.jpg" media="(min-width: 1200px)">
        <source srcset="examples/example-big.jpg" media="(min-width: 768px)">
        <img srcset="examples/example.jpg" alt="">
      </picture>
    …
    <script src="example.js"></script>
  </body>
</html>

3. picturefill 주의사항

– 코드 충돌 문제로 <picture> 내 <img>에 src 속성을 사용하면 이미지를 두 번 다운로드 받기 때문에 <img>에 src 속성을 사용하면 안 된다.
– 코드 충돌 문제로 <picture>의 사양에 퍼센트를 적용하면 100vw로 작동한다.
– 이미지가 특정한 크기로만 표시되길 원한다면 <img srcset=”data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==”
alt=”empty img” />처럼 <img>에 투명한 gif를 연결해야 한다.
– 인터넷 익스플로러 9에서 충돌 문제가 있기 때문에 <picture> 내 <source>들을 <!–[if IE 9]><video style=”display: none;”><![endif]–>와 <!–[if IE 9]></video><![endif]–>로 감싸야 한다.
– 사파리에서 충돌 문제가 있기 때문에 브라우저가 올바른 <source>를 선택하기 전에 짧은 시간 동안 잘못된 이미지가 로드될 수 있다. 이 문제를 해결하려면 <img>에서 src 및 srcset를 제거해야 하는데 이 경우 오래된 안드로이드 기기에서 잘못된 이미지가 노출될 수 있다.

출처

관련 글

최종 업데이트:

댓글쓰기