js 라이브러리 Modernizr_Others 소개 및 사용

현재 기존 브라우저는 완전히 대체되지 않으므로 최신 CSS3 또는 HTML5 기능을 웹사이트에 삽입하기가 어렵습니다. Modernizr는 이 문제를 해결하기 위해 탄생했습니다. 오픈 소스 JavaScript 라이브러리인 Modernizr는 브라우저의 CSS3 또는 HTML5 기능 지원을 감지합니다. 이전 브라우저가 지원하지 않는 기능을 추가하는 대신 Modernizr을 사용하면 선택적 스타일 구성을 생성하여 페이지 디자인을 수정할 수 있습니다. 또한 이전 브라우저가 지원하지 않는 기능을 시뮬레이션하기 위해 사용자 정의된 스크립트를 로드할 수도 있습니다.

Modernizr란 무엇인가요?

Modernizr는 방문자 브라우저의 차이(새로운 표준에 대한 지원의 차이를 나타냄)에 따라 다양한 수준의 경험을 개발하는 디자이너의 작업을 더 쉽게 만들어주는 오픈 소스 JS 라이브러리입니다. 이를 통해 디자이너는 및 CSS3를 지원하는 브라우저에서 HTML5 및 CSS3 기능을 최대한 활용할 수 있으며, 지원하지 않는 다른 브라우저의 컨트롤도 사용할 수 있습니다. 이러한 신기술은 희생되지 않습니다.

웹 페이지에 Modernizr 스크립트를 삽입하면 현재 브라우저가 @font-face, border-radius, border-image, box-shadow, rgba() 등과 같은 CSS3 기능을 지원하는지 여부를 감지합니다. , 동시에 오디오, 비디오, 로컬 저장소, 새로운 d5fd7aea971a85678ba271703566ebfd 태그 유형 및 속성과 같은

HTML5 기능을 지원하는지 여부도 확인합니다. 이 정보를 바탕으로 이러한 기능을 지원하는 브라우저에서 이를 사용하여 JS 기반 폴백을 생성할지 아니면 단순히 이를 지원하지 않는 브라우저에 대해 단계적 다운그레이드를 수행할지 결정할 수 있습니다. 또한 Modernizr는 IE가 CSS 스타일을 HTML5 요소에 적용하도록 지원할 수 있으므로 개발자는 보다 의미 있는 태그를 즉시 사용할 수 있습니다.

Modernizr는 간단하고 사용하기 쉽지만 만능은 아닙니다. Modernizr을 성공적으로 사용하는 것은 CSS 및 JavaScript 기술에 크게 좌우됩니다. HTML 5와 CSS 3을 사용할 때 가장 큰 문제는 브라우저 간의 인기나 차이점이 아니라 우선 그러한 차이점이 무엇인지 이해하는 것입니다. 일단 파악한 후에 개발자는 우아한 성능 저하 기술을 사용하여 이러한 제한 사항을 해결할 수 있습니다. 이러한 이유로 많은 개발자가 오픈 소스 프로젝트 Modernizr를 사용합니다.

Modernizr

사용자 에이전트 문자열을 감지하는 대신 일련의 테스트를 사용하여 브라우저의 특성을 확인합니다. 몇 밀리초 안에 40개 이상의 테스트를 수행하고 결과를 Modernizr이라는 개체의 속성으로 기록할 수 있습니다. 개발자는 이 정보를 사용하여 사용하려는 기능이 브라우저에서 지원되는지 여부를 감지하고 그에 따라 처리할 수 있습니다.

Modernizr

버전 2.0 에는 JavaScript 및 CSS용 조건부 리소스 로더가 추가되었습니다. 리소스 로더는 세 가지 매개변수를 허용하며, 그 중 첫 번째 매개변수는 필수 기능을 열거하는 표현식입니다. 두 번째 매개변수는 표현식이 true를 반환하는 경우 로드할 JavaScript 및 CSS 파일 목록입니다. 세 번째 매개변수는 필요한 기능이 없을 경우 대체할 파일 목록입니다. 우아한 성능 저하 외에도 로더를 사용하여

폴리필

을 도입할 수도 있습니다. 아직 pollyfill에 익숙하지 않은 분들을 위해 설명해주세요. Pollyfill은 "이전 브라우저용 표준 API를 에뮬레이트하는 JavaScript 심"입니다. 이 접근 방식이 항상 권장되는 것은 아니지만 pollyfills를 사용하면 대부분의 HTML 5 기능(Modernizr에서 감지)에 대한 지원을 추가할 수 있습니다. 여기서 폴리필은 브라우저 기능의 구멍을 채우는 데 사용됩니다. 때때로 Modernizr는 이 작업을 원활하게 수행합니다. 그러나 본질적으로 이는 패치 작업일 뿐이므로 취약하지 않은 브라우저에서 달성한 것과 정확히 동일한 결과를 생성한다고 신뢰할 수는 없습니다.

