집 > 기사 > 웹 프론트엔드 > HTML5 새 태그의 브라우저 호환성 문제 해결

HTML5 새 태그의 브라우저 호환성 문제 해결

怪我咯원래의: 2017-04-30 11:00:105202검색

결국 HTML5 사양은 이제 막 정의된 사양이므로 새 태그와 새 속성을 지원하지 못하는 브라우저도 있습니다. 특히 IE8 이하의 브라우저에서는 더욱 그렇습니다. 다음은 HTML5 새 태그 처리의 브라우저 호환 버전에 대한 소개입니다. 필요한 친구들은

을 참조하면 됩니다. 결국 HTML5 사양은 아직 정의된 사양이 있습니다. 특히 IE8 이하 브라우저의 경우 새 태그와 새 속성을 지원할 수 없습니다. 다음은 페이지에서 HTML5 새 태그를 사용하는 몇 가지 실용적인 방법을 소개합니다. 그 목적은 HTML5의 새 태그가 하위 수준 브라우저에서 제한적으로 지원되고 전체 페이지 기능에 영향을 미치지 않도록 하는 것입니다.

브라우저가 HTML5 사양의 새 태그를 인식하도록 합니다.

IE8 브라우저의 경우 HTML5 새 태그에 대한 지원이 아직 추가되지 않았으므로 HTML5 새 태그의 콘텐츠를 IE8에서 직접 표시할 수 없습니다. 다행히 IE8/IE7/IE6은 document.createElement 메소드로 생성된 태그를 지원합니다. 이 기능을 사용하면 해당 브라우저가 HTML5 새 태그를 지원하도록 할 수 있습니다.

var e = "abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(&#39;, &#39;);
var i= e.length;
while (i--){
    document.createElement(e[i])
}

브라우저가 새 태그를 지원한 후에는 태그의 기본 스타일도 추가해야 합니다.

article,aside,figcaption,figure,footer,header,hgroup,nav,section{display:block}
mark{background:#FF0;color:#000}

단 두 개의 간단한 JavaScript 코드 및 이와 같은 CSS 코드는 IE8 이하의 브라우저가 HTML5의 새로운 태그를 지원하도록 합니다. 물론 가장 좋은 방법은 성숙한 프레임워크를 직접 사용하는 것입니다. 현재 이 아이디어를 기반으로 하는 프레임워크가 여러 개 있는데, 가장 일반적으로 사용되는 프레임워크는 html5shim 프레임워크를 사용하는 방법이 매우 간단합니다. 페이지의 머리 부분:

<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->

HTML5의 새로운 기능에 대한 이전 버전과의 호환성

광의의 HTML5에는 HTML5, CSS3 및 새로운 API가 포함됩니다. 새로운 기능에는 브라우저 호환성 문제가 있을 수 있으므로 새로운 기능을 사용할 때에는 브라우저가 해당 기능을 지원하는지 확인하는 것이 매우 필요합니다. 브라우저가 새로운 기능을 지원하지 않는 경우 적절한 이전 버전과의 호환성 처리가 수행될 수 있습니다. 현재는 새로운 기능에 대한 지원을 감지하는 통합된 방법이 없습니다. 일부 새로운 기능에는 식별할 수 있는 해당 API가 있으며 일부 새로운 기능은 일부 기술을 통해서만 식별할 수 있습니다. 다행스럽게도 해외의 열정적인 엔지니어들은 새로운 기능을 감지하기 위한 여러 프레임워크를 개발했습니다. 그중 Modernizr는 감지 정확도와 사용률이 더 높습니다.

Modernizr 프레임워크의 원리는 브라우저가 새로운 기능을 지원하는지 자동으로 감지하고 해당 클래스를 100db36a723c770d327fc0aef2ce13b1 태그에 추가하는 것입니다. 브라우저가 기능을 지원하는 경우 기능 이름으로 명명된 클래스가 추가됩니다. 그렇지 않으면 "no-" 접두사와 기능 이름으로 명명된 클래스가 추가됩니다. 동시에 modernizr이라는 객체도 생성됩니다. 이 객체의 각 기능을 나타내는 속성 값을 판단하면 현재 브라우저가 이 새로운 기능을 지원하는지 알 수 있습니다. Modernizr 프레임워크에는 html5shim 프레임워크의 기능도 포함되어 있어 IE8 이하 브라우저에서 새 태그를 지원할 수 있습니다.

Modernizr을 사용하는 방법은 매우 간단합니다. 먼저 헤드 부분에 프레임워크의 JavaScript 파일을 도입합니다.

<script src="js/modernizr.min.js"></script>

둘째, html 태그 Classes for no-js에 이름을 추가합니다:

<html class="no-js">

브라우저가 JavaScript를 비활성화하지 않으면 브라우저가 페이지를 로드한 후 클래스는 html 태그는 동적으로 교체되고 추가됩니다. 로드 후 html 태그는 다음과 같습니다.

<html class="js canvas canvastext geolocation rgba hsla no-multiplebgs borderimage borderradius boxshadow opacity no-cssanimations csscolumns no-cssgradients no-cssreflections csstransforms no-csstransforms3d no-csstransitions  video audio cufon-active fontface cufon-ready">

CSS 코드에서 이러한 클래스를 사용하여 이전 버전과의 호환성 코드를 추가할 수 있습니다. 여러 배경 이미지를 사용하는 방법 예:

#nice {
    background: url(background-one.png) top left repeat-x;
}
.multiplebgs #nice {
    background: url(background-one.png) top left repeat-x,url(background-two.png) bottom left repeat-x;
}

