현재 전통적인 브라우저는 완전히 교체되지 않으므로 최신 CSS3 또는 HTML5 기능을 웹 사이트에 포함시키기가 어렵습니다. Modernizr는이 문제를 해결하기 위해 왔습니다. 오픈 소스 JavaScript 라이브러리로서 ModernIZR은 CSS3 또는 HTML5 기능에 대한 브라우저 지원을 감지합니다. ModernIZR은 이전 브라우저에서 지원하지 않는 기능을 추가하려고하지 않지만 옵션 스타일 구성을 만들어 페이지 디자인을 수정할 수 있습니다. 또한 맞춤형 스크립트를로드하여 이전 브라우저에서 지원하지 않는 기능을 시뮬레이션 할 수 있습니다.
Modernizr은 사용하기가 간단하지만 전능하지는 않습니다. Modernizr의 성공적인 사용은 CSS 및 JavaScript 기술에 크게 의존합니다. 이 안내서를 사용하면 다중 열이나 예측을 지원하지 않는 브라우저의 선택 스타일을 설정하는 방법을 배울 수 있습니다. 또한 최신 HTML5 필수 속성을 사용하는 양식을 검증하기 위해 이전 브라우저를 가져 오는 방법과 브라우저의 기능을 기반으로 스크립트 파일을 선택적으로로드하는 방법을 배울 수 있습니다.
Modernizr은 브라우저 기능 지원을 감지하는 데 사용되는 JavaScript 라이브러리입니다. 현재 Browser의 일련의 테스트 처리를 확인함으로써 ModernIZR은 18 개의 CSS3 기능과 HTML5에 대한 40 개 이상의 기능을 감지 할 수 있습니다. 브라우저 이름 (브라우저 스니핑)을 감지하는 것이 기존의 방법보다 신뢰할 수 있습니다. 전체 테스트 세트의 실행 시간에는 몇 마이크로 초만 소요됩니다. 또한 ModernIZR 웹 사이트는 사용자 정의 스크립트를 사용하여 관심있는 요소 만 감지하여 효율성 최적화를 달성합니다.
ModernIZR을 사용하여 CSS3 지원을 감지 할 때 JavaScript 지식이 필요하지 않습니다. 파일을 웹 페이지에만 삽입하면 브라우저의 기능에 따라 페이지의 <html> 태그에 클래스 세트를 추가합니다. 해당 클래스의 이름은 표준화 요구 사항을 충족했으며 이해하기 쉽습니다. 예를 들어, 브라우저가 Box-Shadow 속성을 지원하는 경우 해당 BoxShadow 클래스를 추가해야합니다. 그렇지 않으면 No-BoxShadow 클래스를 추가하십시오. 해당 브라우저에 적절한 스타일을 제공하기 위해이 클래스를 사용하는 스타일 테이블을 만드는 것입니다.
ModernIZR을 사용하면 PolyFills로 알려진 JavaScript 솔루션을 쉽게 구현할 수 있습니다. HTML5 관련 기능 및 지리적 위치와 같은 기술을 시뮬레이션합니다. 그러나 이러한 기능과 기술을 사용하려면 JavaScript를 기본적으로 이해해야합니다. Polyfill 이라는 용어는 균열을 채우는 영국 브랜드의 점토 (즉, 미국인에게 알려진 충전재)에서 나온 것입니다. 여기서 Polyfill은 브라우저 기능을 채우는 데 사용됩니다. 때때로 Modernizr 은이 작업을 완벽하게 수행합니다. 그러나 본질적으로 이것은 단지 패치 작업 일 뿐이므로 취약한 브라우저에서 달성 한 것과 동일한 결과를 생성하기 위해 의존 할 수 없습니다.
다른 JavaScript 라이브러리와 마찬가지로 ModernIZR은 개발 및 생산 버전을 제공합니다. 대부분의 라이브러리와 비교하여 유일한 차이점은 프로덕션 버전에서 공간과 주석이 제거되어 다운로드 크기를 줄이는 것입니다. Modernizr는 다른 접근 방식을 취합니다. 개발 버전은 어떤 의미에서 부엌에서 싱크대라고 할 수 있습니다. 거의 모든 것이 포함되어 있습니다. 프로덕션 버전에는 선택한 요소 만 포함하여 다운로드를 크게 줄일 수 있습니다. 대부분의 경우 프로덕션 버전은 개발 버전의 20대로 줄일 수 있습니다.
ModernIzr로 테스트 할 때 개발 버전을 다운로드하는 것이 좋습니다. 작동 방식 및 기능을 마스터하면 웹 사이트에서 배포를위한 사용자 정의 프로덕션 버전을 다운로드 할 수 있습니다.
이 튜토리얼의 샘플 파일에는 Development 2.0.6 버전의 ModernIzr이 포함되어 있지만 ModernIZR 사이트의 최신 업데이트 버전으로 바꾸는 것이 좋습니다.
참고 : 실수로 기본 탐색 메뉴에서 다운로드 링크를 클릭하면 원하는 도구를 선택하도록 요청하는 많은 수의 확인란이 나타납니다. 이것은 맞춤형 프로덕션 버전으로 설정됩니다. 패널 상단의 개발 버전 링크를 클릭하거나 브라우저의 뒤로 버튼을 클릭하여 홈페이지로 돌아가서 그림 1에 표시된 개발 버튼을 선택하십시오.
앞에서 언급했듯이 ModernIZR은 이전 브라우저에 새로운 기능을 추가하려고 시도하지 않지만 스타일의 누락 된 기능을 보충 할 수 있습니다. 이 작동 방식을 보여주기 위해 예제 파일에는 css_support_begin.html이라는 페이지가 포함되어 있습니다. 이 페이지를 새 브라우저에로드하면 그림 2와 같습니다.
그림 2. Firefox 5는 페이지를 멀티 컬럼 형식으로 표시하고 이미지에 그림자를 추가합니다. 이 페이지의 스타일은 CSS3의 column-count 및 box-shadow 속성을 사용하여 멀티 컬럼 형식의 텍스트를 표시하고 이미지에 그림자를 추가하는 것입니다. 이전 버전의 브라우저는 이러한 속성을 지원하지 않으므로 Internet Explorer (IE) 7의 동일한 페이지는 그림 3과 같습니다.
IE9에서 동일한 페이지에 이미지 섀도우가 표시되지만 텍스트는 그림 3에 표시된 레이아웃과 동일합니다.
누락 된 기능을 보충하려고하는 것은 디자인 개요의 요구 사항에 따라 다릅니다. 모든 브라우저에서 페이지를 정확히 동일하게 보이게하려는 많은 작업이 포함되지만 이미지 주위의 텍스트 주변을 둘러싸고 이미지의 왼쪽 여백을 텍스트에 조정하고 이미지의 하단과 오른쪽 가장자리에 모호한 경계를 추가하여 더 3 차원처럼 느껴질 수 있습니다.
ModernIzr은 JavaScript를 사용하여 브라우저에서 지원하는 기능을 감지하지만 JavaScript를 사용하여 다른 스타일 시트를 동적으로로드하는 대신 매우 간단한 기술을 사용하여 페이지의 <HTML> 태그에 클래스를 추가합니다. 그런 다음 디자이너로서 CSS 케이싱을 사용하여 대상 요소에 적합한 스타일을 제공하기로 결정하는 것은 귀하에게 달려 있습니다. 예를 들어, 페이지가 box-shadow 속성을 지원하면 Modernizr은 boxshadow 클래스를 추가합니다. 지원되지 않으면 no-boxshadow 클래스와 함께 대체물로 추가됩니다.
브라우저는 인식 할 수없는 CSS 속성을 무시하기 때문에 기본 스타일 규칙에 따라 신뢰할 수있는 box-shadow 속성을 사용할 수 있지만 다음 형식의 이전 브라우저에 대해 별도의 후손 선택기를 추가해야합니다.
.no-boxshadow img { /* styles for browsers that don't support box-shadow */ } box-shadow 지원하지 않는 브라우저 만 제공되지 no-boxshadow 다른 브라우저에는이 스타일 규칙을 적용하지 않습니다.
샘플 페이지에 modernizr을 추가하고 <html> 태그에 추가하는 클래스를 확인해 보겠습니다.
<!DOCTYPE HTML> <html> <!DOCTYPE HTML> <html class=no-js>Modernizr는 브라우저에서 활성화 된 JavaScript에 의존합니다. 활성화되면이 클래스는 동적으로 삭제됩니다. 그러나 드문 경우, JavaScript는 활성화되지 않은 경우 HTML Makup에 여전히 존재하므로 필요한 경우 방문자를위한 특별한 스타일 규칙을 만들 수 있습니다.
</style> <script src=js/modernizr.js></script> </head> 참고 : 삽입 패널 또는 삽입 메뉴를 사용하는 경우 DreamWeaver는 초기 <Script> 태그에 type=text/javascript 추가합니다. HTML5에는 더 이상 필요하지 않지만 유지해도 피해를 입지는 않습니다.
참고 : DreamWeaver 버전에 라이브 코드가 없거나 다른 HTML 편집기를 사용하는 경우 대부분의 새로운 브라우저 또는 Firefox 브라우저에서 제공하는 FireBug에서 제공하는 개발 도구를 사용하여 생성 된 코드를 확인할 수 있습니다.
도 4에 도시 된 바와 같이, no-js 클래스는 js 클래스로 대체되었으며, 이는 JavaScript가 활성화되었음을 나타냅니다.
표 1에는 CSS3에 대한 지원을 나타내는 데 ModernIzr이 사용하는 클래스 이름이 나와 있습니다. 함수가 지원하지 않으면 해당 클래스의 이름은 no- 로 접두사됩니다.
표 1. CSS3 기능 Modernizr에 의해 감지 된 기능
CSS 기능 | Modernizr 클래스 (속성) |
@font-face | fontface |
::before pseudo-elements ::after | generatedcontent |
background-size | backgroundsize |
border-image | borderimage |
border-radius | borderradius |
box-shadow | boxshadow |
CSS 애니메이션 | cssanimations |
CSS 2D 변환 | csstransforms |
CSS 3D 변환 | csstransforms3d |
CSS 전환 | csstransitions |
유연한 상자 레이아웃 | flexbox |
그라디언트 | cssgradients |
hsla() | hsla |
다중 열 레이아웃 | csscolumns |
여러 배경 | multiplebgs |
opacity | opacity |
반사 | cssreflections |
rgba() | rgba |
text-shadow | textshadow |
특정 CSS 속성이 테스트되는 곳에 관계없이 클래스 이름과 속성 이름은 동일하지만 하이픈이나 브래킷을 제거해야합니다. 다른 클래스는 그들이 참조하는 CSS3 모듈의 이름을 따서 명명되었습니다.
표 1을 참조하십시오. Modernizr은 boxshadow 및 csscolumns 사용하여 box-shadow 속성 및 다중 열 레이아웃에 대한 지원을 각각 보여줍니다. 따라서 no-boxshadow 및 no-csscolumns 클래스를 사용하여 이러한 기능을 지원하지 않는 브라우저에 대한 특별 스타일 규칙을 만들 수 있습니다.
지침이 간단한 지 확인하기 위해 CSS 선언의 예 만 보여줄 것입니다. 코드보기에 직접 입력하거나 새 CSS 규칙 대화 상자를 사용할 수 있습니다.
.no-boxshadow img 에 대한 새로운 자손 (화합물) 선택기를 만듭니다. #8A8A8A 선택). 결과 스타일 규칙은 다음과 같아야합니다..no-boxshadow img { border-right: #8A8A8A 2px solid; border-bottom: #8A8A8A 2px solid; }이것은 반투명 그림자만큼 매력적이지는 않지만 그럼에도 불구하고 여전히 이미지가 배경에서 약간 돌출 될 수 있습니다.
.no-csscolumns img 에 대한 새로운 자손 선택기를 만듭니다. .no-csscolumns img { margin: 3px 8px 3px 0; float: left; } .columns img 규칙을 따르는 지 확인하십시오. 두 규칙은 동일한 특수성을 가지므로 반전되면 .columns img 의 10 픽셀 왼쪽 여백은 방금 만든 새로운 규칙을 덮어 쓸 수 있습니다. .no-csscolumns img 를 .no-csscolumns .columns img 로 이름을 바꿀 수 있습니다. (그건 그렇고, 당신 이 특수성이 무엇인지 잘 모르겠다면, Adrian Senior의 기사를 확인하고 특이성을 이해하십시오. 그것은 오랫동안 출판되었지만 가치가 있습니다.) 이 간단한 예에서는 no- 와 함께 접두사 만 사용하여 이전 버전의 브라우저에 대한 특수 스타일을 만들었습니다. 그러나 그들의 능력에 따라, 당신이 두 클래스 (접두사가 있거나없는)를 사용하여 브라우저를 위해 다른 스타일을 만드는 것은 전혀 중요하지 않습니다. 예를 들어:
.csscolumns { /* rules for browsers that support multi-column layout */ } .no-csscolumns { /* rules for browsers that don't support multi-column layout */ }예를 들어 각 지원 수준에 대해 완전히 다른 레이아웃을 만들려면이 접근법이 합리적입니다. 그러나 이전 브라우저에 선택 가능한 스타일을 제공하는 문제라면 브라우저가 인식하지 못하는 속성을 무시한다는 것을 잊지 마십시오. 모든 스타일에 modernizr 클래스를 사용하는 경우 페이지가 JavaScript 장애인 브라우저에서 완전히 풀리지 않습니다.
Modernizr은 <html> 태그의 클래스 이름을 추가하여 이중 목적을 재생합니다. 페이지가로드되면 ModernIZR 객체가 작성한 JavaScript 속성의 이름이기도합니다. 표 1에는 CSS와 관련된 클래스 및 속성의 이름이 나와 있습니다. 표 2에는 HTML5 및 지리적 위치와 같은 관련 기술과 관련된 나머지 클래스 및 속성이 나와 있습니다.
표 2. Modernizr에 의해 감지 된 HTML5 관련 기능
HTML5 관련 기능 | Modernizr 클래스 (속성) |
응용 프로그램 캐시 | applicationcache |
오디오 | audio. type (ogg, mp3, wav, m4a) |
캔버스 | canvas |
캔버스 텍스트 | canvastext |
드래그 앤 드롭 | draganddrop |
입력 속성을 양식 | input. attributeName |
입력 요소를 형성합니다 | inputtypes. elementName |
지리 위치 | geolocation |
Hashchange 이벤트 | hashchange |
역사 관리 | history |
indexeddb | indexeddb |
인라인 SVG | inlinesvg |
로컬 스토리지 | localstorage |
메시징 | postmessage |
세션 스토리지 | sessionstorage |
미소 | smil |
SVG | svg |
SVG 클립 경로 | svgclippaths |
터치 이벤트 | touch |
동영상 | video. type (ogg, webm, h264) |
Webgl | webgl |
웹 소켓 | websockets |
웹 SQL 데이터베이스 | websqldatabase |
웹 직원 | webworkers |
대부분의 경우 표 1 및 표 2에 나열된 모든 속성은 true 또는 false 반환합니다. 따라서 다음과 같이 JavaScript를 사용하여 로컬 스토리지를 테스트 할 수 있습니다.
if (Modernizr.localstorage) { // script to run if local storage is supported } else { // script to run if local storage is not supported } 그러나 audio 및 video 측면에서 반환 값은 브라우저가 특정 유형의 신뢰 수준을 처리 할 수 있음을 나타내는 문자열입니다. HTML5 사양에 따르면 빈 문자열은 유형이 지원되지 않음을 의미합니다. 이 유형이 지원되면 반환 값은 아마도 또는 아마도있을 수 있습니다. 예를 들어:
if (Modernizr.video.h264 == ) { // h264 is not supported } HTML5는 autofocus 와 같은 많은 새로운 양식 특성을 추가하여 페이지가 처음로드 될 때 커서를 지정된 필드에 자동으로 배치합니다. 또 다른 유용한 속성이 required 필요한 필드가 비워두면 HTML5 호환 브라우저가 양식을 제출하는 것을 방지합니다 (그림 6 참조).
이것은 훌륭하지만 질문이 남을 것입니다. 이전 버전의 브라우저로 무엇을해야합니까?
한 가지 해결책은 그것들을 무시하고 최종 검사를 위해 서버 측 확인 함수로 맡기는 것입니다. 브라우저가 required 속성을 인식하지 못하는 경우이 상황을 처리하는 다른 사용자 친화적 인 방법은 필요한 필드를 확인하기 위해 작은 스크립트를 만드는 것입니다. 다음 지침은 Modernizr의 도움으로 해당 작업을 수행하는 방법을 보여줍니다.
</style> <script src=js/modernizr.js></script> </head> <script> 블록을 만들고 코드 실행을 용이하게하기 위해 페이지가로드 되 자마자 이벤트 핸들러를 만듭니다.<script src=js/modernizr.js></script> <script> window.onload = function() { // code to execute when page loads }; </script> </head autofocus 및 required 속성을 인식하지 못하는 브라우저에서 모방해야합니다. autofocus 다루는 방법은 간단합니다.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) { inputs[0].focus(); } // if required not supported, emulate it } 이 조건은 Modernizr.input.autofocus 테스트합니다. autofocus 지원되지 않으면 반환 된 값은 false 입니다. 그러나 논리 연산자 (느낌표 마크)가 의미를 되돌릴 수 있으므로 autofocus 지원되지 않으면이 조건의 평가 결과가 true 이며 inputs[0].focus() 커서를 첫 번째 입력 필드에 배치합니다.
required 경우 필요한 필드를 확인하기 위해 코드를 추가하십시오. 이벤트 핸들러의 전체 코드는 다음과 같습니다.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) { 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; } }; } } 새 코드는 양식을 제출할 때 모든 입력 요소를 반복하여 required 속성을 가진 필드를 찾을 수있는 함수를 생성합니다. 필드를 찾으면 값에서 시작 및 끝 공백을 제거하고 결과가 빈 문자열 인 경우 결과를 required 배열에 추가합니다. 모든 필드를 확인한 후 일부 요소가 배열에 포함되면 브라우저에는 누락 된 필드 이름과 관련된 경고를 표시하고 양식이 제출되는 것을 방지합니다.
참고 : Safari 5.1은 required 속성을 지원한다고 잘못보고하므로 필요한 필드를 검증하지 않고 양식을 제출합니다. 이것은 사파리의 결함이지만 Modernizr에는 존재하지 않습니다.
웹 사이트를 배포 할 준비가되면 실제로 필요한 요소 만 포함하는 Modernizr의 사용자 정의 제품 버전을 만드는 것이 좋습니다. 이것은 당신이 선택한 기능에 따라 ModernIZR 라이브러리의 크기를 44KB에서 2KB로 줄일 수 있습니다. 현재 옵션의 범위는 그림 8에 나와 있습니다.
그림 8. Modernizr 다운로드 페이지는 필요한 기능 만 선택할 수 있습니다.옵션은 CSS3, HTML5, MISC (Ellanean) 및 추가 범주로 쉽게 그룹화 할 수 있습니다. 처음 3 개의 제목 옆의 토글 버튼을 클릭하여 선택 카테고리에서 모든 확인란을 선택하거나 버립니다.
기본적으로 추가 카테고리는 다음 세 가지 항목을 선택합니다.
CSS3 카테고리에서 옵션을 선택하면 다음 추가 카테고리의 옵션도 선택됩니다.
Modernizr.testProp() Modernizr.testAllProps() Modernizr._domPrefixes()이 옵션을 선택 해제 하지 마십시오 . 그렇게하면 CSS3 카테고리에서 선택한 옵션이 자동으로 취소됩니다.
추가 카테고리의 MQ PolyFill (Respond.js)은 IE 6-8의 미디어 쿼리가 제한된 지원을받을 수있는 스크립트를 추가했습니다. 이 옵션을 선택하면 미디어 쿼리 및 modernizr.teststyles ()를 자동으로 선택합니다. Media Queries Polyfill (respond.js)에 대한 자세한 내용은 https://github.com/scottjehl/respont를 방문하십시오.
고급 사용자 만 추가 카테고리의 다른 옵션에 관심이 있습니다. 그들이 무엇인지, 사용 방법에 대한 자세한 내용은 Modernizr 문서의 확장 섹션을 참조하십시오.
다음 설명은 샘플 파일에 대해 ModernIzr의 사용자 정의 제품 버전을 만드는 방법에 대해 설명합니다. 이 사용자 정의 버전은 후속 연습에 필요하므로 Modernizr.load() 사용하여 외부 JavaScript 파일을로드하는 방법을 보여줍니다.
Modernizr의 사용자 정의 프로덕션 버전을 만들 때 Modernizr.load() 가 포함 된 옵션은 기본적으로 선택해야합니다. Modernizr.load() 는 yepnope() 의 별칭으로, 현대식과 동기식으로 개발 된 독립형 스크립트 로더입니다. 사용 방법을 설명하기 위해 간단한 예제를 제시합니다. 해당 스크립트를 required.html에서 check_required.js로 옮겼으며 ModernIzr 테스트를 제거하고이를 init 라는 변수에 할당하기 위해 세 가지 사소한 변경을했습니다. 수정 된 스크립트는 다음과 같습니다.
var init = function() { // get the form and its input elements var form = document.forms[0], inputs = form.elements; // put the focus in the first input field inputs[0].focus(); // check required fields when the form is submitted 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.load() 의 큰 장점은 브라우저 기능 테스트 결과를 기반으로 스크립트를 조건부로로드 할 수 있다는 것입니다. 이것이 처음에는 yepnope() 라고 불렀습니다. 외부 스크립트를 비동기로로드 할 수 있습니다. 즉, 브라우저가 문서 개체 모델 (DOM)을로드 한 후 외부 스크립트를로드 할 수 있으므로 웹 사이트 성능을 향상시키는 데 도움이 될 수 있습니다.
Modernizr.load() 의 기본 구문은 다음 속성이있는 객체를 전달하는 것입니다.
test : 감지하려는 Modernizr 속성. yep : 테스트가 성공하면로드하려는 스크립트의 위치. 멀티 스크립트 배열을 사용하십시오. nope : 테스트가 실패하면로드하려는 스크립트의 위치. 멀티 스크립트 배열을 사용하십시오. complete : 외부 스크립트가로드 되 자마자 실행되는 함수 (선택 사항). 당신이 그들 중 하나를 제공하는 한 yep 와 nope 모두 선택 사항입니다.
Check_Required.js에 스크립트를로드하고 실행하려면 ModernIzr.adc.js가 페이지에 첨부 된 후 다음 <script> 블록을 추가해야합니다 (코드는 required_load.html에 있습니다) :
<script> Modernizr.load({ test: Modernizr.input.required, nope: 'js/check_required.js', complete: function() { init(); } }); </script> 이것은 이전과 정확히 동일하지만 이미 required 속성을 지원하는 브라우저의 다운로드로드를 줄일 수 있습니다.
여러 조건을 테스트하려면 객체 세트를 Modernizr.load() 로 전달할 수 있습니다. 자세한 내용은 Modernizr 문서의 Modernizr.load () 자습서를 참조하십시오.
Modernizr은 강력하고 유용한 도구이지만 사용해야한다는 의미는 아닙니다. 브라우저에 여러 스타일을 제공하기 위해 Modernizr을 사용해야하는 모든 경우가 아닙니다. 주요 초점이 Internet Explorer라면 IE 조건부 주석 사용을 고려하십시오. CSS 스택을 사용하여 일부 스타일을 덮어 쓸 수도 있습니다. 예를 들어, 16 진수 색상을 먼저 사용한 다음 rgba() 또는 hsla() 로 무시하십시오. 이전 버전의 브라우저는 첫 번째 값을 사용하고 두 번째 값을 무시합니다.
Modernizr는 폴리 필 및 기타 JavaScript와 결합 될 때 실제로 현실이됩니다. 그러나 일반적으로 기능을 지원하는 데 적합한 고유 한 테스트를 쉽게 만들 수 있습니다. 예를 들어, 다음은 브라우저가 required 속성을 지원하는지 여부를 테스트하는 모든 코드입니다 (코드는 required_nomodernizr.html에 있습니다).
var elem = document.createElement('input'); if (typeof elem.required != 'boolean') { // required is not supported }이 튜토리얼은 Modernizr의 모든 주요 기능을 다루었습니다. 이러한 기능에 대한 자세한 내용은 http://www.modernizr.com/docs/에 위치한 해당 공식 문서를 참조하십시오. 또한 다음과 같은 유용한 리소스를 찾을 수 있습니다.
yepnope() 에 대한 심층적 인 토론을 제공하며, 이는 Modernizr의 Modernizr.load() 로 병합되었습니다. +