Back to site

Што такое Modernizr?

Modernizr ёсць невялікая бібліятэка JavaScript, які вызначае наяўнасць роднага рэалізацыі для наступнага пакалення вэб-тэхналогій, гэта значыць функцыі, якія выцякаюць з HTML5 і CSS3 спецыфікацыі. Многія з гэтых функцый ужо рэалізаваныя, па меншай меры, адзін галоўны браўзэр (большасць з іх у двух або больш), і тое, што Modernizr робіць, вельмі проста, кажу вам, ці з'яўляецца бягучы браўзэр падтрымлівае такую ??магчымасць першапачаткова рэалізаваная ці не.

У адрозненне ад традыцыйнага, але вельмі ненадзейна-метад робіць " UA нюхаюць ", якая з'яўляецца выяўленне браўзэра, яго (наладжваецца карыстальнікам) navigator.userAgent уласнасці, Modernizr робіць фактычнага выяўлення асаблівасць надзейна адрозніваць, што розныя браўзэры могуць і чаго не можа. У рэшце рэшт, той жа рухавічок, магчыма, не абавязкова падтрымліваюць тыя ж самыя рэчы, а некаторыя карыстачы мяняюць свае UserAgent радок, каб абыйсці слаба развіты сайты, якія не дазваляюць ім праз іншае.

Modernizr мэтай пакласці канец UA нюхаюць практыцы. Выкарыстанне функцыі выяўлення з'яўляецца больш надзейнай механіка, каб усталяваць, што вы можаце і не можаце зрабіць у бягучым браўзэры, і Modernizr робіць яго зручным для Вас у розных формах:

  1. Ён правярае больш за 40 наступнага пакалення, усё на працягу некалькіх мілісекунд
  2. Ён стварае аб'ект JavaScript (названы Modernizr ), які змяшчае вынікі гэтых тэстаў, як лагічнае ўласцівасці
  3. Ён дадае класы для HTML элемент, які дакладна патлумачыць, якія функцыі і ня падтрымліваюцца
  4. Яна забяспечвае сцэнар загрузнік такім чынам Вы можаце цягнуць у polyfills для засыпання функцыянальнасць ў старых браўзэрах

Валодаючы гэтымі ведамі, што дае Modernizr вас, вы можаце скарыстацца перавагамі гэтых новых функцый у браўзэры, якія могуць аказаць або выкарыстаць іх, і ўсё яшчэ мець лёгкі і надзейны сродак кантролю сітуацыі для браўзэраў, якія не могуць.

Усталёўка Modernizr

Зойдзем на Загрузка старонкі і выберыце, якія функцыі вы збіраецеся выкарыстоўваць у сваім праекце. Такім чынам, мы можам даць тонкі кавалачкі кода, якія вам спатрэбяцца. Ціснем генераваць і ў вас ёсць уласныя зборкі Modernizr. Калі вы яшчэ не ведаем, якія функцыі вы будзеце выкарыстоўваць, атрымаць развіццю версія, якая змяшчае іх усё, але не сціснуты.

Пакіньце тэгі сцэнара ў <head> вашага HTML. Для лепшай прадукцыйнасці, вы павінны мець іх прытрымлівацца пасля вашага стылю спасылак. Таму мы рэкамендуем размяшчаць Modernizr ў галаву два разы: HTML5 Шив (што дазваляе HTML5 элементаў у IE) павінны выканаць, перш чым <body>, і калі вы выкарыстоўваеце якой-небудзь з класаў CSS, якія Modernizr дадае, вы захочаце, каб прадухіліць FOUC.

Polyfills і Modernizr

Назва "Modernizr" можа кінуць вас на секунду, мы будзем прызнаць. Бібліятэка дазваляе вам выкарыстаць новую HTML5 секционирования элементаў у IE, але акрамя гэтага, яна не мадэрнізаваць любыя іншыя магчымасці. Назва Modernizr на самай справе адбываецца ад мэты мадэрнізацыі нашага развіцця практыкі (і сябе). Тым не менш! Modernizr яшчэ пары вельмі добра з дапамогай скрыптоў, якія забяспечваюць падтрымку, калі убудаваная падтрымка браўзэра адсутнічае. Увогуле, гэтыя сцэнары называюцца polyfills.

