구형 브라우저에서의 HTML5 (HTML5 Browser Support)
뿌리튼튼 CS/Web2016. 6. 11. 08:02
우리는 구형 브라우저가 HTML5 를 올바르게 다룰 수 있도록 지도할 수 있다. 심지어 Windows XP 2001 의 IE6 도 가능하다. |
최종 해결책
1 2 3 | <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> | cs |
위 세 줄을 <head> 영역에 써주면 된다.
원리1. CSS 를 통한 대응
예를 들어 구형 브라우저 입장에서 Unknown Elements 인 HTML5 Elements 에 대하여 아래와 같이 대응할 수 있다.
1 2 3 | header, section, footer, aside, nav, main, article, figure { display: block; } | cs |
원리2. 새로운 사용자 정의 Element 추가하기
같은 원리로 새로운 Element 를 HTML 에 추가할 수도 있다:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE html> <html> <head> <title>New element</title> <script>document.createElement("myHero")</script> <style> myHero { display:block; background-color:#ddd; padding: 50px; font-size: 30px; } </style> </head> <body> <myHero>My First Hero</myHero> </body> | cs |
원리3. 인터넷 익스플로러 (Internet Explorer) 의 문제점
위의 원리2 의 해결책을 통해 모든 HTML5 Elements 에 대응할 수 있지만,
IE8 이하에서는 unknown elements 에 대한 css 적용을 허용하지 않는 문제점이 있다.
이것까지 해결한 것이 "the shiv" 라는 js 파일이다:
1 2 3 | <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> | cs |
이 코드는 주석이지만 IE9 미만의 버전에서는 단순 주석이 아니라 실제 코드로써 동작한다.
출처
http://www.w3schools.com/html/html5_browsers.asp
'뿌리튼튼 CS > Web' 카테고리의 다른 글
| [JavaScript(ES6)] Promise (0) | 2016.06.22 |
|---|---|
| [JavaScript(ES6)] Proxy (0) | 2016.05.19 |
| [JavaScript(ES6)] Iterators and Generators (0) | 2016.05.16 |
| [JavaScript] DOM 엑세스 줄이기 (Reduce DOM Access) (0) | 2015.08.03 |
| [JavaScript] Loose Comparison vs. Strict Comparison (0) | 2015.07.31 |
