집 > 기사 > 웹 프론트엔드 > H5 새 탭 브라우저 호환성 문제

H5 새 탭 브라우저 호환성 문제

php中世界最好的语言원래의: 2018-03-26 14:39:302456검색

이번에는 H5 뉴탭 브라우저의 호환성 문제를 전해드리겠습니다. H5 뉴탭 브라우저의 호환성 문제를 다룰 때 주의사항은 무엇인가요? 실제 사례를 살펴보겠습니다.

결국 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(', ');
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의 공식 웹사이트에서 더 자세한 예제와 사용법을 찾아볼 수 있습니다.

오디오 및 비디오 호환성

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

브라우저	version	지원 형식
Internet Explorer	9.0+	MP 3, AAC
Chrome	6.0 +	Ogg Vorbis, MP3, WAV(9.0+)
Firefox	3.6+	Ogg Vorbis, WAV
Safari	5.0+	MP3, AAC, WAV
Opera	10.0+	Ogg 보비스, 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>

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

H5 새 탭 브라우저 호환성 문제

관련 기사