성능 향상을 위해 개발자는 Modernizr를 맞춤 설정하여 웹사이트에 필요한 테스트를 수행할 수 있습니다. 이 작업은 감지할 수 있는 기능 목록도 표시하는 Modernizr 다운로드 페이지를 통해 수행할 수 있습니다. Github 웹사이트에는 감지할 수 없는 기능과 가능한 해결 방법도 표시되어 있습니다.

Modernizr는 점진적 향상 이론을 기반으로 개발되었으므로 개발자가 웹 사이트를 계층별로 만들 수 있도록 지원하고 장려합니다. 모든 것은 Javascript가 적용된 빈 베이스에서 시작되며, 향상된 애플리케이션 레이어가 차례로 추가됩니다. Modernizr을 사용하기 때문에 브라우저가 무엇을 지원하는지 쉽게 알 수 있습니다.

Modernizr의 원리

Modernizr는 JavaScript를 사용하여 브라우저에서 지원하는 기능을 감지합니다. 그러나 JavaScript를 사용하여 다양한 스타일시트를 동적으로 로드하는 대신 페이지의 100db36a723c770d327fc0aef2ce13b1 태그에 클래스를 추가하는 매우 간단한 기술을 사용합니다. 그런 다음 CSS 캐스케이딩을 사용하여 대상 요소에 적절한 스타일을 제공하는 것은 디자이너의 몫입니다.

예를 들어 페이지가 box-shadow 속성을 지원하는 경우 Modernizr는 boxshadow 클래스를 추가합니다. 지원되지 않는 경우 대안으로 no-boxshadow 클래스를 사용하여 추가됩니다.

브라우저는 인식하지 못하는 CSS 속성을 무시하므로 기본 스타일 규칙에 따라 box-shadow 속성을 안전하게 사용할 수 있습니다. 그러나 이전 브라우저 선택기의 경우 아래 형식으로 별도의 하위 항목을 추가해야 합니다. ：

.no-boxshadow img { /* box-shadow를 지원하지 않는 브라우저의 스타일 */ }

box-shadow를 지원하지 않는 브라우저에만 no-boxshadow 클래스가 있으므로 다른 브라우저에서는 이 스타일 규칙을 적용하지 않습니다.

다음 표에는 CSS3 지원을 나타내기 위해 Modernizr에서 사용하는 클래스 이름이 나열되어 있습니다. 기능이 지원되지 않는 경우 해당 클래스 이름 앞에 no-가 붙습니다.

CSS 함수	Modernizr 클래스(속성)
@font-face	글꼴
::before 및 ::after 의사 요소	생성된 콘텐츠
배경 크기	배경 크기
테두리 이미지	테두리 이미지
경계 반경	경계 반경
박스 섀도우	박스섀도우
CSS 애니메이션	cssanimation
CSS 2D 변환	css변환
CSS 3D 변환	csstransforms3d
CSS 전환	css전환
유연한 상자 레이아웃	플렉스박스
그라데이션	css그라디언트
hsla()	hsla
다중 열 레이아웃	csscolumns
다양한 배경	여러개의 앨범
불투명도	불투명도
반성	cssreflections
rgba()	rgba
텍스트 그림자	텍스트섀도우

특정 CSS 속성을 어디에서 테스트하든 클래스 이름과 속성 이름은 동일하지만 하이픈이나 괄호를 제거해야 합니다. 다른 클래스는 참조하는 CSS3 모듈의 이름을 따서 명명됩니다.

Modernizr 사용

1. 다운로드

먼저 www.modernizr.com에서 Modernizr의 최신 안정 버전을 다운로드하세요. 페이지의 93f0f5c25f18dab9d176bd4f6de5d30e 영역에 추가하세요.

d92e1a5e6a1fc0fe3e8f3d6f7472aec12cacc6d41bbb37262a98f745aa00fbf0 2. 100db36a723c770d327fc0aef2ce13b1 요소에 "no-js" 클래스를 추가합니다.

fef50554eca1a427827adaa329da8122

4a89a23ee4a3a3490bd7c62ddf28a80d

Modernizr가 실행되면 "no-js" 클래스를 "js"로 변경하여 실행 중임을 알려줍니다. Modernizr는 이 작업을 수행할 뿐만 아니라 검색한 모든 기능에 클래스도 추가합니다. 브라우저가 기능을 지원하지 않는 경우 해당 기능에 해당하는 클래스 이름에 "no-"를 추가합니다.