이 프레임워크에 관심이 있는 독자는 Modernizr 공식 웹사이트에서 더 자세한 예제와 사용법을 찾아볼 수 있습니다.

오디오 및 비디오 호환성

오디오 및 비디오는 페이지에 있습니다. 멀티미디어 태그는 미디어에서 흔히 사용되지만 브라우저 호환성이 상당히 혼란스럽기 때문에 여기서는 별도의 주제로 다루겠습니다. 오디오 및 비디오는 브라우저에서 기본적으로 지원되는 비교적 초기 기능이므로 오디오 및 비디오 재생은 특히 모바일 플랫폼에서 더 이상 타사 플러그인으로 제한되지 않습니다. 오디오와 비디오는 매우 중요한 부분이며 각 브라우저 제조업체는 가장 큰 부분을 원합니다. 이로 인해 브라우저에서 지원하는 오디오 및 비디오 형식도 차별화되었습니다. 브라우저에서 지원하는 오디오 형식 목록은 다음과 같습니다.

브라우저	버전	지원 형식
Internet Explorer	9.0+	MP3, AAC
크롬	6.0+	Ogg Vorbis, MP3, WAV(9.0+)
Firefox	3.6+	Ogg Vorbis, WAV
사파리	5.0+	MP3, AAC, WAV
오페라	10.0+	오그 보비스, WAV

大约有80%的浏览器支持HTML5的b97864c2e0ef2353a16c4d64c7734e92标签，但是并没有一种统一的音频格式。从支持的格式来看，要让所有的浏览器可以播放audio元素上的音频，最佳的方式是提供MP3和Ogg两种格式，兼容代码如下：

<audio controls>
    <source src="elvis.mp3" type=&#39;audio/mpeg; codecs="mp3"&#39;>
    <source src="elvis.oga" type=&#39;audio/ogg; codecs="vorbis"&#39;>
    <!-- 向后兼容代码：如，显示提示信息、提供下载链接使用flash播放器等 -->
    浏览器不支持<code>audio</code>标签
</audio>

视频也有和音频类似的状况，如下是浏览器支持视频的格式列表：

浏览器	版本	支持格式
Internet Explorer	9.0+	MP4
Chrome	6.0+	MP4,WebM,Ogg
Firefox	3.6+	WebM,Ogg
Safari	5.0+	MP4
Opera	10.0+	WebM,Ogg

从浏览器支持的视频格式来看，最佳的方式是提供WebM和MP4两种格式的视频。兼容代码如下：

<video controls>    
    <source src=video.webm type=video/webm>    
    <source src=video.mp4 type=video/mp4>      
    <!—向后兼容代码: -->      
    <iframe width="480" height="360" src="http://www.youtube.com/embed/xzMUyqmaqcw?rel=0" frameborder="0" allowfullscreen></iframe>  
</video>

위 내용은 HTML5 새 태그의 브라우저 호환성 문제 해결의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：JS+HTML5를 사용하여 이미지 업로드 미리보기 효과 얻기(예)다음 기사：JS+HTML5를 사용하여 이미지 업로드 미리보기 효과 얻기(예)