PC에서 사용할 웹 앱을 만들고 있습니다. IE8 이상과 같은 브라우저와의 호환성 문제를 방지하기 위해 피해야 할 HTML5 태그는 무엇입니까?

참고 : 대부분의 질문은이 주제에 대해 1-3 년 된 것입니다.

어떤 HTML5 태그를 피해야하는지 물었습니다.

제가 아는 HTML5의 일부 태그는 의미 론적 이유로 만들어졌습니다. 예를 들어 다음과 같습니다.

<article> <section> <aside> <nav> <header> <footer> ..ect

이것들은 작업하기에 거의 괜찮으며 예를 들어 약간의 CSS가 필요합니다. display: block;대부분의 브라우저에서 정상적으로 작동하지만 이전 브라우저에서는 작동합니다. Internet Explorer와 호환 되려면 Javascript로 요소를 만들어야합니다.

여기에 예가 있습니다.

document.createElement('article');

설정합니다 <article>이전 Internet Explorer에서 사용하기 위해 요소를 .

자바 스크립트 기능이 필요한 고급 HTML5 태그는 다음과 같습니다.

<audio> <video> <source> <track> <embed> And most importantly <canvas> 

이러한 요소는 이전 브라우저에서 지원 / 쉬브하기가 더 어렵습니다. 개인적으로 조사하지는 않았지만 하단에 크로스 브라우저 폴리 필 링크를 포함 시켰지만.

따라서 Javascript 기능이 필요하지 않은 모든 요소는 약간의 크로스 브라우저 지원 코드와 함께 사용하기에 완벽하다고 말할 수 있습니다.

타겟팅이 > IE8 이면 shiv를 사용하면 괜찮습니다.

이전 브라우저를 무엇이라고 부르나요? <IE9

현재 HTML5 태그에 대한 브라우저 지원이 있습니다.

<section>, <article>, <aside>, <header>, <footer>, 
<nav>, <figure>, <figcaption>, <time>, <mark>

Internet Explorer 8 미만에서는 지원되지 않지만 이렇게 수정할 수 있습니다.

CSS :

section, article, aside, header, footer, nav, figure, figcaption{
   display: block;
}
time, mark { 
    display: inline-block;
}

자바 스크립트 :

var elements = ['section', 'article', 'aside', 'header', 'footer', 'nav', 'figure', 'figcaption', 'time', 'mark'];
for( var i = 0; i < elements.length; i++ ) {
    document.createElement(elements[i]);
}

그리고 <IE 9<audio> <video> <canvas> 에서는 지원되지 않습니다.

<embed>요소에서 일부 지원 갖는다 IE8을>

이 태그도 살펴 봐야합니다.

 <meta http-equiv="X-UA-Compatible" content="IE=edge">

이 meta태그는 Internet Explorer에 호환 모드로 전환하여 페이지를 IE7 또는 8처럼 렌더링하는 대신 사용 가능한 가장 높은 IE 모드로 표시하도록 지시합니다. 여기 에 대한 자세한 정보 .

HTML5 도우미 링크

Kick Start의 경우 HTML5 BoilerPlate를 확인할 수 있습니다.

브라우저 호환성 지원 표는 http://caniuse.com/에서 확인할 수 있습니다 .

HTML5 Shiv- https: //github.com/afarkas/html5shiv

HTML5 폴리 필 목록-https : //github.com/Modernizr/Modernizr/wiki / ...

최신 정보

댓글에서 언급했듯이

메타 태그 X-UA-Compatible에주의하십시오. 요소를 둘러싼 조건부 주석이있는 html5 상용구와 같은 것을 사용하는 경우 (이는 html5 doctype IIRC에서도 발생 함) 태그를 사용해도 IE9가 IE7 표준 모드로 강제 실행되는 문제가 발생할 수 있습니다. IE는 다시 파업

당신은 이것을 조사하고 싶을 수도 있습니다. 나는 지금 이것을 백업 할 것이 없습니다.

일반적으로 문제가 있습니다.

귀하의 질문은 HTML 5 태그 에 대해 묻기 위해 작성 되었지만 찾거나 작성할 수있는 Javascript에 비추어 새로운 기능을 살펴 보는 것도 유용합니다.

실제로 권장되는 방법은 특정 브라우저가 아닌 기능의 존재 여부를 테스트하는 것입니다. 모더 나이저의 스크립트는이 점에서 도움이 될뿐만 아니라의보고가 있습니다 HTML5에서 발견 할 수없는 기능 .

같은 일부 기능은 local storageIE8로 돌아갑니다.

과 같은 다른 사용자 FileReader는 IE10 / Firefox21 / Chrome27이 필요합니다.

최신 정보는 http://caniuse.com을 참조하십시오.

평소처럼 HTML 5를 작성하고 Shims 를 사용 하여 이전 브라우저와의 호환성을 보장합니다. 자바 스크립트 API는 shim이 거의 불가능하기 때문에 실제로주의해야합니다. 호환성을 위해 기본 HTML 4를 고수하려는 경우 HTML 5를 사용할 필요가 없습니다.

어떤 브라우저에서 사용할 수있는 태그와 각 태그에 대한 지원 수준을 빠르게 비교 하려면 html5test.com 이 훌륭한 리소스입니다.

HTML5 호환성 매트릭스를 찾고 있습니다.

http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML5)

또한 최상의 크로스 브라우저 호환성을 위해 Eric Meyer가 만든 reset.css를 사용하는 것이 좋습니다. http://meyerweb.com/eric/tools/css/reset/ 이렇게하면 브라우저마다 다른 요소가 모든 브라우저에서 동일하게 작동합니다.