브라우저 호환성에 대해 걱정하지 않고 어떤 HTML5 태그를 사용할 수 있습니까?

브라우저 호환성에 대해 걱정하지 않고 어떤 HTML5 태그를 사용할 수 있습니까?

---

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 / ...

최신 정보

댓글에서 언급했듯이

Be careful with the meta tag X-UA-Compatible. If you use something like html5 boilerplate that has conditional comments surrounding the element (this also happens with the html5 doctype IIRC), you may run into problems with IE9 forcing itself into IE7 standards mode even with the tag. IE strikes again

You may want to look into this, I have nothing to back this up at the moment.

---

Generally, there are issues.

I've been told that your question is worded to ask about HTML 5 tags but it is also useful to look at the new features in light of any Javascript you might find or write.

In practice, the recommended method is to test for the existence of the feature rather than a specific browser. The Modernizr script may be helpful in this regard, but there are also reports of undetectable features in HTML5.

Some features like local storage go back to IE8.

Others, like FileReader, require IE10/Firefox21/Chrome27

For current information, try http://caniuse.com

---

Write HTML 5 like you normally would and use Shims to ensure compatibility with older browsers. You only need to be careful with Javascript APIs really, because those are hardly shim-able. If you're trying to stick to baseline HTML 4 for compatibility, there's no point in using HTML 5.

---

For a quick comparison of what tags are available in what browsers, and what level of support for each tag, html5test.com is a great resource.

---

You are looking for an HTML5 compatability matrix

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

---

Also, for the best cross browser compatibility, i suggest you use this reset.css created by Eric Meyer. http://meyerweb.com/eric/tools/css/reset/ This makes the elements that differ from a browser to another, to behave the same in all browsers.

참고URL : https://stackoverflow.com/questions/18223540/which-html5-tags-can-i-use-without-worrying-about-browser-compatibility