Modernizr_html5 튜토리얼 기술을 기반으로 우아한 웹사이트 성능 저하 분석-H5 튜토리얼-php.cn

Modernizr_html5 튜토리얼 기술을 기반으로 우아한 웹사이트 성능 저하 분석

WBOY

풀어 주다： 2016-05-16 15:49:38

원래의

1266명이 탐색했습니다.

요즘에는 일부 HTML5 및 CSS3 기능 효과를 포함하여 웹 페이지에 표시되는 콘텐츠가 점점 더 풍부해지고 있습니다. 따라서 클라이언트의 브라우저가 HTML5를 지원하는 경우. 페이지 액세스는 문제 없이 매우 잘 작동합니다. HTML5가 지원되지 않거나 IE6, 7, 8 및 기타 브라우저인 경우 어떻게 되나요? 이번에는 프런트 엔드 직원에게 호환성 문제로 매우 골치 아픈 경우가 많습니다.

현재 호환됩니다. 이는 사용자가 모든 브라우저에서 최대한 일관되게 보고 사용할 수 있도록 허용하는 것 이상입니다. 하지만 페이지에서는 HTML5 태그와 CSS3 스타일을 사용합니다. 클라이언트 브라우저가 HTML5를 지원하지 않는 경우 어떻게 해야 합니까? 이 문제에 대해서는 가능한 한만 지원해 드릴 수 있습니다. 지원할 수 없다면 친절한 조언과 제안을 부탁드립니다. 사용자가 최신 버전의 브라우저로 업그레이드할 수 있습니다. 따라서 코딩 과정에서 둥근 모서리 효과를 만들고 싶다고 가정해 보겠습니다. CSS3를 사용하면 HTML5가 매우 편리합니다.

<스타일>
            기사
          {
               배경: 연청색;
               여백: 20픽셀;
               패딩: 5px;
                너비: 350px;
               경계 반경: 10px;
               박스 섀도우: 4px 4px 10px rgba(0, 0, 0, 0.5);
           }
            기사 h1 { 글꼴 크기: 12px; }
        스타일 >
<기사>
<헤더><h1>내 제목h1>헤더>
<p >여기가 바로 콘텐츠입니다p>
기사>

효과는 기대했던 것과 같습니다

클라이언트 브라우저가 HTML5를 지원하지 않으면 어떻게 되나요? IE의 F12 도구를 사용해 테스트해보겠습니다

참고: 브라우저 모드와 문서 모드를 모두 선택해야 합니다

HTML5를 지원하지 않는 브라우저에서는 페이지 효과가 매우 잔인합니다

이 문제를 해결해야 합니다. 따라서 HTML15를 지원하지 않는 브라우저에 대해서는 더 많은 작업이 필요합니다. 이러한 둥근 모서리 효과의 호환성을 해결하는 방법은 무엇입니까? HTML5를 지원하지 않는 브라우저에 대한 판단임에 틀림없습니다. HTML5 둥근 모서리가 지원되지 않는 경우 타사 둥근 모서리 js를 사용하여 이를 수행합니다. 문제가 또 나오나요? 둥근 모서리 기능을 어떻게 판단하나요? 이때 그는 또다시 망설였다. HTML5에 대한 더 효율적이고 포괄적이며 간결한 기능 판단 js가 있습니까?

http://modernizr.com/ Modernizr은 HTML5 기능 감지 플러그인입니다.

여전히 상단 둥근 모서리 효과, 약간 수정됨

참고: Pie.js는 타사 둥근 모서리 플러그인입니다

<스크립트 유형="text/javascript" src="스크립트 /modernizr-2.0.6.min.js">스크립트>
        <스타일>
            기사
           {
                배경: 연청색;
               여백: 20px;
               패딩: 5px;
                너비: 350px ;
               경계 반경: 10px;
                상자 -shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
             }
            글 h1 { 글꼴 크기: 12px; }
        스타일>
        <기사>
           <헤더><h1>我的标题h1>헤더>
           <p>我的内容p>
         기사>
    <스크립트>
        Modernizr.load([{
            load: 'Scripts/jquery-1.6.1.min.js',
            완성: 기능 () {
               (! window.jQuery) {
                   Modernizr.load('Scripts/jquery-1.6.1.min.js');
               }
            }
        },
        {
            테스트: Modernizr.borderradius || Modernizr.boxshadow,
아니요: 'Scripts/PIE.js',
            콜백: 함수 () {
$('기사').each(함수 () {
          PIE.attach(이것);
                              🎜>

스크립트>

효과를 살펴보자: HTML5를 지원하는 브라우저

다음으로 HTML5를 지원하지 않는 브라우저인 IE7을 테스트해보겠습니다

따라서 Modernizr을 사용하여 HTML5 페이지의 기능 감지를 수행하는 것이 매우 편리합니다. 하지만 여전히 문제가 있습니까? 풍부한 캔버스 특수 효과를 만든다면 어떻게 호환되게 만들 수 있나요? 이때 처음의 문장으로 돌아가서 기능이 다운그레이드되어 지원할 수 있는 만큼 지원하고 지원하지 못할 경우 친절한 조언을 해준다. 국내 사용자들도 하루빨리 HTML5를 지원하는 브라우저로 업그레이드해 개발자들이 이런 고통을 겪지 않기를 바랍니다.