С быстрой разработкой HTML5 и CSS3 все больше и больше семантических тегов и прохладных функций были применены для разработки веб -приложений. Основные производители браузеров начали поддерживать эти новые функции, и веб -разработчики также заинтересованы в том, чтобы попробовать эти новые функции для разработки более красочных и интересных приложений. Тем не менее, проблемы совместимости версий, вызванные неравномерной поддержкой этих новых функций (особенно в области головной боли, IE), всегда являются кошмаром, который задерживается в умах разработчиков. Традиционные привычки использования мешают нам отказаться от старых версий браузеров, и разработчики могут выбрать только скучное ручное тестирование, тестирование, а затем тестировать.
Чтобы решить эту проблему, Modernizr появился. Его название звучит немного похоже на модернизацию, и, действительно, название возникло из -за того, что он стал более современным, но это не попытка модернизировать старый браузер, то есть оно поддерживает эти новые функции (хотя вы действительно можете заставить браузер поддержать определенные новые функции, которые не поддерживаются добавлением Shim/Polyfill Scripts, как это будет рассмотрено).
Modernizr - это библиотека JS с открытым исходным кодом, которая обнаруживает поддержку браузеров для функций HTML5 и CSS3. Знаменитый веб -сайт совместимости браузера HTML5/CSS3 FindmeByip основан на этой структуре. Мы можем использовать его, чтобы определить, поддерживает ли браузер некоторую новую функцию и даже загрузить сценарии дополнительно, чтобы удовлетворить ваши потребности для динамической загрузки различных файлов JS в соответствии с различными ситуациями, чтобы уменьшить загрузки и повысить производительность.
Modernizr предоставляет две версии: разработка и производство. Версия разработки включает обнаружение всех новых функций HTML5 и CSS3, подходящих для обучения и тестирования. Для начинающих, которые только начинают использовать Modernizr, Белла рекомендует использовать эту версию. Как только вы познакомитесь с принципом работы Modernizr, вы можете использовать пользовательскую версию производства. Вы можете скачать только столько функций, которые необходимо обнаружить, чтобы значительно сократить количество загрузок, что может немного улучшить производительность вашей программы в некоторой степени. Вы можете скачать эти две версии по адресу http://modernizr.com/download/, нажмите на ссылку версии разработки на странице, чтобы загрузить версию разработки, или вы видели следующую страницу отображения функции
Вы можете проверить любую функцию HTML5 или CSS3, которую вы хотите проверить, но по умолчанию дополнительная категория будет выбрана следующим образом:
A) HTML5 SHIV v3.6: он добавляет сценарий-HTML5 ShiM заставляет IE6-8 правильно разработать и печатать элементы HTML5. Если вы планируете использовать новые семантические теги HTML5, такие как <Header>, <noter>, <av>, <section>, <статья> и т. Д., То вам необходимо выбрать эту опцию.
b) Modernizr.load (yepnope.js): добавляет дополнительный загрузчик скрипта, который не включен в версию разработки. Он увеличивает 3 КБ загрузок, поэтому, если он вам не нужен, вы можете отказаться от выбора.
C) Добавить классы CSS: он добавляет класс Modernizr в стартовый тег. Если вы хотите обнаружить поддержку функций CSS3, вы должны выбрать эту опцию.
Метод использования Modernizr очень прост. После загрузки версии разработки вам нужно только представить файл библиотеки JS на страницу, например:
1 | < script type = text/javascript src = > js/modernizr.js script ></ |
После добавления ссылки Modernizr, когда программа JS работает, она добавит партию имен классов CSS в элемент HTML. Эти имена классов отмечают, какие из них поддерживают поддержку, а какие функции не поддерживают в текущем браузере. Если он поддерживает его, будет отображаться соответствующее имя функции. Если он не поддерживает его, будет отображаться имя без функции. Например, если обнаруженный браузер поддерживает коробку свойств CSS3, Modernizr добавит класс Boxshadow в тег, в противном случае будет добавлен класс без ящиков. На рисунке ниже показана поддержка новых функций HTML5 и CSS3 на Chrome 23.0.1271.64.
Затем вам просто нужно определить соответствующую информацию о стиле в вашем листе стиля 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 и вместо этого ссылается на стили, определенные в классе без сбоя, сохранив вам неприятную логику обнаружения имени браузера в программе JS.
Конечно, когда ваш сценарий приложения требует, чтобы вы определили, поддерживается ли новая функция в программе, и дать различную логику обработки, вы также можете использовать Modernizr для легкого вынесения суждений. В настоящее время вам нужно использовать глобальный объект с именем Modernizr, созданный Modernizr. Контент представляет собой список логических результатов, приведенных для каждой обнаруженной функции. Если браузер поддерживает свойство Boxshadow, то значение Modernizr.boxshadow верно, в противном случае оно ложно. Поэтому, после введения файла библиотеки, вы также можете использовать этот метод для обнаружения поддержки браузера для этой функции. Этот объект JS также содержит более подробную информацию для определенных функций. Например, modernizr.video.h264 расскажет вам, поддерживает ли браузер этот специальный кодек, и modernizr.inputtypes.search сообщит, поддерживает ли текущий браузер новый тип ввода поиска.
Кроме того, если Modernizr не содержит функции, которые вам необходимы для обнаружения, вы можете вызвать инкапсулированную функцию AddTest Modernizr. Для различных функций HTML5 и CSS3 мы можем найти многие из уже написанных функций AddTest на GitHub (по какой -то причине Modernizr заблокирован, а проект теперь размещен на GitHub). Давайте посмотрим на простой пример. Если вы хотите проверить, поддерживает ли браузер API GetUsermedia (API в новой технологии WEBRTC), вы можете написать следующую функцию AddTest для тестирования:
1 | Modernizr.addTest( 'getusermedia' , !!Modernizr.prefixed( 'getUserMedia' , navigator)); |
Я считаю, что после краткого представления вы уже испытали удобство, которое Modernizr может привнести в разработку. После понимания функций Modernizr и того, как использовать Modernizr, вы также можете узнать много новых знаний, изучая его исходный код и ознакомившись с его принципами реализации. Хотя Белла - новичок в этом отношении, она по -прежнему делится с вами некоторым опытом в чтении исходного кода.
Белла упомянула Global Object Modernizr ранее. Как это создается в Modernizr? Давайте посмотрим на следующий исходный код:
1 | window.Modernizr = ( function ( window, document, undefined) { |
2 | var ...; |
3 | Modernizr = {}; |
4 | ... |
5 | return Modernizr; |
6 | })( this , this .document); |
Эта часть кода использует асинхронную функцию для генерации пространства имен (хотя в JS нет реального пространства имен), а функция возвращает объект Modernizr, который назначается Window.mordernizr, так что другие программы JS могут непосредственно использовать window.modernizr или Modernizr. Параметр, пройденное, когда называется функция, относится к контекстной среде выполнения функции, то есть глобальным объектом окна.
Как Modernizr проверяет уровень поддержки новых функций CSS3? Оказывается, что Modernizr сначала создаст объект DOM, а затем использует атрибуты стиля под этим объектом, чтобы проверить, поддерживает ли он новые функции CSS3. Код заключается в следующем:
1 | var mod = 'modernizr' , |
2 | modElem = document.createElement(mod), |
3 | mStyle = modElem.style; |
Для браузера, независимо от того, может ли он распознавать наш недавно созданный тег HTML или нет, мы можем его стиль, чтобы мы могли стилизовать недавно созданный тег здесь. Предположим, мы хотим проверить, поддерживает ли браузер HSLA для определения цветов в CSS, мы можем сначала написать стиль с атрибутом HSLA, применяемым для полоки его под этикетку, а затем проверить, содержит ли значение стиля строки HSLA. Если браузер не поддерживает его, не будет никаких строк HSLA (потому что действие положения стиля с атрибутом HSLA, примененным к тегу Modernizr, вообще не вступит в силу). Мы можем написать следующий код:
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) возвращает, можно ли распознать свое свойство стиля, или может быть признано какое -либо свойство стиля с префиксом поставщика.
Для получения дополнительных знаний исходного кода я представлю его вам после того, как в будущем у Беллы будут более подробные исследования. Белла считает, что если вы знакомы с принципами и использованием Modernizr, это определенно поможет вам повысить эффективность развития.
Наконец, Белла кратко суммирует некоторые материалы для всех, чтобы учиться у Modernizr:
1. Modernizr Официальный веб -сайт: http://modernizr.com/docs/ Вы можете изучить знания Modernizr, исходный код и скачать Modernizr.
2. URL Modernizr Test Suite: http://modernizr.github.com/modernizr/test/index.html Вы можете запросить состояние поддержки функций HTML5 и CSS3 каждого браузера выше. Метод запроса:
Нажмите «Показать тесты ссылки» от Caniuse и Modernizr в нижней части этой страницы, а затем нажмите на любые ссылки на таблицы для тестируемых функций HTML5 или CSS3, чтобы увидеть поддержку каждого браузера.
3.
4. Загрузить адреса различных функций AddTest, которые обнаруживают новые функции HTML5 и CSS3:
https://github.com/modernizr/modernizr/tree/master/feature-detects
Эта статья из блога Tencent Wuhan. Пожалуйста, укажите источник при перепечатках