결국 HTML5 사양은 방금 정의 된 사양이며 일부 브라우저는 새로운 레이블과 새로운 속성, 특히 IE8 이하의 브라우저 버전을 지원할 수 없습니다. 다음은 페이지에서 HTML5의 새로운 태그를 사용하는 실용적인 방법입니다.
IE8 브라우저는 HTML5 태그에 대한 새로운 지원을 추가하지 않았으므로 IE8의 새로운 HTML5 태그에 컨텐츠를 직접 표시 할 수 없습니다. 다행스럽게도 IE8/IE7/IE6은 문서에서 생성 된 레이블을 지원합니다.
var e = abbr, 기사, 제쳐두고, 오디오, 캔버스, 데이터리스트, 세부 사항, 대화, 이벤트 소스, 그림, 바닥 글, hgroup, 마크, 미터, 미터, 출력, progess, section, time, video.split ( ','); var i = e.length;
브라우저가 새 레이블을 지원 한 후에는 레이블의 기본 스타일을 추가해야합니다.
제쳐두고, figcaption, 그림, 바닥 글, 헤더, nav, section {display : block} mark {backgring :#ff0;이러한 방식으로 두 개의 간단한 JavaScript 코드와 CSS 코드는 IE8을 만들 수 있으며 브라우저의 버전은 HTML5에서 새로운 태그를 지원할 수 있습니다. 물론 가장 좋은 방법은 성숙한 프레임 워크를 직접 사용하는 것입니다.
<!-[LT IE 9]> <cript> src = http://html5shim.googlecode.com/svn/trunk/html5.js </script> <!
넓은 의미에서 HTML5에는 HTML5, CSS3 및 새로운 API가 포함됩니다. 새로운 기능은 브라우저와 다소 호환되므로 새로운 기능을 사용할 때 브라우저 가이 기능을 지원하는지 여부를 감지해야합니다. 브라우저가 새로운 기능을 지원하지 않으면 적절하게 호환 될 수 있습니다. 현재 새로운 기능의 지원을 감지하는 균일 한 방법이 없으며 일부 새로운 기능은 일부 기술을 통해서만 식별 할 수 있습니다. 다행스럽게도 해외에서 열정적 인 엔지니어들이 탐지 정확도와 사용률이 높을 수있는 여러 가지 새로운 탐지 기능을 개발했습니다.
ModelNizr 프레임 워크의 원리는 브라우저가 새로운 기능을 지원하는지 자동으로 감지하고 해당 클래스를 <HTML> 태그에 추가하는 것입니다. 브라우저가 특정 기능을 지원하는 경우 특성 이름의 이름을 딴 클래스가 추가됩니다. 동시에이 객체의 특성의 특성 값을 판단하여 현재 브라우저 가이 새로운 기능을 지원하는지 알 수 있습니다. ModernIZR 프레임 워크에는 HTML5SHIM 프레임 워크의 기능이 포함되어있어 IE8 이하의 브라우저가 새로운 태그를 지원할 수 있습니다.
Modernizr의 사용 방법은 우선 프레임 워크의 JavaScript 파일이 다음과 같습니다.
<스크립트 src = js/modelnizr.min.js> </script>
둘째, HTML 레이블에서 No-JS라는 클래스를 추가하십시오.
<html class = no-js>
브라우저가 JavaScript를 비활성화하지 않으면 브라우저가 페이지를로드 한 후 HTML 태그의 클래스가 동적으로 교체하고 추가됩니다. 로드 후 HTML 태그는 다음과 유사합니다.
<html class = js canvas canvasttext geolocation rgba hsla no-multiplebgs borderraderradius boxshadow opacimanimamns no-cssgra dients no-csssreflession csstransforms no-csstransforms3d no-csstransinions vid
CSS 코드 에서이 클래스를 사용하여 뒤로 호환성 코드를 추가 할 수 있습니다.
#NICE {배경 : url (background-one.png) 상단 왼쪽 반복 X;}.}.이 프레임 워크에 관심이있는 독자는 ModernIZR의 공식 웹 사이트를 탐색하여 점점 더 자세한 예와 사용법을 얻을 수 있습니다.
오디오와 비디오는 페이지에서 일반적으로 사용되지만 브라우저는 더 혼란 스럽기 때문에 여기에 별도의 주제가 있습니다. 오디오 및 비디오는 이전 브라우저의 기본 지원의 특성이므로 오디오 및 비디오 재생은 특히 모바일 플랫폼에서 세 번째 파티 플러그인으로 더 이상 제한되지 않습니다. 오디오 및 비디오는 큰 케이크이며 모든 브라우저 제조업체는 가장 큰 제품을 구별하려고하며 브라우저가 오디오 및 비디오 형식의 형식을 구별하게합니다. 브라우저의 지원 오디오 형식 목록은 다음과 같습니다.
브라우저 | 버전 | 지원 형식 |
인터넷 익스플로러 | 9.0+ | MP3, AAC |
크롬 | 6.0+ | Ogg Vorbis, mp3, wav (9.0+) |
파이어 폭스 | 3.6+ | Ogg Vorbis, Wav |
원정 여행 | 5.0+ | MP3, AAC, Wav |
오페라 | 10.0+ | Ogg Vorbis, Wav |
브라우저의 약 80%가 HTML5의 <udio> 태그를 지원하지만 균일 한 오디오 형식은 없습니다. 지원 형식의 관점에서 모든 브라우저는 오디오 요소에서 오디오를 재생할 수 있습니다.
<Audio Controls> <소스 SRC = Elvis.mp3 유형 = 'Codecs = mp3'> <elvis.oga type = 'Audio/Ogg; 정보, 다운로드 링크 제공, 플래시 플레이어 사용 등
비디오는 오디오와 유사합니다. 브라우저는 비디오의 비디오 목록을 지원합니다.
브라우저 | 버전 | 지원 형식 |
인터넷 익스플로러 | 9.0+ | MP4 |
크롬 | 6.0+ | MP4, 웹, OGG |
파이어 폭스 | 3.6+ | 웹, Ogg |
원정 여행 | 5.0+ | MP4 |
오페라 | 10.0+ | 웹, Ogg |
브라우저에서 지원하는 비디오 형식에서 판단하면 Webm과 MP4 형식의 두 가지 형식을 제공하는 것이 가장 좋습니다. 호환 코드는 다음과 같습니다.
<video controls> <소스 src = video.webm type = video/webm> <소스 src = video.mp4 type = video/mp4> <! R = 0 Frameborder = 0 allowllscreen> </iframe> </video>
위는 Xiaobian이 소개 한 HTML5의 브라우저 호환성 버전입니다. VEVB WULIN 웹 사이트를 지원해 주셔서 대단히 감사합니다!