HTML5 새 태그의 브라우저 호환성 문제 처리-H5 튜토리얼-php.cn

HTML5 새 태그의 브라우저 호환성 문제 처리

PHPz

풀어 주다： 2018-10-12 17:31:02

원래의

1222명이 탐색했습니다.

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

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

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

로그인 후 복사

두 번째로 추가합니다. html 태그의 이름 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	오그 보비스, WAV
사파리	5.0	MP3, AAC, WAV
오페라	10.0	오그 보비스, WAV

大约有80%的浏览器支持HTML5的

<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新标签的浏览器兼容版问题，希望对大家有所帮助，更多相关教程请访问 Html5视频教程