HTML5 및 CSS3의 빠른 개발로 인해 웹 애플리케이션 개발에 점점 더 많은 의미 론적 태그와 멋진 기능이 적용되었습니다. 주요 브라우저 제조업체는 이러한 새로운 기능을 지원하기 시작했으며 웹 개발자는 이러한 새로운 기능을 시도하여 더 화려하고 흥미로운 응용 프로그램을 개발하는 데 관심이 있습니다. 그러나 이러한 새로운 기능 (특히 두통 유발 IE)의 고르지 않은 지원으로 인한 버전 호환성 문제는 항상 개발자의 마음에 남아있는 악몽입니다. 전통적인 사용 습관으로 인해 오래된 버전의 브라우저를 포기하기가 어렵고 개발자는 지루한 수동 테스트, 테스트 및 테스트 만 선택할 수 있습니다.
이 문제를 해결하기 위해 Modernizr가 시작되었습니다. 그 이름은 현대화와 비슷하게 들리며, 실제로 이름은 개발 경험을보다 현대적으로 만들기위한 목적에서 비롯된 것이지만, 이전 브라우저를 현대화하려는 시도는 아닙니다. 즉, 이러한 새로운 기능을 지원합니다 (실제로 브라우저가 Shim/Polyfill 스크립트를 추가하여 지원하지 않는 특정 새로운 기능을 지원할 수는 있지만 나중에 다루겠습니다).
ModernIZR은 HTML5 및 CSS3 기능에 대한 브라우저의 지원을 감지하는 오픈 소스 JS 라이브러리입니다. 유명한 HTML5/CSS3 브라우저 호환성 웹 사이트 FindMeByip 은이 프레임 워크를 기반으로합니다. 브라우저가 새로운 기능을 지원하는지 여부를 감지하고 다양한 상황에 따라 다른 JS 파일을 동적으로로드하여 다운로드를 줄이고 성능을 향상시키기 위해 스크립트를 추가로로드 할 수 있습니다.
Modernizr은 개발과 생산의 두 가지 버전을 제공합니다. 개발 버전에는 학습 및 테스트에 적합한 모든 새로운 HTML5 및 CSS3 기능의 탐지가 포함됩니다. Modernizr을 방금 사용하기 시작한 초보자의 경우 Bella는이 버전을 사용하는 것이 좋습니다. Modernizr의 작동 원리에 익숙해지면 Custom 버전의 프로덕션을 사용할 수 있습니다. 다운로드 횟수를 크게 줄이기 위해 탐지하는 데 필요한 많은 기능 만 다운로드 할 수 있으며, 이는 프로그램의 성능을 어느 정도 향상시킬 수 있습니다. 이 두 버전을 http://modernizr.com/download/에서 다운로드하거나 페이지의 개발 버전 링크를 클릭하여 개발 버전을 다운로드하거나 다음 기능 표시 페이지를 보았습니다.
테스트하려는 HTML5 또는 CSS3 기능을 확인할 수 있지만 기본적으로 추가 카테고리는 다음과 같이 선택됩니다.
a) HTML5 SHIV v3.6 : 스크립트를 추가합니다. html5 shim IE6-8이 HTML5 요소를 올바르게 설계하고 인쇄하도록 강요합니다. <Header>, <footer>, <av>, <섹션> 등과 같은 새로운 HTML5 시맨틱 태그를 사용하려면이 옵션을 선택해야합니다.
b) Modernizr.load (yepnope.js) : 개발 버전에 포함되지 않은 옵션 스크립트 로더를 추가합니다. 3KB의 다운로드가 증가하므로 필요하지 않으면 선택을 포기할 수 있습니다.
c) CSS 클래스 추가 : 현대식 클래스를 시작 태그에 추가합니다. CSS3 기능에 대한 지원을 감지하려면이 옵션을 선택해야합니다.
Modernizr을 사용하는 방법은 매우 간단합니다. 개발 버전을 다운로드 한 후에는 JS 라이브러리 파일을 다음과 같은 페이지에만 소개하면됩니다.
1 | < script type = text/javascript src = > js/modernizr.js script ></ |
Modernizr 참조를 추가 한 후 JS 프로그램이 실행될 때 HTML 요소에 CSS 클래스 이름의 배치를 추가합니다. 이 클래스 이름은 지원을 특징으로하며 현재 브라우저에서 지원하지 않는 기능. 지원하면 해당 기능 이름이 표시됩니다. 지원하지 않으면 기능없는 이름이 표시됩니다. 예를 들어, 감지 된 브라우저가 CSS3 속성 BoxShadow를 지원하면 ModernIZR은 BoxShadow 클래스를 태그에 추가합니다. 그렇지 않으면 No-BoxShadow 클래스가 추가됩니다. 아래 그림은 Chrome 23.0.1271.64의 새로운 HTML5 및 CSS3 기능에 대한 지원을 보여줍니다.
그런 다음 CSS 스타일 시트에서 해당 스타일 정보를 정의하면 다음과 같이 정의 할 수 있습니다.
1 | .boxshadow #MyContainer { |
2 | border : none ; |
3 | -webkit-box-shadow: #666 1px 1px 1px ; |
4 | -moz-box-shadow: #666 1px 1px 1px ; |
5 | } |
6 | .no-boxshadow #MyContainer { |
7 | border : 2px solid black ; |
8 | } |
브라우저는 지원되지 않는 CSS3 기능을 무시하기 때문에 현재 브라우저 버전이 BoxShadow 속성을 지원하지 않으면 BoxShadow 클래스를 무시하고 대신 No-BoxShadow 클래스에 정의 된 스타일을 참조하여 JS 프로그램에서 브라우저 이름을 감지하는 문제의 논리를 저장합니다.
물론 응용 프로그램 시나리오에서 프로그램에서 새로운 기능이 지원되는지 여부를 결정하고 다른 처리 로직을 제공 해야하는 경우 ModernIZR을 사용하여 판단을 쉽게 만들 수도 있습니다. 현재 Modernizr에서 만든 Modernizr이라는 글로벌 객체를 사용해야합니다. 내용은 감지 된 각 기능에 대해 제공된 부울 결과 목록입니다. 브라우저가 BoxShadow 속성을 지원하는 경우 ModernIzr.BoxShadow의 값은 참입니다. 그렇지 않으면 거짓입니다. 따라서 라이브러리 파일을 소개 한 후이 방법을 사용 하여이 기능에 대한 브라우저의 지원을 감지 할 수도 있습니다. 이 JS 객체에는 특정 기능에 대한 자세한 정보도 포함되어 있습니다. 예를 들어, ModernIzr.video.h264는 브라우저 가이 특수 코덱을 지원하는지 여부를 알려줍니다. modernizr.inputtypes.search는 현재 브라우저가 새 검색 입력 유형을 지원하는지 여부를 알려줍니다.
또한 ModernIZR에 감지 해야하는 기능이 포함되어 있지 않으면 ModernIZR 캡슐화 된 추가 기능을 호출하여 테스트 할 수 있습니다. 다른 HTML5 및 CSS3 기능의 경우 GitHub에서 이미 작성된 추가 기능을 많이 찾을 수 있습니다 (어떤 이유로 든 ModernIzr이 차단되고 프로젝트가 GitHub에서 호스팅됩니다). 간단한 예를 살펴 보겠습니다. 브라우저가 GetUsermedia API (새로운 WebRTC 기술의 API)를 지원하는지 여부를 테스트하려면 다음과 같은 추가 기능을 작성하여 테스트 할 수 있습니다.
1 | Modernizr.addTest( 'getusermedia' , !!Modernizr.prefixed( 'getUserMedia' , navigator)); |
나는 간단한 소개 후에 이미 Modernizr가 개발에 가져올 수있는 편의를 이미 경험했다고 생각합니다. Modernizr의 기능과 ModernIzr 사용 방법을 이해 한 후에는 소스 코드를보고 구현 원칙에 익숙해지면 많은 새로운 지식을 배울 수 있습니다. Bella는 이와 관련하여 신인이지만, 그녀는 여전히 소스 코드를 읽는 것에 대한 경험을 공유하고 있습니다.
Bella는 이전에 Global Object Modernizr를 언급했습니다. Modernizr에서 어떻게 만들어 집니까? 다음 소스 코드를 살펴 보겠습니다.
1 | window.Modernizr = ( function ( window, document, undefined) { |
2 | var ...; |
3 | Modernizr = {}; |
4 | ... |
5 | return Modernizr; |
6 | })( this , this .document); |
이 코드 의이 부분은 비동기 기능을 사용하여 네임 스페이스를 생성하고 (JS에는 실제 네임 스페이스가 없지만) 기능은 Window.MorderNizr에 할당 된 ModernIZR 객체를 리턴하므로 다른 JS 프로그램은 Window.ModerNizr 또는 ModernIZR Objects를 직접 사용할 수 있습니다. 함수가 호출 될 때 전달되는 매개 변수는 함수 실행의 컨텍스트 환경, 즉 창의 글로벌 객체를 나타냅니다.
Modernizr은 CSS3의 새로운 기능에 대한 지원 수준을 어떻게 테스트합니까? Modernizr은 먼저 DOM 객체를 생성 한 다음이 객체의 스타일 속성을 사용하여 새로운 CSS3 기능을 지원하는지 테스트합니다. 코드는 다음과 같습니다.
1 | var mod = 'modernizr' , |
2 | modElem = document.createElement(mod), |
3 | mStyle = modElem.style; |
브라우저의 경우 새로 만든 HTML 태그를 인식 할 수 있는지 여부에 관계없이 스타일을 만들 수 있으므로 새로 만든 태그를 여기에서 스타일로 만들 수 있습니다. 브라우저가 HSLA를 지원하여 CSS의 색상을 정의하는지 여부를 테스트하고 먼저 레이블 아래에 적용되는 HSLA 속성으로 스타일을 작성한 다음 스타일 값에 HSLA 문자열이 포함되어 있는지 확인할 수 있습니다. 브라우저가 지원하지 않으면 HSLA 문자열이 없습니다 (ModernIZR 태그에 적용되는 HSLA 속성으로 스타일을 넣는 동작이 전혀 적용되지 않기 때문에). 다음 코드를 작성할 수 있습니다.
1 | tests[ 'hsla' ] = function () { |
2 | setCss('background-color:hsla(120,40%,100%,.5) '); |
3 | return contains(mStyle.backgroundColor, 'rgba' ) || |
4 | contains(mStyle.backgroundColor, 'hsla' ); |
5 | }; |
여기서 일부 브라우저는 HSLA 표기법을 RGBA로 변환하므로 RGBA 문자열이 있는지 확인합니다.
공급 업체 접두사가있는 CSS 속성의 경우 다른 치료법을 제공해야합니다. BoxShadow 속성으로 돌아가서 Modernizr은 BoxShadow, WebKitboxShadow, MozboxShadow, OboxShadow, MSBoxShadow 또는 KhtmlboxShadow 속성이 있는지 테스트합니다. 그렇다면 브라우저 가이 속성을 지원한다는 것을 의미합니다. 여기서 우리는 주로 두 개의 modernizr 캡슐화 된 함수를 사용합니다. 하나는 testprop ()이고 다른 하나는 testallprops ()입니다. Modernizr.testProp (STR)은 주어진 스타일 속성을 인식 할 수 있는지 여부를 반환하는 반면 ModernIzr.TestAllProps (STR)는 주어진 스타일 속성을 인식 할 수 있는지 또는 공급 업체 접두사가있는 스타일 속성을 인식 할 수 있는지 여부를 반환합니다.
더 많은 소스 코드 지식을 위해 Bella가 향후 더 심도있는 연구를 한 후에도 소개하겠습니다. Bella는 Modernizr의 원칙과 사용에 익숙하다면 개발 효율성을 향상시키는 데 확실히 도움이 될 것이라고 생각합니다.
마지막으로 Bella는 모두가 Modernizr에서 배울 수있는 일부 자료를 간단히 요약합니다.
1. Modernizr 공식 웹 사이트 : http://modernizr.com/docs/ modernizr 지식, 소스 코드를 배우고 modernizr을 다운로드 할 수 있습니다.
2. Modernizr Test Suite URL : http://modernizr.github.com/modernizr/test/index.html 위의 각 브라우저의 HTML5 및 CSS3 기능의 지원 상태를 쿼리 할 수 있습니다. 쿼리 방법 :
이 페이지 하단에있는 Caniuse 및 Modernizr의 Ref 테스트를 클릭 한 다음 테스트 된 HTML5 또는 CSS3 기능의 테이블 링크를 클릭하여 각 브라우저의 지원을 확인하십시오.
3. Shim/Polyfill 스크립트 관련 정보 : https://github.com/modernizr/modernizr/wiki/html5-cross-browser-polyfills
4. 새로운 HTML5 및 CSS3 기능을 감지하는 다양한 추가 기능의 주소 다운로드 :
https://github.com/modernizr/modernizr/tree/master/feature-detects
이 기사는 Tencent Wuhan 블로그에서 나온 것입니다. 재 인쇄시 소스를 표시하십시오