Modernizr ёсць невялікая бібліятэка JavaScript, які вызначае наяўнасць роднага рэалізацыі для наступнага пакалення вэб-тэхналогій, гэта значыць функцыі, якія выцякаюць з HTML5 і CSS3 спецыфікацыі. Многія з гэтых функцый ужо рэалізаваныя, па меншай меры, адзін галоўны браўзэр (большасць з іх у двух або больш), і тое, што Modernizr робіць, вельмі проста, кажу вам, ці з'яўляецца бягучы браўзэр падтрымлівае такую ??магчымасць першапачаткова рэалізаваная ці не.
У адрозненне ад традыцыйнага, але вельмі ненадзейна-метад робіць " UA нюхаюць ", якая з'яўляецца выяўленне браўзэра, яго (наладжваецца карыстальнікам) navigator.userAgent уласнасці, Modernizr робіць фактычнага выяўлення асаблівасць надзейна адрозніваць, што розныя браўзэры могуць і чаго не можа. У рэшце рэшт, той жа рухавічок, магчыма, не абавязкова падтрымліваюць тыя ж самыя рэчы, а некаторыя карыстачы мяняюць свае UserAgent радок, каб абыйсці слаба развіты сайты, якія не дазваляюць ім праз іншае.
Modernizr мэтай пакласці канец UA нюхаюць практыцы. Выкарыстанне функцыі выяўлення з'яўляецца больш надзейнай механіка, каб усталяваць, што вы можаце і не можаце зрабіць у бягучым браўзэры, і Modernizr робіць яго зручным для Вас у розных формах:
Modernizr ), які змяшчае вынікі гэтых тэстаў, як лагічнае ўласцівасціHTML элемент, які дакладна патлумачыць, якія функцыі і ня падтрымліваюццаВалодаючы гэтымі ведамі, што дае Modernizr вас, вы можаце скарыстацца перавагамі гэтых новых функцый у браўзэры, якія могуць аказаць або выкарыстаць іх, і ўсё яшчэ мець лёгкі і надзейны сродак кантролю сітуацыі для браўзэраў, якія не могуць.
Зойдзем на Загрузка старонкі і выберыце, якія функцыі вы збіраецеся выкарыстоўваць у сваім праекце. Такім чынам, мы можам даць тонкі кавалачкі кода, якія вам спатрэбяцца. Ціснем генераваць і ў вас ёсць уласныя зборкі Modernizr. Калі вы яшчэ не ведаем, якія функцыі вы будзеце выкарыстоўваць, атрымаць развіццю версія, якая змяшчае іх усё, але не сціснуты.
Пакіньце тэгі сцэнара ў <head> вашага HTML. Для лепшай прадукцыйнасці, вы павінны мець іх прытрымлівацца пасля вашага стылю спасылак. Таму мы рэкамендуем размяшчаць Modernizr ў галаву два разы: HTML5 Шив (што дазваляе HTML5 элементаў у IE) павінны выканаць, перш чым <body>, і калі вы выкарыстоўваеце якой-небудзь з класаў CSS, якія Modernizr дадае, вы захочаце, каб прадухіліць FOUC.
Назва "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 гэта рэсурс пагрузчыка (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 работ, паглядзіце на анатаванай зыходнага кода, а капацца ў праекце па GitHub.
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 JS ўласцівасць аб'екта / CSS імя-класа |
|---|---|
| @ Шрыфт асобе | fontface |
| фоне памеру | backgroundsize |
| межы малюнка | borderimage |
| мяжа радыусу | borderradius |
| скрынка-цень | boxshadow |
| Гнуткая мадэль Box | flexbox |
|
Гнуткая мадэль акна (ён жа 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 анімацыі на аснове інакш. | |
| Асаблівасць | Modernizr JS ўласцівасць аб'екта / CSS імя-класа |
|---|---|
| applicationCache | applicationcache |
| Палатно | палатно |
Калі |
|
| Палатно Тэкст | canvastext |
| Перацягвання | DragandDrop |
| hashchange падзеі | hashchange |
| Гісторыя Кіраўніцтва | гісторыя |
| HTML5 аўдыё | аўдыё |
|
Калі падтрымка аўдыё выяўленні Modernizr ацэньвае, якія фарматы бягучага браўзэра будзе гуляць. У цяперашні час Modernizr тэсты Важна: значэння гэтых уласцівасцяў не з'яўляюцца праўдзівымі лагічныя. Замест гэтага, Modernizr матчаў HTML5 спецыфікацыі ў вяртанні радок, якая прадстаўляе ўзроўні браўзэра ўпэўненасці, што ён можа справіцца з гэтым кодэкам. Гэтыя вяртаюцца значэння пустую радок (адмоўны адказ), "можа быць" і "верагодна". Пустая радок falsy, іншымі словамі: уаг аўдыё = новы аўдыё (); audio.src = Modernizr.audio.ogg? "Background.ogg ': Modernizr.audio.mp3? "Background.mp3 ':' background.m4a; audio.play (); |
|
| HTML5 відэа | відэа |
|
Глядзіце відэа для Усіх па Крок Камен для JavaScript-менш спосаб выкарыстання HTML5 Калі падтрымка відэа выяўленні Modernizr ацэньвае, якія фарматы бягучага браўзэра будзе гуляць. У цяперашні час Modernizr тэсты Акрамя таго, прачытайце важная заўвага аб аўдыё-фарматаў, як жа вяртаюць значэння ставяцца да відэа. |
|
| IndexedDB | indexeddb |
| Уваходны Атрыбуты | |
|
HTML5 ўводзіць шмат новых атрыбутаў для элементаў ўводу. Modernizr тэсты для іх: Гэтыя новыя атрыбуты могуць рабіць такія рэчы, як: ўключэнне роднай аўтазапаўнення, мімічныя elem.focus () у загрузцы старонкі, рабіць палі формы, намякаючы, і рабіць праверку на баку кліента. Прагляд атрыбутаў HTML5 падтрымкай ўводу старонку з Майкам Тэйларам, каб убачыць іх у дзеянні. |
|
| Тыпы ўваходных дадзеных | |
|
HTML5 ўяўляе тринадцать новых значэнняў для Гэтыя тыпы могуць дазволіць роднай datepickers, colorpickers, URL праверкі, і гэтак далей. Калі браўзэр не падтрымлівае дадзены тып, то яна будзе аказана ў выглядзе тэкставага поля. Modernizr не можа вызначыць, што дата стварэння уваходаў DatePicker, колер ўваходны стварыць ColorPicker, і гэтак далей, ён выявіць, што ўваходныя значэння дэзінфекцыі на аснове спецыфікацыі. У выпадку WebKit, мы атрымалі пацверджанне таго, што санітарная апрацоўка не будзе дададзены без элементаў інтэрфейсу карыстальніка павінны быць на месцы. | |
| localStorage | localstorage |
| Крос-акно паведамленняў | PostMessage |
| sessionStorage | sessionstorage |
| Web Sockets | WebSockets |
| Вэб баз дадзеных SQL | websqldatabase |
| Web Workers | webworkers |
| Асаблівасць | Modernizr JS ўласцівасць аб'екта / CSS імя-класа |
|---|---|
| Geolocation API | геолокации |
| Убудаваныя SVG | inlinesvg |
| SMIL | SMIL |
| SVG | SVG |
| Шляхі SVG кліп | svgclippaths |
| Сэнсарны Падзеі | дакрананне |
|
Тэст Modernizr.touch паказвае толькі, калі браўзэр падтрымлівае сэнсарны падзеі, якія не абавязкова адлюстроўвае сэнсарным прыладай. Напрыклад, Palm Pre / WebOS (сэнсарны) тэлефонаў не падтрымліваюць сэнсарны падзей і, такім чынам, не праходзяць гэты тэст. Акрамя таго, у Chrome (настольныя), які выкарыстоўваецца для хлусіць пра сваю падтрымку на гэтым, але што з тых часоў было выпраўлена. Modernizr таксама тэсты для Multitouch падтрымкі па запыце СМІ, які з'яўляецца, як Firefox 4 раскрывае, што для Windows 7 таблетак. Для атрымання дадатковай інфармацыі гл тэсты Modernizr дакрананне. калі (Modernizr.touch) {
/ / прывязка да touchstart, TouchMove і г.д., і паглядзець `event.streamId`
} яшчэ {
/ / прывязка да нармальнага мышы, MouseMove і г.д.
}
| |
| WebGL | WebGL |
калі (Modernizr.webgl) {loadAllWebGLScripts (); / / WebGL актывы могуць быць лёгка> 300k
} Else {VAR MSG = 'З іншага браўзэр вы можаце бачыць WebGL вопыт тут: \
get.webgl.org. ;. document.getElementById ('# паведамлення') InnerHtml = тзд;}
|
|
Існуе пара даступных у канкрэтным выпадку, што дае вам дадатковыя функцыі вы, верагодна, мелі, калі ў вас шмат CSS3 і гнуткай канструкцыі.
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...
Modernizr. MQ (радок)Modernizr.mq тэсты дадзенага сродкі запыту, жыць супраць бягучы стан акна
Некалькі важных заўваг:
ўсё тыпу дастаткова добра:
Modernizr.mq ('толькі ўсё і (макс-шырыня: 400 пікселяў)')Modernizr.mq ('(мін-шырыня: 0px)')Прыклад выкарыстання:
Modernizr.mq ('толькі экран і (макс. шырыня: 768px)') / / ісціна
Тэсты па асноўных Modernizr можа не пакрыць ўсіх Вашых спраў, але ёсць поўны набор API-інтэрфейсаў даступныя для Вас, каб падлучыць свае ўласныя тэсты асаблівасць у Modernizr. Акрамя таго, многія з іх былі сабраны ўжо ў / функцыя распазнае / тэчцы і ў вікі.
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 не- класа.
Modernizr. testStyles (радок, п)Modernizr.testStyles () дазваляе дадаваць прыстасаваныя стылі да дакумента і пратэставаць элемент пасля гэтага. Элемент з ідэнтыфікатарам "Modernizr" ўводзіцца ў старонкі.
Modernizr.testStyles('#modernizr { width: 9px; color: papayawhip;', function(elem, rule){
Modernizr.addTest('width', elem.offsetWidth == 9);
});
Modernizr. testProp (радок)Modernizr.testProp () расследуе ці дадзены стыль ўласнасць прызнаецца. Звярніце ўвагу, што імёны уласцівасцяў павінны быць прадстаўлены ў варыянце CamelCase.
Modernizr.testProp ('pointerEvents') / / ісціна
Modernizr. testAllProps (радок)Modernizr.testAllProps () расследуе Ці дадзенае ўласцівасць стылю, або любы з яго пастаўшчыкоў з прэфіксам варыянты, не прызнаецца. Звярніце ўвагу, што імёны уласцівасцяў павінны быць прадстаўлены ў варыянце CamelCase.
Modernizr.testAllProps ('boxSizing') / / ісціна
Modernizr. hasEvent (вул. [, элем])Modernizr.hasEvent () выяўляе падтрымку дадзенага падзеі, з неабавязковым элементам для тэставання на
Modernizr.hasEvent ('gesturestart, элем) / / ісціна
Modernizr. _prefixes Modernizr. _domPrefixesПастаўшчыка прэфіксаў вам прыйдзецца праверыць. Паглядзіце ў Modernizr крыніцы ці ніжэй, каб убачыць, як эфектыўна далучыцца () гэтыя масівы для таго, каб пратэставаць ўласцівасці стылю.
Modernizr._prefixes.join ('апора' + ': значэнне;');
/ * апору: значэнне;-WebKit-прапіў: значэнне;-МОЗ-прапіў: значэнне;-о-апоры: значэнне; мс-прапіў: значэнне ;-KHTML-прапіў: значэнне; * /
'апору:' + Modernizr._prefixes.join ('значэнне; апору:') + 'бла';
/ * апору: значэнне; апору:-WebKit кошту; апору:-МОЗ кошту; апору:-о-значэння; апору: мс кошту; апору:-KHTML кошту; апору: бла; * /
'апору: значэнне;' + Modernizr._domPrefixes.join («Апора '+': значэнне ; ') +': значэнне ';
/ * апору: значэнне; WebkitProp: значэнне; MozProp: значэнне; OProp: значэнне; msProp: значэнне; KHTML: значэнне * /