홈페이지>웹 디자인 튜토리얼>HTML 튜토리얼

Modernizr 사용 방법에 대해 알려주십시오

저자：Eve Cole 업데이트 시간：2025-08-23 02:32:01

Modernizr에 대한 이미 많은 중국어 소개가 있습니다. Baidu 또는 Gu Ge를 통해 검색 할 수 있습니다. 또한 Blue Ideal에서 읽을 수 있습니다.이 기사는 비교적 포괄적입니다. HTML5 및 CSS3의 경우 Modernizr-Born;

HTML5 및 CSS3에 대한 기본 환경 판단 및 시맨틱 지원을 제공하는 것 외에도 ModernIZR의 사용은 무엇입니까? 오늘 함께 배우자.

1. Modernizr를 적용하여 시작하십시오

이 부분은 HTML5 및 CSS3에 대해 ModernIzr-Born에서 자세히 설명합니다. HTML5 및 CSS3.

자세한 내용은 공식 웹 사이트 http://modernizr.com/docs/로 직접 이동할 수 있습니다.

2. Modernizr.Load 사용

1. jQuery를로드하십시오

먼저 공식 웹 사이트에서 jQuery를로드하는 방법과 코드를 살펴 보겠습니다.

  1. modernizr.load ([{
  2. 로드 : 'http : //ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js',
  3. 완료 : function () {
  4. if (! window.jquery) {
  5. Modernizr.load ( 'js/libs/jquery-1.7.1.min.js');
  6. }
  7. }
  8. }]);

이 코드는 테스트되었으며 일반적으로 Google에서 제공 한 CDN에 액세스 할 수 없으면 브라우저에 오류가보고되고 메시지는 다음과 같습니다.

  1. gethttp : //ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js404 (NotFound)
  2. Modernizr.Custom.js : 4ResourceInterpretedAsimageButtransfertred MimetyPplication/X-JavaScript : js/libs/jquery-1.7.1.min.js.

피드백 정보에서 로컬 jQuery를 다시로드 할 때 ModernIZR이 구문 분석 한 파일 형식이 잘못되었음을 알 수 있습니다. 이것이 일어날 지 모르겠지만 이것은 사용에 영향을 미칩니다. 모든 중국의 검색 결과 중에서,이 현상에 대한 설명이나 연구는 발견되지 않았으며 개인 능력이 제한되지 않았으므로 깊이 조사하는 것은 불가능했습니다. 방금 stackoverflow에서 임시 솔루션을 얻었습니다. 코드는 다음과 같습니다.

  1. <scriptType = text/javaScript> // <! [cdata [CDATA [
  2. modernizr.load ([{
  3. 로드 : 'http : //ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js',
  4. 완료 : function () {
  5. if (! window.jquery) {
  6. modernizr.load ([{
  7. 로드 : 'js/jquery.min.js',
  8. 콜백 : 함수 (url, result, key) {
  9. //console.log('jqueryonlocalwasloaded! ');
  10. init ();
  11. }
  12. }]);
  13. }또 다른{
  14. //console.log('jqueryongoglewasloaded! ');
  15. init ();
  16. }
  17. }
  18. }]);
  19. functioninit () {
  20. jQuery (document) .ready (function () {
  21. $ ( 'body'). prepend ( 'helloworld!');
  22. });
  23. }
  24. //]]> </script>

2. 낮은 버전에 대한 지원 IE 차단 된 PNG 다이어그램

yepnopejs의 문서 설명에는 IE에 플러그인 사용에 관한 섹션이 있습니다! 접두사.

대부분의 경우 프론트 엔드 인터페이스 호환성을 만들 때 IE의 다른 버전의 세부 사항을 고려해야합니다. 우리는 현재 IE6의 포기를 강조하고 있지만 대부분의 고객은 여전히이 버전을 사용하고 있습니다. 인터페이스의 일관성을 보장하기 위해 일반적으로 다음 형식 코드를 볼 수 있습니다.

  1. <!-[ifltie7]> <htmlclass = ie6> <! [endif]->
  2. <!-[ifie7]> <htmlclass = ie7> <! [endif]->
  3. <!-[ifie8]> <htmlclass = ie8> <! [endif]->
  4. <!-[ifie9]> <htmlclass = ie9> <! [endif]->
  5. <!-[if (gtie9) |! (ie)]> <!-> <!-<! [endif]->

이것은 HTML에서 허용되는 필터링 필터링을위한 조건부 형식 문입니다. 필터링을 통해 다른 버전의 IE에 대한 CSS 해킹을 달성 할 수 있습니다. 콘텐츠 의이 부분은 Paulirish.com에서 읽고 공부할 수 있습니다.

투명한 PNG 다이어그램에 대한 많은 솔루션이 있습니다. 다음은 ModernIZR을 통해 투명한 PNG를 해결하기 위해 JS 코드 세그먼트를 소개하려는 시도입니다. 특정 코드는 다음과 같습니다.

  1. <scriptType = text/javaScript> // <! [cdata [CDATA [
  2. modernizr.load ([[
  3. {
  4. 로드 : 'js/yepnope.ie_prefix.js', // yepnope의 IE! prefix 플러그인을로드합니다
  5. 완료 : function () {
  6. yepnope ([{
  7. 로드 : 'ielt8!
  8. 완료 : function () {
  9. ie_png.fix ( 'img');
  10. }
  11. }]);
  12. }
  13. }
  14. ]);
  15. //]]> </script>

이것은 흥미로운 시도입니다.

3. CSS3 또는 HTML5에 대한 브라우저의 지원을 결정하십시오

이 부분은 Modernizr의 기본 기능입니다. 이러한 기본 기능을 사용하여 CSS3 또는 HTML5의 새로운 기능을 시도 할뿐만 아니라 지원되지 않는 환경에서 친근한 프롬프트를 제공 할 수 있습니다. 다음 코드를 살펴보십시오.

  1. <scriptType = text/javaScript> // <! [cdata [CDATA [
  3. modernizr.load ({
  4. 테스트 : Modernizr.csstransforms3d &#038; & Modernizr.csstransitions, // 현재 클라이언트가 3 차원 변형 및 기울기 전환을 지원하는지 판단합니다.
  5. yep : [ 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' ,'js/jquery.hoverfold.js'], // 지원되는 경우 관련 JS
  6. NOPE : 'CSS/FALLBACK.CSS', // 기타로드 친화적 인 알림에 사용되는 관련 스타일
  7. 콜백 : 함수 (url, result, key) {// 콜백 내용
  9. if (url === 'js/jquery.hoverfold.js') {// 마지막로드 된 JS 파일의 경로가 동일하면 응용 프로그램
  10. $ ( '#grid'). hoverfold ();
  11. }
  13. }
  14. });
  16. //]]> </script>

이 코드는 3D 썸네일 호버 효과의 프레젠테이션 문서의 단락에서 잘라냅니다. 저자가 제작 한 튜토리얼을 분석하고 경험함으로써 우리는 ModernIZR의 사용을 배울뿐만 아니라 CSS3의 강력하고 눈부신 효과를 경험할 수 있습니다.

위의 내용은 여전히 매우 대략적으로 구성되어 있으며, 목적은 Modernizr (Yepnope)의 특성과 사용법을 배우고 이해하는 데 사용하는 것입니다. 동시에, 우리는 또한 CSS3 및 HTML5의 학습과 관심을 향상시켜야합니다.

전체 텍스트가 끝났습니다.

관련 기사