Polyfill (п) : пракладка JavaScript, які паўтарае стандартны API для старых браўзэраў

Так WebSocket Polyfill створыць window.WebSocket глабальных з тымі ж ўласцівасцямі і метадамі на яе, як родную рэалізацыі. Гэта азначае, што вы можаце развіць у будучыні, з рэальным API, і толькі загрузіць вашыя polyfills сумяшчальнасць браўзэраў, якія не падтрымліваюць, што API або функцыі.

І добрая навіна для вас, ёсць Polyfill практычна для любой HTML5 асаблівасць, якая вызначае Modernizr. Так. Таму ў большасці выпадкаў, вы можаце выкарыстоўваць HTML5 і CSS3 функцыю і быць у стане паўтарыць яго, не звязаных з падтрымкай браўзэраў. Так, вы можаце не толькі выкарыстоўваць HTML5 сёння, але вы можаце выкарыстоўваць яго ў мінулым, таксама!

Але гэта прыводзіць да вялікай, тоўсты папярэджанне: проста таму, што вы можаце выкарыстоўваць Polyfill не азначае, што вы павінны. Вы хочаце, каб даставіць найлепшыя ўражанні, а значыць, павінна быць хуткім! Загрузка пять скрыпты сумяшчальнасці для IE7, так гэта выглядае і працуе сапраўды такі жа, як Chrome і Опера ня правільны выбар. Ёсць няма жорсткіх правілаў, але майце на ўвазе, як даданне некалькі сцэнараў на старонцы могуць паўплываць на працу карыстачоў. І памятайце, што ні адзін з вашых карыстальнікаў праглядаць ваш сайт у больш чым адным браўзэры; Нічога страшнага, калі ён выглядае і паводзіць сябе па-рознаму.

Цяпер больш падрабязна пра тое, як эфектыўна выкарыстоўваць і абслугоўваць polyfills для ўсіх вашых розных карыстачоў, то чытайце далей...

Modernizr.load () падручнік

Modernizr.load гэта рэсурс пагрузчыка (CSS і JavaScript), які быў зроблены адмыслова, каб працаваць бок аб бок з Modernizr. Ён неабавязковы, пры зборцы, але калі вы загружаеце polyfills, Там добры шанец гэта можа выратаваць вам паласу прапускання і павысіць прадукцыйнасць трохі.

Modernizr.load сінтаксіс, як правіла, вельмі лёгка зразумець, таму мы пачнём з простай прыклад:

