HTML5, CSS3 및 캔버스 및 웹 소켓과 같은 관련 기술은 웹 프로그램이 새로운 수준을 향상시키는 데 도움이되는 매우 유용한 기능을 가져 왔습니다. 이 새로운 기술을 사용하면 HTML, CSS 및 JavaScript 만 사용하여 태블릿 및 모바일 장치에서 실행할 수있는 다양한 양식 페이지를 구축 할 수 있습니다. HTML5는 많은 새로운 기능을 제공하지만 이전 버전의 브라우저를 고려하지 않으면 이러한 새로운 기술을 사용하는 것은 현실적이지 않습니다. 브라우저의 이전 버전은 수년 동안 사용되어 왔으며 여전히 이러한 버전의 호환성 문제를 고려해야합니다. 이 기사에서 해결해야 할 문제는 다음과 같습니다. HTML5/CSS3 기술을 사용할 때 HTML5/CSS3 기능을 지원하지 않는 오래된 브라우저의 문제를 더 잘 처리하는 방법.
브라우저가 특정 HTML5/CSS3 기능을 지원하는지 여부를 결정하기 위해 코드를 직접 작성할 수 있지만 코드는 그다지 간단하지 않습니다. 예를 들어 : 브라우저 결제가 캔버스를 지원하는지 결정하기위한 코드를 작성하면 코드가 다음과 유사 할 수 있습니다.
<cript> wind }}; 함수 canvassupported () {var canvas = document.createElement ( 'canvas'); return (canvas.getContext && canvas.getContext ( '2d')); } </스크립트>로컬 스토리지가 지원되는지 여부를 결정하려면 코드가 아래의 코드와 유사 할 수 있지만 Firefox에서 버그를 쉽게 만듭니다.
<cript> wind }}; 함수 localStoragesUpported () {try {return ( 'localStorage'창에서 '로컬 스터리지'& lindow [ 'localStorage']! = null); } catch (e) {} false를 반환합니다. } </스크립트>처음 두 가지 예는 모두 기능을 확인하는 것입니다. HTML5/CSS3 기능이 많으면 판단하기 위해 여러 개의 코드 사본을 작성해야하지만 운 좋게도 이러한 코드는 주문에 의존하지 않습니다. Modernizr을 사용하면 코드가 거의없이 위의 복잡한 기능을 구현할 수 있습니다. Modernizr의 몇 가지 중요한 기능을 살펴 보겠습니다.
Modernizr로 시작하십시오Modernizr을 처음 들었을 때, 나는 그것이 현대화를 의미한다고 생각했고, 오래된 브라우저에 새로운 HTML5/CSS3 기능을 추가 할 수 있습니다. 실제로 ModernIzr 은이 작업을 수행하지 않으며 매우 펑키 한 방법을 사용하여 브라우저가 새로운 기능을 지원하는지 감지하고 추가 스크립트 스크립트를로드하는 데 도움이됩니다. 당신이 웹 개발자라면, 그것은 당신에게 매우 멋진 무기입니다.
Modernizr 공식 사이트 : http://modernizr.com에서는 두 가지 유형의 스크립트 (개발 버전 및 사용자 정의 제작 버전)를 모두 사용할 수 있습니다. 이 웹 사이트는 모든 것을 감지 할 수있는 크고 완전한 버전이 아닌 필요한 탐지 기능 만 생성하는 사용자 정의 주문형 도구를 제공하므로 스크립트를 최소화 할 수 있습니다. 다음 그림은 공식 웹 사이트 생성 도구의 인터페이스입니다. 많은 HTML5/CSS3 및 관련 기술을 선택할 수 있음을 알 수 있습니다.
사용자 정의 스크립트를 다운로드 한 후 일반 JS 파일처럼 참조 한 다음 사용할 수 있습니다.
<스크립트 src = scripts/modernizr.js type = text/javaScript> </script>Modernizr 및 HTML 요소
Modernizr 참조를 추가 한 후 즉시 적용됩니다. 실행할 때는 HTML 요소에 CSS 클래스 이름의 배치를 추가합니다. 이 클래스 이름은 지원을 특징으로하며 현재 브라우저에서 지원하지 않는 기능. 지원되는 기능은 오늘의 기능의 이름을 클래스로 직접 표시합니다 (예 : Canvas, Websockets). 지원되지 않는 기능으로 표시되는 클래스는 비전자 이름입니다 (예 : No-Flexbox). 다음 코드는 크롬에서 실행하는 효과입니다.
<html class = js flexbox canvas canvastext webgl no-touch geolocation geolocation postmessage webSqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize 경계 국경 경계 국경 거두장 텍스트 텍스트 불확실성 cssanimations csscolumns csstransforcs csstransforts cspresss cspresss cspression csstransforms3d csstransitions fontface 생성 비디오 오디오 오디오 로컬 스토어 세션 스터 웹 워크 applicationcache svg inlinesvg smil svgclippaths>
다음 코드는 IE9에서 실행하는 효과입니다.
<html class = js no-flexbox canvas canvas canvas canvastext no-webgl no-touch geolocation post-message no-indexeddb 해시 핸드 드래드 드롭 No-websockets rgba hsla multiplebgs backgrounds bubsication boxhadow no-rebsocket NO-CSSSANIMATIONS NO-CSSCOLUMNS NO-CSSSGRADINS NO-CSSSCLECTIONS CSSTRANSFORMS NO-CSSTRANSFORMS3D NO-CSSTRANSITIONS FONTFACE 생성 비디오 오디오 로컬 스터리지 세션 스터리지 NO-WEBWORKERS NO-APPLICATIONCACHE SVG InLINESVG SMIL SVG CLIPPASS>
Modernizr을 사용하면 다음 코드가 발생할 수 있습니다 (No-JS 이름을 클래스에 추가) :
<html class = no-js>
(http://html5boilerplate.com) 사이트를 방문하여 html5 Boilerplate 관련 콘텐츠 또는 (http://initializr.com)를 보려면 Initializr 관련 컨텐츠를보고 HTML 요소에 No-JS 클래스를 추가 할 수 있습니다. 지원되지 않으면 NO-JS가 표시됩니다. 지원되는 경우 NO-JS가 삭제됩니다. 아주 멋져요?
HTML5/CSS3 기능과 함께 사용하십시오<html> 요소에서 ModernIzr에서 생성 한 클래스 이름을 직접 사용하여 CSS 파일의 해당 속성을 정의하여 현재 브라우저를 지원할 수 있습니다. 예를 들어, 다음 코드는 Shadow Shadow를 지원하는 브라우저에 Shadow를 표시하고 지원하지 않는 브라우저에 표준 테두리를 표시 할 수 있습니다.
.BoxShadow #MyContainer {Border : None; -webkit-box-shadow : #666 1px 1px 1px; -Moz-Box-Shadow : #666 1px 1px 1px;} .no-BoxShadow #MyContainer {Border : 2PX Solid Black;}브라우저가 Box Shadows를 지원하면 Modernizr은 <html> 요소에 BoxShadow 클래스를 추가하고 해당 DIV ID로 관리 할 수 있습니다. 지원되지 않으면 Modernizr은 No-BoxShadow 클래스를 <HTML> 요소에 추가하여 표준 테두리를 보여줍니다. 이러한 방식으로 CSS3 기능을 지원하는 브라우저에서 새로운 CSS3 기능을 쉽게 사용하고 지원하지 않는 브라우저에서 이전 메소드를 계속 사용할 수 있습니다.
해당 클래스를 <html> 요소에 추가하는 것 외에도 Modernizr은 전 세계 ModernIzr JavaScript 객체를 제공하며, 이는 현재 브라우저에서 새로운 기능이 지원되는지 여부를 나타내는 다른 속성을 제공합니다. 예를 들어, 다음 코드를 사용하여 브라우저가 캔버스 및 로컬 스토리지를 지원하는지 여부를 결정할 수 있습니다. 여러 개발자가 다중 버전 브라우저에서 개발 및 테스트하는 것이 매우 유익하며 모든 사람이 코드를 통합 할 수 있습니다.
$ (document) .ready (function () {if (modernizr.canvas) {// 캔버스 코드 추가} if (modernizr.localstorage) {// 로컬 스토리지 코드 추가}});Global ModernIZR 객체는 CSS3 기능이 지원되는지 여부를 감지하는 데 사용될 수도 있습니다. 다음 코드는 Border-Radius 및 CSS 변환이 지원되는지 테스트하는 데 사용됩니다.
$ (document) .ready (function () {if (modernizr.borderradius) {$ ( '#mydiv'). addClass ( 'borderRadiusStyle');} if (modernizr.csstransforms) {$ ( '#mydiv').다른 CSS3 기능은 불투명도, RGBA, 텍스트-쉐이드, CSS 애니메이션, CSS 전환, 여러 배경 등과 같은 결과를 감지 할 수 있습니다. ModernIZR에서 지원하는 전체 HTML5/CSS3 감지 가능 목록은 http://www.modernizr.com/docs에서 다음과 같이 찾을 수 있습니다.
Modernizr로 스크립트 스크립트로드새로운 기능을 지원하지 않는 일부 브라우저에서 ModernIZR은 위의 방법을 제공 할뿐만 아니라 Shim/PolyFill 스크립트를로드하여 지원을 달성 할 수 있도록로드 기능을 제공합니다 (Shim/PolyFill에 대한 정보는 https://github.com/modernizr/modernizr/wiki/html5-crowser-browser-browser)를 방문하십시오. Modernizr은 기능을 결정하기위한 스크립트 로더를 제공하며 지원되지 않으면 해당 스크립트가로드됩니다. 별도의 스크립트는 http://yepnopejs.com에서도 찾을 수 있습니다.
Modernizr의 load () 함수를 사용하여 스크립트를 동적으로로드 할 수 있습니다. 함수의 테스트 속성은 지원되는지 여부를 나타냅니다. 테스트가 성공적으로 지원되면 YEP 속성에 의해 설정된 스크립트가로드됩니다. 지원되지 않으면 NOPE 속성에 의해 설정된 스크립트가로드됩니다. 지원되는지 여부에 관계없이 두 속성에 의해 설정된 스크립트가로드됩니다. 예제 코드는 다음과 같습니다.
Modernizr.load ({test : modernizr.canvas, yep : 'html5canvasavailable.js', nope : 'enccanvas.js', 'mycustomscript.js'});이 예에서 ModernIZR은 현재 브라우저가 캔버스 기능을 지원하는지 여부를 결정합니다. 지원되는 경우 두 스크립트를로드합니다. 지원되지 않으면 enscanvas.js (IE9 이전 버전에 사용) 스크립트 파일을로드하여 브라우저가 캔버스 기능을 지원하고 myCustomScript.js 스크립트를로드합니다.
ModernIZR은 스크립트를로드 할 수 있으므로 다른 용도 (예 : 참조 제 3 자 스크립트) (예 : CDN 서비스를 제공하는 Microsoft와 같은 JQuery 호스팅을 제공하는 Microsoft)가로드되지 않으면 대체 파일을로드 할 수 있습니다. 다음 코드는 Modernizr에서 제공하는 jQuery를로드하는 예입니다.
modernizr.load ([{load : '//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js', complete : function () {if (! wind 로드 및 // 필요한 경우 실행합니다.이 코드는 먼저 Google CDN에서 jQuery 파일을로드합니다. 다운로드 또는로드가 실패하면 전체 기능이 실행됩니다. 먼저 JQEURY 객체가 존재하는지 확인하십시오. 존재하지 않으면 Modernizr은 정의 된 기본 JS 파일을로드합니다. 완전한 파일조차도 성공적으로로드되지 않으면 Needs-jquery.js 파일이로드됩니다.
요약 :최신 HTML5/CSS3을 사용하여 프로그램을 구축하는 경우 ModernIZR은 확실히 필요한 도구입니다. 이를 사용하면 많은 코드 및 테스트 작업을 저장할 수 있으며 새로운 기능을 지원하지 않는 일부 브라우저의 스크립트를로드하여 해당 새로운 기능을 구현할 수도 있습니다.
원본 주소 : http://weblogs.asp.net/dwahlin/archive/2011/11/16/detecting-html5-css3-features-using-modernizr.aspx