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

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

高洛峰

풀어 주다： 2017-03-19 09:30:53

원래의

1195명이 탐색했습니다.

HTML5 사양은 결국 정의된 사양으로 일부 브라우저, 특히 IE8 이하 브라우저에서는 새 태그와 새 속성을 지원하지 않습니다. 다음은 HTML5 새 태그 처리의 브라우저 호환 버전에 대한 소개입니다. 필요한 친구들은

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

브라우저가 HTML5 사양의 새 태그를 인식하도록 허용

IE8 브라우저는 새 HTML5 태그에 대한 지원을 추가하지 않았으므로 IE8은 HTML5 새 태그의 내용을 직접 표시할 수 없습니다. 다행히 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(', ');
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>

로그인 후 복사

두 번째로 에 no-js라는 클래스를 추가합니다. html 태그 :

<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的

<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 중국어 웹사이트의 기타 관련 기사를 참조하세요!