html 요소에 no-js 클래스를 추가하면 브라우저가 JavaScript를 지원하는지 여부를 알려줍니다. JavaScript를 지원하지 않으면 no-js를 표시합니다.
이때 Dreamweaver의 라이브 코드를 이용하면 아래와 같이 Modernizr가 브라우저 기능을 나타내는 클래스를 대거 추가한 것을 확인할 수 있습니다

그림과 같이 no-js 클래스가 js 클래스로 대체되었으며 이는 JavaScript가 활성화되었음을 나타냅니다.

Dreamweaver 버전에 라이브 코드가 없거나 다른 HTML 편집기를 사용하는 경우 대부분의 최신 브라우저에서 제공하는 개발 도구나 Firefox 브라우저에서 제공하는 Firebug를 사용하여 생성된 코드를 검사할 수 있습니다.

3. 사용 사례 1 - 그림자 그림자를 지원하는 브라우저에서는 그림자를 표시하고, 지원하지 않는 브라우저에서는 표준 테두리를 표시합니다.

코드 복사 코드는 다음과 같습니다.

.boxshadow #MyContainer { 테두리: 없음; -webkit-box-shadow: #666 1px 1px 1px -moz-box-shadow: #666 1px 1px 1px;
} .no-boxshadow #MyContainer { 테두리: 2px 단색 검정;
}

브라우저가 box-shadow를 지원하는 경우 Modernizr는 100db36a723c770d327fc0aef2ce13b1 요소에 boxshadow 클래스를 추가한 다음 해당 div의 ID로 관리할 수 있습니다. 지원되지 않는 경우 Modernizr는 표준 테두리가 표시되도록 100db36a723c770d327fc0aef2ce13b1 요소에 no-boxshadow 클래스를 추가합니다. 이러한 방식으로 CSS3 기능을 지원하는 브라우저에서는 새로운 CSS3 기능을 쉽게 사용할 수 있고, 이를 지원하지 않는 브라우저에서는 이전 방법을 계속 사용할 수 있습니다.

4. 사용 사례 2 - 로컬 저장소 테스트

100db36a723c770d327fc0aef2ce13b1 요소에 해당 클래스를 추가하는 것 외에도 Modernizr은 현재 브라우저에서 특정 새 기능을 지원하는지 여부를 나타내는 다양한 속성을 제공하는 전역 Modernizr JavaScript 개체도 제공합니다. 예를 들어 다음 코드를 사용하여 브라우저가 캔버스 및 로컬 저장소를 지원하는지 여부를 확인할 수 있습니다. 여러 개발자가 여러 버전의 브라우저에서 개발하고 테스트하는 것은 매우 유익합니다.

<script> window.onload = function () { if (localStorageSupported()) {
   alert('local storage supported');
 }
};

　　function localStorageSupported() {
 　　try { 　　return ('localStorage' in window && window['localStorage'] != null);
 　　}catch(e) {}
 　　 return false;
} </script> 

누구나 코드를 통일할 수 있습니다

 $(document).ready(function () { 
 if (Modernizr.canvas) { //Add canvas code } 
 if (Modernizr.localstorage) { 
 //script to run if local storage is 
 } else { 
 // script to run if local storage is not supported
  
 }
});

글로벌 Modernizr 객체를 사용하여 CSS3 기능이 지원되는지 여부를 감지할 수도 있습니다. 다음 코드는 border-radius 및 CSS 변환이 지원되는지 테스트하는 데 사용됩니다.

$(document).ready(function () { if (Modernizr.borderradius) {
  $('#MyDiv').addClass('borderRadiusStyle');
 } if (Modernizr.csstransforms) {
  $('#MyDiv').addClass('transformsStyle');
 }
}); 

오디오 및 비디오의 경우 반환 값은 브라우저가 특정 유형을 처리할 수 있는 신뢰 수준을 나타내는 문자열입니다. HTML5 사양에 따르면 빈 문자열은 해당 유형이 지원되지 않음을 나타냅니다. 유형이 지원되는 경우 반환 값은 "아마도" 또는 "아마도"입니다. 예:

if (Modernizr.video.h264 == "") { 
// h264 is not supported
}

4. 사용 사례 3 - Modernizr을 사용하여 HTML5 필수 양식 필드 확인

HTML5에는 페이지가 처음 로드될 때 자동으로 지정된 필드에 커서를 배치하는 자동 초점과 같은 새로운 양식 속성이 많이 추가되었습니다. 필수 필드가 비어 있는 경우 HTML5 호환 브라우저가 양식을 제출하지 못하게 하는 또 다른 유용한 속성이 필요합니다.

그림 1. 스크립트가 새 속성을 지원하지 않는 브라우저에서 필수 필드를 감지합니다

그림 2. 스크립트가 새 속성을 지원하지 않는 브라우저에서 필수 필드를 감지합니다

양식을 제출하기 전에 HTML5 호환 브라우저에서 필수 필드가 채워졌는지 확인합니다

window.onload = function() { // get the form and its input elements 　　var form = document.forms[0], inputs = form.elements; // if no autofocus, put the focus in the first field 　　if (!Modernizr.input.autofocus) { //因如果不支持 autofocus，那么该条件的求值结果为 true，并且 inputs[0].focus() 将光标放在第一个输入字段 　　　　 inputs[0].focus(); }
　　　　// if required not supported, emulate it 　　　　 if (!Modernizr.input.required) { 
　　　　　　form.onsubmit = function() { 
　　　　　　　　var required = [], att, val;
　　　　　　　　// loop through input elements looking for required 　　　　　　　　for (var i = 0; i < inputs.length; i++) {
　　　　　　　　　　 att = inputs[i].getAttribute('required'); 　　　　　　　　　　// if required, get the value and trim whitespace 　　　　　　　　　　　　if (att != null) { 
　　　　　　　　　　　　　　val = inputs[i].value; // if the value is empty, add to required array 　　　　　　　　　　　　　　　　if (val.replace(/^\s+|\s+$/g, '') == '') { 
　　　　　　　　　　　　　　　　　　required.push(inputs[i].name);
　　　　　　　　　　　　　　　　} 
　　　　　　　　　　　　}
　　　　　　　　 } // show alert if required array contains any elements 　　　　if (required.length > 0) { 
　　　　　　alert('The following fields are required: ' + required.join(', ')); 
　　　　　　// prevent the form from being submitted 　　　　　　return false; 
　　　　} 
　　};
　} 
}