Modernizr.load ({тэст: Modernizr.geolocation, так-так: "geo.js, Неа:" гео-polyfill.js '});

У гэтым прыкладзе, мы вырашылі, што мы павінны загружаць розныя сцэнары у залежнасці ад таго геолокации падтрымліваецца ў прымаючага браўзэр ці не. Робячы гэта, вы эканоміце карыстачоў ад неабходнасці загружаць код, што іх браўзэр не трэба. Гэта павялічвае прадукцыйнасць старонкі, і прапануе ясна месца, каб пабудаваць здаровае колькасць абстракцый да polyfills (абодва "geo.js» і «гео-polyfill.js 'бы тое ж самае з астатнімі прыкладанне, нават калі яны паўторна рэалізуецца па-рознаму).

Там добры шанец, што вы не вельмі незадаволеныя вашай хуткасці загрузкі сцэнарыя зараз, але вы будзеце рады даведацца, што Modernizr.load не запавольвае ўсё ўніз, і можа часам прапануюць невялікі прырост у прадукцыйнасці шляхам загрузкі скрыптоў асінхронна і паралельна. Там вельмі шмат зменных, якія важаць у гэтай галіне, таму мы прапануем вам паспрабаваць некалькі рэчаў, каб пераканацца, што вы атрымліваеце максімальную прадукцыйнасць для вашай канкрэтнай сітуацыі.

Modernizr.load малая і простая, але яна можа зрабіць нямала цяжкіх працу за вас. Вось некалькі больш складаны прыклад выкарыстання Modernizr.load калі вашы скрыпты абапірацца на больш чым адну функцыю Modernizr-тэст. Добрая тэхніка, каб абгарнуць некалькі сцэнарыяў Polyfill у тып сінгл "oldbrowser" сцэнар, такім чынам вы не да канца загружаецца занадта шмат скрыптоў адначасова. Вось як гэта можа працаваць:

/ / Дайце Modernizr.load радок, аб'ект або масіў радкоў і аб'ектаў 
Modernizr.load ([
   / / прэзентацыйны polyfills 
  {
     / / Лагічны спіс рэчаў, якія мы, як правіла, неабходна 
    выпрабаванне: Modernizr.fontface & & & & Modernizr.canvas Modernizr. cssgradients,
     / / Modernizr.load нагрузкі CSS і JavaScript па змаўчанні 
    Неа: ['прэзентацыйных-polyfill.js', 'presentational.css']},
   / / Функцыянальныя polyfills 
  {
     / / Гэта проста павінна быць truthy 
    тэст: Modernizr. WebSockets & & window.JSON,
     / / сокета-io.js і json2.js 
    Неа: "Функцыянальна-polyfills.js ',
     / / Вы таксама можаце даць масівы рэсурсаў для загрузкі. 
    як: ['app.js »,« экстра.] JS ', поўны: функцыя () {
       / / Выканаць гэта пасля ўсяго, у гэтай групе запампаваў / / і пакараны, а таксама ўсё, што ва ўсіх папярэдніх груп 
      myApp.init ();}}
   / / Выканаць вашу аналітыку пасля 'ве ўжо стартавала ўсё астатняе / / вашага прыкладання. 
  "пост-analytics.js ']);

Там вельмі шмат што можна рабіць з Modernizr.load. Ён быў выпушчаны ў якасці аўтаномнага yepnope.js але гэта было зроблена адмыслова з Modernizr і функцыянальныя выпрабаванні ў розуме. Вы можаце праверыць поўную дакументацыю да Modernizr.load на yepnopejs.com.

Адзін прахалодны асаблівасць Modernizr.load з'яўляецца яго поўная развязка нагрузкі і выкананне сцэнараў. Гэта не азначала б так шмат для вас, але карыстальнікі шаблонны HTML5 могуць быць знаёмыя з копіяй Google CDN з JQuery запаснога варыянту. Гэта выглядае прыкладна так:

 

Ён працуе, спрабуе загрузіць у сцэнар, а затым адразу ж пасля, тэставанне, каб пераканацца, JQuery аб'ект даступны. Калі гэта не так, то яны загружаюць лакальную копію JQuery ў якасці запаснога варыянту. Як правіла, гэта не так проста ў скрыпт-пагрузчыкі, але Modernizr.load мае ўсе вашыя патрабаванні. Вы можаце проста выкарыстоўваць тую ж логіку, і Modernizr.load будзе апрацоўваць парадку выканання для Вас:

Modernizr.load ([{нагрузкі: '/ / ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js ", у камплекце: функцыя () {калі (window.jQuery) {Modernizr.load (! "js/libs/jquery-1.6.1.min.js');}}}, {
     / / Гэта будзе чакаць вяртанне да нагрузкі і / / выканаць, калі гэта неабходна. 
    нагрузкі: 'патрэбаў jquery.js' }]);

Маленькая заўвага, хоць: толькі выкарыстоўваць гэтую тэхніку ў якасці метаду для fallbacks, таму што гэта можа пашкодзіць прадукцыйнасці, змушаючы скрыпты для загрузкі ў серыйных, а не паралельна.

Modernizr.load з'яўляецца пашыраецца, а таксама. Вы можаце загружаць свае ўласныя прэфіксы і фільтры для вашых сцэнараў. Для больш прасунутых інфармацыю аб тым, што вы можаце праверыць дакументы на хатнюю старонку yepnopejs.com. Вы можаце нават пайсці так далёка, каб замяніць усе крокі працэсу загрузкі і замяніць іх логіку. Так што пачніце выкарыстоўваць яго і захаванне тых каштоўных, каштоўных байт.

Як Modernizr работ

Для многіх тэстаў, Modernizr робіць сваё "чараўніцтва", стварыўшы элемент, усталёўваючы канкрэтныя інструкцыі стылі на гэты элемент і затым адразу ж здабываць іх. Браўзэры, якія разумеюць інструкцыю верне нешта асэнсаванае, браўзэры, якія не разумеюць, ён верне нічога ці "нявызначаным".

Шматлікія выпрабаванні ў дакументацыі прыходзяць з невялікай ўзор кода толькі для ілюстрацыі таго, як вы маглі бы выкарыстаць гэта пэўны тэст у працоўны працэс вэб-распрацоўкі. Фактычныя выпадкі выкарыстання ўваходзяць ў многія больш варыянтаў, усё ж. Магчымасці прымянення Modernizr абмежаваныя толькі вашым уяўленнем.

Калі вы сапраўды зацікаўлены ў падрабязнасці таго, як Modernizr работ, паглядзіце на анатаванай зыходнага кода, а капацца ў праекце па GitHub.

HTML 5 элементаў у IE

Modernizr праходзіць праз невялікі цыкл у JavaScript для таго, каб розныя элементы HTML5 (а таксама схаваў ) для кладкі ў Internet Explorer. Адзначым, што гэта не азначае, што раптам робіць IE падтрымку аўдыё ці відэа элемент, гэта проста азначае, што вы можаце выкарыстоўваць профіль замест спраў і стыль іх у CSS. Вы таксама, верагодна, захочаце ўсталяваць многія з гэтых элементаў на дысплей: блок, гл шаблонны HTML5 CSS для прыкладу. Па стане на Modernizr 1.5, гэты скрыпт ідэнтычны таму, што выкарыстоўваецца ў папулярнай бібліятэцы html5shim/html5shiv. Абодва таксама дасць магчымасць друкаванымі з HTML5 элементаў у IE6-8, хоць вы, магчыма, захочаце паспрабаваць прадукцыйнасці, калі ў вас ёсць больш 100kb з CSS.

Падтрымліваюцца браўзэры

Мы падтрымліваем IE6 +, Firefox 3.5 +, Opera 9.6 +, Safari 2 +, Chrome. На мабільных, мы падтрымліваем IOS мабільнага Safari, WebKit Android, браўзэр Opera Mobile, Firefox Mobile, і хоць мы ўсё яшчэ робім больш выпрабаванняў мы лічым, што падтрымка Blackberry 6 +.

Асаблівасці выяўленыя Modernizr

CSS функцыі

Асаблівасць Modernizr JS ўласцівасць аб'екта / CSS імя-класа
@ Шрыфт асобеfontface
фоне памеруbackgroundsize
межы малюнкаborderimage
мяжа радыусуborderradius
скрынка-ценьboxshadow
Гнуткая мадэль Boxflexbox

Гнуткая мадэль акна (ён жа flexbox) прапануе розныя шляхі для пазіцыянавання элементаў, якія разглядаюцца некаторыя недахопы флоат-макетаў.

/ * Імітацыя цені вокны з дапамогай межаў: * / 
. скрынка {мяжы ўніз: 1px цвёрдых # 666; мяжы правы: 1px цвёрдых # 777;} boxshadow div.box {мяжы:. няма;-WebKit-поле-цень: # 666 1px 1px 1px;-МОЗ-поле-цень: # 666 1px 1px 1px; скрынкі цень: # 666 1px 1px 1px;}
HSLA ()HSLA

У большасці выпадкаў вам не трэба выкарыстоўваць RGBA і HSLA класаў, як браўзэры могуць зрабіць рэзервовую натуральным чынам:

. My_container {   / * няма. RGBA выкарыстання неабходна! * / 
   фонавага колеру: # CCC; фонавага колеру: RGBA (255255255, 0,5);}
Некалькі фонавымmultiplebgs
непразрыстасцьнепразрыстасць
RGBA ()RGBA
Тэкст-ценьtextshadow

Firefox 3.0 ілжывых спрацоўванняў гэты тэст, але няма ніякага вядомага выправіць гэта. Усе ІП, у тым ліку IE9, не падтрымліваюць-цень і тым самым не ў стане даставіць задавальненне.

. Glowy { / * прывіды літары * / 
    колер: празрысты; тэкст-цень: 0 0 10px чорны;}. не-textshadow {колер: чорны;}
CSS-анімацыіcssanimations
CSS Стоўбцыcsscolumns
CSS градыентыcssgradients

Як ёсць памылка WebKit, які выклікае непатрэбныя загрузкі фонавага малюнка актывы, ёсць лепшы спосаб combo'ing фонавага малюнка з CSS градыенты, так што кожны атрымлівае права вопыту без дадатковых накладных расходаў HTTP:

... Не-JS глянцавай, не-cssgradients глянцавых {фон: URL ("малюнка / glossybutton.png ");}.. Cssgradients глянцавых {фонавага малюнка:. Лінейнага градыенту (зверху, # 555, # 333); }
CSS Разважанніcssreflections
CSS 2D пераўтварэнніcsstransforms
CSS 3D Пераўтварэнніcsstransforms3d
CSS Пераходыcsstransitions

Пераходы як правіла, могуць быць выкарыстаны без выкарыстання Modernizr спецыфічным CSS клас або JavaScript ўласнасць, але для тых выпадкаў, вы хочаце часткі вашага сайта, каб глядзець і / або паводзіць сябе інакш, яны даступныя. Добрым прыкладам выкарыстання прыкладу з'яўляецца пабудова Modernizr ў анімацыі рухавік, які выкарыстоўвае ўласныя пераходы CSS у браўзэрах, якія маюць іх, і належыць на JavaScript для анімацыі ў браўзэрах, якія гэтага не робяць.

Ізатопнага выкарыстоўвае Modernizr функцыя выяўлення выкарыстоўваць пераходы, а таксама пераўтварэнні для дасягнення поўнага апаратнага паскарэння калі гэта магчыма, падаючы назад на JQuery анімацыі на аснове інакш.

HTML5 функцыі

Асаблівасць Modernizr JS ўласцівасць аб'екта / CSS імя-класа
applicationCacheapplicationcache
Палатнопалатно

Калі Modernizr.canvas тэсты ілжывым, вы можаце загрузіць FlashCanvas або excanvas.

Палатно Тэкстcanvastext
ПерацягванняDragandDrop
hashchange падзеіhashchange
Гісторыя Кіраўніцтвагісторыя
HTML5 аўдыёаўдыё

Калі падтрымка аўдыё выяўленні Modernizr ацэньвае, якія фарматы бягучага браўзэра будзе гуляць. У цяперашні час Modernizr тэсты OGG, mp3, WAV і m4a.

Важна: значэння гэтых уласцівасцяў не з'яўляюцца праўдзівымі лагічныя. Замест гэтага, Modernizr матчаў HTML5 спецыфікацыі ў вяртанні радок, якая прадстаўляе ўзроўні браўзэра ўпэўненасці, што ён можа справіцца з гэтым кодэкам. Гэтыя вяртаюцца значэння пустую радок (адмоўны адказ), "можа быць" і "верагодна". Пустая радок falsy, іншымі словамі: Modernizr.audio.ogg =='' і ''== ілжывыя

уаг аўдыё = новы аўдыё (); audio.src = Modernizr.audio.ogg? "Background.ogg ': Modernizr.audio.mp3? "Background.mp3 ':' background.m4a; audio.play ();
HTML5 відэавідэа

Глядзіце відэа для Усіх па Крок Камен для JavaScript-менш спосаб выкарыстання HTML5 відэа з вытанчанымі fallbacks для ўсіх браўзэраў. З Modernizr гэта відэа выяўлення, вы можаце выкарыстоўваць CSS і JavaScript стыль для далейшага павышэння знешні выгляд і / або інтэрактыўнасці, калі браўзэр падтрымлівае відэа.

Калі падтрымка відэа выяўленні Modernizr ацэньвае, якія фарматы бягучага браўзэра будзе гуляць. У цяперашні час Modernizr тэсты OGG, WebM і h264.

Акрамя таго, прачытайце важная заўвага аб аўдыё-фарматаў, як жа вяртаюць значэння ставяцца да відэа.

IndexedDBindexeddb
Уваходны Атрыбуты

HTML5 ўводзіць шмат новых атрыбутаў для элементаў ўводу. Modernizr тэсты для іх: аўтазапаўнення, аўтафокус, спіс, запаўняльніка, не больш, мін, некалькі, ўзор, неабходны крок.

Гэтыя новыя атрыбуты могуць рабіць такія рэчы, як: ўключэнне роднай аўтазапаўнення, мімічныя elem.focus () у загрузцы старонкі, рабіць палі формы, намякаючы, і рабіць праверку на баку кліента.

Прагляд атрыбутаў HTML5 падтрымкай ўводу старонку з Майкам Тэйларам, каб убачыць іх у дзеянні.

Тыпы ўваходных дадзеных

HTML5 ўяўляе тринадцать новых значэнняў для <input> тып атрыбуту 'ов. Яны заключаюцца ў наступным: пошук, тэлефон, адрас, электронная пошта, даты і часу, даты, месяца, тыдні, часу, даты і часу-мясцовыя, колькасць, асартымент, колер.

Гэтыя тыпы могуць дазволіць роднай datepickers, colorpickers, URL праверкі, і гэтак далей. Калі браўзэр не падтрымлівае дадзены тып, то яна будзе аказана ў выглядзе тэкставага поля. Modernizr не можа вызначыць, што дата стварэння уваходаў DatePicker, колер ўваходны стварыць ColorPicker, і гэтак далей, ён выявіць, што ўваходныя значэння дэзінфекцыі на аснове спецыфікацыі. У выпадку WebKit, мы атрымалі пацверджанне таго, што санітарная апрацоўка не будзе дададзены без элементаў інтэрфейсу карыстальніка павінны быць на месцы.

localStoragelocalstorage
Крос-акно паведамленняўPostMessage
sessionStoragesessionstorage
Web SocketsWebSockets
Вэб баз дадзеных SQLwebsqldatabase
Web Workerswebworkers

Разнастайны

Асаблівасць Modernizr JS ўласцівасць аб'екта / CSS імя-класа
Geolocation APIгеолокации
Убудаваныя SVGinlinesvg
SMILSMIL
SVGSVG
Шляхі SVG кліпsvgclippaths
Сэнсарны Падзеідакрананне

Тэст Modernizr.touch паказвае толькі, калі браўзэр падтрымлівае сэнсарны падзеі, якія не абавязкова адлюстроўвае сэнсарным прыладай. Напрыклад, Palm Pre / WebOS (сэнсарны) тэлефонаў не падтрымліваюць сэнсарны падзей і, такім чынам, не праходзяць гэты тэст. Акрамя таго, у Chrome (настольныя), які выкарыстоўваецца для хлусіць пра сваю падтрымку на гэтым, але што з тых часоў было выпраўлена. Modernizr таксама тэсты для Multitouch падтрымкі па запыце СМІ, які з'яўляецца, як Firefox 4 раскрывае, што для Windows 7 таблетак. Для атрымання дадатковай інфармацыі гл тэсты Modernizr дакрананне.

калі (Modernizr.touch) {
    / / прывязка да touchstart, TouchMove і г.д., і паглядзець `event.streamId` 
} яшчэ {
    / / прывязка да нармальнага мышы, MouseMove і г.д. 
}
                
WebGLWebGL
калі (Modernizr.webgl) {loadAllWebGLScripts (); / / WebGL актывы могуць быць лёгка> 300k 
} Else {VAR MSG = 'З іншага браўзэр вы можаце бачыць WebGL вопыт тут: \
             get.webgl.org. ;. document.getElementById ('# паведамлення') InnerHtml = тзд;}

Метады Modernizr

Існуе пара даступных у канкрэтным выпадку, што дае вам дадатковыя функцыі вы, верагодна, мелі, калі ў вас шмат CSS3 і гнуткай канструкцыі.

Modernizr.prefixed ()

JavaScript метаду:
Modernizr. прэфіксам (радок)

Modernizr.prefixed () вяртае прэфікс або nonprefixed варыянт уласнасці імя ўваходнага

Modernizr.prefixed ('boxSizing') / / 'MozBoxSizing'

Уласцівасці павінен быць перададзены як DOM стылі CamelCase, а не `скрынкі` памераў злучок стылі.

Вяртаюцца значэння таксама будзе варыянт CamelCase, калі вам трэба перавесці, што праз злучок выкарыстоўваць стыль:

str.replace (/ ([AZ]) / г, функцыя (вул, m1) {вяртанне '-' + m1.toLowerCase ();}). замену (/ ^ мс /, '-мс-');

Калі вы спрабуеце высветліць, якая падзея пераходу канец прывязку, вы маглі б зрабіць нешта накшталт...

 
var transEndEventNames = {
    'WebkitTransition' : 'webkitTransitionEnd',
    'MozTransition'    : 'transitionend',
    'OTransition'      : 'oTransitionEnd',
    'msTransition'     : 'msTransitionEnd', // maybe?
    'transition'       : 'transitionEnd'
},
transEndEventName = transEndEventNames[ Modernizr.prefixed('transition') ];
 
// ... bind to the transEndEventName event...   

м ? () СМІ запыт тэставання

JavaScript метаду:
Modernizr. MQ (радок)

Modernizr.mq тэсты дадзенага сродкі запыту, жыць супраць бягучы стан акна

Некалькі важных заўваг:

Прыклад выкарыстання:

Modernizr.mq ('толькі экран і (макс. шырыня: 768px)') / / ісціна

Расцяжымасць

Тэсты па асноўных Modernizr можа не пакрыць ўсіх Вашых спраў, але ёсць поўны набор API-інтэрфейсаў даступныя для Вас, каб падлучыць свае ўласныя тэсты асаблівасць у Modernizr. Акрамя таго, многія з іх былі сабраны ўжо ў / функцыя распазнае / тэчцы і ў вікі.

addTest () Plugin API

JavaScript метаду:
Modernizr. addTest (радок, п)
Modernizr. addTest (вул., лагічны)
. Modernizr addTest ({вул: п, str2: fn2})
. Modernizr addTest ({вул: лагічны, str2: п})

Вы можаце пратэставаць дадатковыя магчымасці, якія Modernizr цяперашні час не падтрымлівае. Для гэтага можна выкарыстаць addTest функцыі. Напрыклад, некаторыя карыстачы прасілі тэсты для плаваюць у IE двайны памылкай маржы, а таксама падтрымку пазіцыі: фіксаваны. Выкарыстанне addTest, вы можаце дадаць іх самі і атрымаць сапраўды такі жа, як API цалкам падтрымліваецца тэстаў.

Новыя подпісаў для гэтага метаду прыёму лагічнае або аб'екта былі дададзеныя для Modernizr 2

Прыклад выкарыстання:

// Test for position:fixed support 
Modernizr.addTest('positionfixed', function () {
    var test  = document.createElement('div'),
      control = test.cloneNode(false),
         fake = false,
         root = document.body || (function () {
            fake = true;
            return document.documentElement.appendChild(document.createElement('body'));
      }());
 
   var oldCssText = root.style.cssText;
   root.style.cssText = 'padding:0;margin:0';
   test.style.cssText = 'position:fixed;top:42px';
   root.appendChild(test);
   root.appendChild(control);
   
   var ret = test.offsetTop !== control.offsetTop;
   
   root.removeChild(test);
   root.removeChild(control);
   root.style.cssText = oldCssText;
   
   if (fake) {
      document.documentElement.removeChild(root);
   }
   
   return ret;
});

Мяркуючы, вышэй праходзіць тэст, зараз будзе . positionfixed класа на HTML-элемент і Modernizr.positionfixed будзе праўдай. IE6, вядома, зараз прыйдзецца . positionfixed не- класа.

testStyles ()

JavaScript метаду:
Modernizr. testStyles (радок, п)

Modernizr.testStyles () дазваляе дадаваць прыстасаваныя стылі да дакумента і пратэставаць элемент пасля гэтага. Элемент з ідэнтыфікатарам "Modernizr" ўводзіцца ў старонкі.

 
  Modernizr.testStyles('#modernizr { width: 9px; color: papayawhip;', function(elem, rule){
      Modernizr.addTest('width', elem.offsetWidth == 9);
  });

testProp ()

JavaScript метаду:
Modernizr. testProp (радок)

Modernizr.testProp () расследуе ці дадзены стыль ўласнасць прызнаецца. Звярніце ўвагу, што імёны уласцівасцяў павінны быць прадстаўлены ў варыянце CamelCase.

Modernizr.testProp ('pointerEvents') / / ісціна 

testAllProps ()

JavaScript метаду:
Modernizr. testAllProps (радок)

Modernizr.testAllProps () расследуе Ці дадзенае ўласцівасць стылю, або любы з яго пастаўшчыкоў з прэфіксам варыянты, не прызнаецца. Звярніце ўвагу, што імёны уласцівасцяў павінны быць прадстаўлены ў варыянце CamelCase.

Modernizr.testAllProps ('boxSizing') / / ісціна 

hasEvent ()

JavaScript метаду:
Modernizr. hasEvent (вул. [, элем])

Modernizr.hasEvent () выяўляе падтрымку дадзенага падзеі, з неабавязковым элементам для тэставання на

Modernizr.hasEvent ('gesturestart, элем) / / ісціна

_prefixes & _domPrefixes

JavaScript ўласцівасці:
Modernizr. _prefixes Modernizr. _domPrefixes

Пастаўшчыка прэфіксаў вам прыйдзецца праверыць. Паглядзіце ў Modernizr крыніцы ці ніжэй, каб убачыць, як эфектыўна далучыцца () гэтыя масівы для таго, каб пратэставаць ўласцівасці стылю.

Modernizr._prefixes.join ('апора' + ': значэнне;');
 / * апору: значэнне;-WebKit-прапіў: значэнне;-МОЗ-прапіў: значэнне;-о-апоры: значэнне; мс-прапіў: значэнне ;-KHTML-прапіў: значэнне; * / 
 
'апору:' + Modernizr._prefixes.join ('значэнне; апору:') + 'бла';
 / * апору: значэнне; апору:-WebKit кошту; апору:-МОЗ кошту; апору:-о-значэння; апору: мс кошту; апору:-KHTML кошту; апору: бла; * / 
 
'апору: значэнне;' + Modernizr._domPrefixes.join («Апора '+': значэнне ; ') +': значэнне ';
 / * апору: значэнне; WebkitProp: значэнне; MozProp: значэнне; OProp: значэнне; msProp: значэнне; KHTML: значэнне * /
Published (Last edited): Jul 10 , source: http://www.modernizr.com/docs/