코드는 필수 속성이 있는 필드를 찾기 위해 양식이 제출될 때 모든 입력 요소를 반복하는 함수를 생성합니다. 필드를 찾으면 값에서 선행 및 후행 공백을 제거하고 결과가 빈 문자열인 경우 결과를 필수 배열에 추가합니다. 모든 필드를 확인한 후 배열에 특정 요소가 포함되어 있으면 브라우저에 필드 이름 누락에 대한 경고가 표시되고 양식이 제출되지 않습니다.

맞춤 버전 만들기

웹사이트를 배포할 준비가 되면 실제로 필요한 요소만 포함된 Modernizr의 맞춤형 프로덕션 버전을 만드는 것이 좋습니다. 이렇게 하면 선택한 기능에 따라 Modernizr 라이브러리의 크기가 44KB에서 2KB로 줄어듭니다. 현재 옵션 범위가 그림에 표시되어 있습니다.

예:

1. http://www.modernizr.com/download/를 클릭하면 위에 표시된 인터페이스가 열립니다.
2. CSS3 카테고리에서 box-shadow와 CSS 열을 선택하세요.
3. HTML5 카테고리에서 입력 속성을 선택하세요.
4. 추가 카테고리에서 HTML5 Shim/IEPP를 선택 취소하세요.
5. Extra 카테고리에서 다음 옵션이 선택되어 있는지 확인하세요(자동으로 선택되어야 함).
   • Modernizr.load(yepnope.js)
   • CSS 클래스 추가
   • Modernizr.testProp()
   • Modernizr.testAllProps()
   • Modernizr._domPrefixes

6. 생성 버튼을 클릭하세요.
7. 사용자 정의 스크립트가 준비되면(보통 1~2초 이내) 생성 버튼 옆에 다운로드 버튼이 나타납니다. 다운로드 버튼을 클릭하고 샘플사이트의 js 폴더에 파일을 저장합니다. 다운로드 페이지에서는 프로덕션 스크립트에 modernizr.custom.79475.js와 같은 파일 이름을 지정하지만 더 의미 있는 이름을 지정할 수도 있습니다. 샘플 파일에서는 modernizr.adc.js라는 이름을 사용했습니다.
8. css_support.html 및 필수.html의 modernizr.js에 대한 링크를 사용자 정의 프로덕션 스크립트에 대한 링크로 바꿉니다. 프로덕션 스크립트는 개발 버전의 44KB가 아닌 5KB에 불과합니다.
9. css_support.html에서 Live Code를 클릭하세요(또는 브라우저의 개발 도구를 사용하세요). 이제 아래와 같이 여는 100db36a723c770d327fc0aef2ce13b1 태그에는 세 개의 클래스만 있습니다.

참고:

• http://www.mhtml5.com/2011/03/676.html
• http://www.adobe.com/cn/devnet/dreamweaver/articles/using-modernizr.html
• http://zh.wikipedia.org/wiki/Modernizr
• http://modernizr.com/docs/