Традиционные браузеры не полностью заменены в это время, что затрудняет внедрение новейших функций CSS3 или HTML5 в ваш сайт. Modernizr появился, чтобы решить эту проблему. Как библиотека JavaScript с открытым исходным кодом, Modernizr обнаруживает поддержку браузера для функций CSS3 или HTML5. Modernizr не пытается добавлять функции, которые не поддерживаются более старыми браузерами, но позволяют изменить дизайн страницы, создавая дополнительные конфигурации в стиле. Он также может имитировать функции, которые не поддерживаются более старыми браузерами путем загрузки индивидуальных сценариев.
Modernizr прост в использовании, но не всемогущий. Успешное использование Modernizr в значительной степени зависит от ваших навыков CSS и JavaScript. Это руководство позволяет вам научиться устанавливать дополнительные стили для браузеров, которые не поддерживают многоколонки или прогнозы. Кроме того, вы можете узнать, как заставить старые браузеры для проверки форм, которые используют новейшие требуемые свойства HTML5, и как избирательно загружать файлы скриптов на основе функциональности браузера.
Modernizr - это библиотека JavaScript, используемая для обнаружения поддержки функциональности браузера. В настоящее время, проверяя обработку браузера серии тестов, Modernizr может обнаружить 18 функций CSS3 и более 40 функций о HTML5. Это более надежно, чем традиционные способы обнаружения имен браузеров (нюхание браузера). Время выполнения полного набора тестов занимает всего несколько микросекунд. Кроме того, веб -сайт Modernizr использует пользовательские сценарии для обнаружения только элементов, представляющих интерес, таким образом, достигая оптимизации эффективности.
При использовании Modernizr для обнаружения поддержки CSS3 вам не нужно иметь никаких знаний JavaScript. Вам нужно только вставить файл в веб -страницу, и затем он добавит набор классов в тег <html> страницы в соответствии с функциональностью браузера. Названия соответствующих классов соответствовали требованиям к стандартизации и их легко понять. Например, если браузер поддерживает свойство Box-Shadow, вам необходимо добавить соответствующий класс Boxshadow; В противном случае добавьте класс без ящика. Все, что вам нужно сделать, это создать таблицу стилей, которая использует эти классы для обеспечения соответствующего стиля для соответствующего браузера.
Modernizr позволяет легко реализовать решения JavaScript, известные как полифиллы - он имитирует функции и технологии, связанные с HTML5, такие как геолокация. Тем не менее, вам нужно иметь базовое понимание JavaScript, чтобы использовать эти функции и технологии. Термин «Полифилл» происходит от британской марки глины, которая заполняет трещины (то есть наполнительный материал, известный американцам). Здесь полифилл используется для заполнения функций браузера. Иногда Modernizr выполняет эту задачу плавно. Но по сути, это просто исправляющая работа, поэтому вы не можете полагаться на нее, чтобы получить тот же результат, достигнутый уязвимым браузером.
Как и другие библиотеки JavaScript, Modernizr предоставляет версии разработки и производства. Единственное отличие по сравнению с большинством библиотек заключается в том, что пространства и комментарии были удалены из производственной версии, которая уменьшает размер загрузок. Modernizr использует другой подход. В некотором смысле версия разработки можно назвать раковиной на кухне - она содержит почти все. Производственная версия содержит только те элементы, которые вы выбираете, которые могут значительно сократить загрузки. Во многих случаях производственная версия может быть уменьшена до одного двадцатого размера версии разработки.
При тестировании с Modernizr я рекомендую загрузить версию разработки. После того, как вы освоили, как это работает, и ее возможности, вы можете скачать пользовательскую производственную версию для развертывания на вашем сайте.
Пример файла для этого учебника содержит версию Modernizr Development 2.0.6, но я предлагаю заменить его на последнюю обновленную версию с сайта Modernizr.
ПРИМЕЧАНИЕ. Если вы нажмите на ссылку загрузки в главном меню навигации по ошибке, вы увидите большое количество флажков, которые будут представлены вам выбрать нужный инструмент. Это установлено для индивидуальной версии производства. Нажмите на ссылку на версию разработки в верхней части панели или нажмите кнопку «Назад» в своем браузере, чтобы вернуться на домашнюю страницу, и выберите кнопку разработки, показанную на рисунке 1.
Как упоминалось ранее, Modernizr не пытается добавить новые функции в более старые браузеры, но позволяет вам восполнить эти недостающие функции в вашем стиле. Чтобы показать, как это работает, пример файла содержит страницу с названием css_support_begin.html. Если вы загружаете эту страницу в новый браузер, она должна выглядеть как рисунок 2.
Рисунок 2. Firefox 5 отображает страницу в многоцелевом формате и добавляет тени к изображению Стиль этой страницы состоит в том, чтобы использовать свойства CSS3 column-count и box-shadow CSS3 для отображения текста в формате с несколькими столбцами и добавления тени к изображению. Старые версии браузеров не поддерживают ни одного из этих свойств, поэтому та же страница в Internet Explorer (IE) 7 выглядит как рисунок 3.
В IE9 на той же странице показана тень изображения, но текст такой же, как макет, показанный на рисунке 3.
То, что вы пытаетесь восполнить отсутствующие функции, зависит от требований вашего дизайна. Это будет включать в себя много работы, чтобы попытаться сделать страницу точно такой же во всех браузерах, но вы можете сделать некоторые простые улучшения, такие как окружение текста вокруг изображения, регулировка левых краев изображения в текст и добавление смутных границ на нижних и правых краях изображения, чтобы он чувствовал себя более трехмерным.
Modernizr использует JavaScript для обнаружения функциональности, поддерживаемой браузером, но вместо использования JavaScript для динамической загрузки различных таблиц стилей он использует очень простые методы для добавления классов к тегу <Html>. Затем, как дизайнер, вы решите использовать CSS -корпус, чтобы обеспечить соответствующий стиль для целевых элементов. Например, если страница поддерживает свойство box-shadow , Modernizr добавит класс boxshadow . Если не поддерживается, то он добавляется с помощью класса no-boxshadow .
Поскольку браузеры игнорируют свойства CSS, которые они не могут распознавать, вы можете использовать свойство с box-shadow с уверенностью в соответствии с вашими правилами основного стиля, однако вам необходимо добавить отдельный селектор потомков для более старых браузеров в следующем формате:
.no-boxshadow img { /* styles for browsers that don't support box-shadow */ } Только браузеры, которые не поддерживают box-shadow будут иметь класс no-boxshadow , поэтому другие браузеры не будут применять это правило стиля.
Давайте добавим Modernizr на образец страницы и проверим классы, которые он добавляет к тегу <html>.
<!DOCTYPE HTML> <html> <!DOCTYPE HTML> <html class=no-js>Modernizr полагается на JavaScript, включенный в браузере. Когда он включен, этот класс удаляется динамически. Однако в редких случаях JavaScript все еще присутствует в HTML Makup, когда он не включен, что позволяет вам создавать правила специального стиля для таких посетителей, если это необходимо.
</style> <script src=js/modernizr.js></script> </head> Примечание. Если вы используете панель вставки или меню вставки, DreamWeaver добавит type=text/javascript в начальный тег <croppling>. Это больше не требуется в HTML5, но сохранение его не причинит никакого вреда.
Примечание. Если в вашей версии DreamWeaver не есть живой код (или вы используете другой редактор HTML), вы можете проверить сгенерированный код, используя инструменты разработки, предоставленные большинством новых браузеров или Firebug, предоставленных браузерами Firefox.
Как показано на рисунке 4, класс no-js был заменен классом js , что указывает на то, что JavaScript был включен.
В таблице 1 перечислены имена классов, используемые Modernizr для указания поддержки CSS3. Если функция не поддерживает ее, имя соответствующего класса префикс с no- .
Таблица 1. Функции CSS3, обнаруженные Modernizr
Функции CSS | Modernizr Class (свойства) |
@font-face | fontface |
::before и ::after псевдо-элеентов | generatedcontent |
background-size | backgroundsize |
border-image | borderimage |
border-radius | borderradius |
box-shadow | boxshadow |
CSS анимация | cssanimations |
CSS 2D преобразования | csstransforms |
3D -трансформации CSS | csstransforms3d |
CSS переходы | csstransitions |
Гибкая компоновка коробки | flexbox |
Градиенты | cssgradients |
hsla() | hsla |
Многоколонный макет | csscolumns |
Несколько фонов | multiplebgs |
opacity | opacity |
отражение | cssreflections |
rgba() | rgba |
text-shadow | textshadow |
Независимо от того, где тестируется конкретный атрибут CSS, имя класса и имя свойства одинаковы, однако это требует удаления любого дефиса или кронштейнов. Другие классы названы в честь модуля CSS3, на который они ссылаются.
См. Таблицу 1, вы можете видеть, что Modernizr использует boxshadow и csscolumns , чтобы показать поддержку свойств box-shadow и многоцелевого макета, соответственно. Таким образом, вы можете использовать классы no-boxshadow и no-csscolumns , чтобы создать правила специального стиля для браузеров, которые не поддерживают эти функции.
Чтобы убедиться, что директива проста, я продемонстрирую только пример объявлений CSS. Вы можете ввести их непосредственно в представление кода или использовать новое диалоговое окно «Правило CSS».
.no-boxshadow img . #8A8A8A ). Полученные правила стиля должны выглядеть так:.no-boxshadow img { border-right: #8A8A8A 2px solid; border-bottom: #8A8A8A 2px solid; }Это не так привлекательно, как полупрозрачные тени, но, несмотря на это, это все равно позволяет изображению слегка выступать с фона.
.no-csscolumns img . .no-csscolumns img { margin: 3px 8px 3px 0; float: left; } .columns img . Два правила имеют одинаковую специфику, поэтому, если они обращены на противоположное, 10-пиксельный левый край .columns img может перезаписать только что созданное вами правило. Вы можете переименовать .no-csscolumns img в .no-csscolumns .columns img чтобы придать ему более высокую специфичность, но лучше всего обеспечить, чтобы, чем лучше селектор, тем лучше. (Кстати, если вы не уверены, что это такое , посмотрите статью Адриана Старшего, понимание специфичности. Она была опубликована в течение долгого времени, но она ценно.) В этом простом примере я создал специальные стили для более старых версий браузеров, используя только класс, префиксированный no- . Тем не менее, по их способности, для вас абсолютно нет смысла использовать оба класса (с префиксами или без него) для создания разных стилей для вашего браузера. Например:
.csscolumns { /* rules for browsers that support multi-column layout */ } .no-csscolumns { /* rules for browsers that don't support multi-column layout */ }Иногда этот подход является разумным, например, если вы хотите создать совершенно другой макет для каждого уровня поддержки. Но если это просто вопрос обеспечения выбираемых стилей для старых браузеров, не забывайте, что браузер игнорирует свойства, которые они не узнают. Если вы используете класс Modernizr для всех стилей, ваша страница будет полностью некриптирована в браузере с интенсивностью JavaScript.
Modernizr добавляет имя класса для начального <html> тега, чтобы воспроизводить двойную цель. Когда страницы загружаются, они также являются именами свойств JavaScript, созданных объектом Modernizr. В таблице 1 перечислены имена классов и атрибуты, связанные с CSS. В таблице 2 перечислены оставшиеся классы и атрибуты, связанные с HTML5 и связанными с ними технологиями, такими как географические местоположения.
Таблица 2. Особенности, связанные с HTML5, обнаружены Modernizr
Особенности, связанные с HTML5 | Modernizr Class (свойства) |
Кеш приложения | applicationcache |
Аудио | audio. type (ogg, mp3, wav, m4a) |
Холст | canvas |
Холст текст | canvastext |
Перетаскивать | draganddrop |
Форма входных атрибутов | input. attributeName |
Форма входных элементов | inputtypes. elementName |
Геолокация | geolocation |
соревнование с хэш -оболочкой | hashchange |
Управление истории | history |
Indexeddb | indexeddb |
Встроенный SVG | inlinesvg |
Местное хранение | localstorage |
Обмен сообщениями | postmessage |
Сессия хранения | sessionstorage |
Улыбаться | smil |
Svg | svg |
SVG Clip Paths | svgclippaths |
Прикосновение событий | touch |
Видео | video. type (ogg, webm, h264) |
Webgl | webgl |
Веб -розетки | websockets |
База данных Web SQL | websqldatabase |
Веб -работники | webworkers |
В большинстве случаев все атрибуты, перечисленные в таблице 1 и в таблице 2, возвращают true или false . Таким образом, вы можете проверить локальное хранилище, используя JavaScript, как показано ниже:
if (Modernizr.localstorage) { // script to run if local storage is supported } else { // script to run if local storage is not supported } Однако с точки зрения audio и video возвратное значение - это строка, которая указывает на то, что браузер может обрабатывать определенный тип уровня доверия. Согласно спецификации HTML5, пустая строка означает, что тип не поддерживается. Если этот тип поддерживается, возвращаемое значение, возможно, или, возможно,. Например:
if (Modernizr.video.h264 == ) { // h264 is not supported } HTML5 добавляет много новых свойств формы, таких как autofocus , который автоматически помещает курсор в указанное поле, когда страница загружается в первый раз. required еще одно полезное свойство, которое не позволят HTML5-совместимым браузерам отправлять формы, если требуемое поле остается пустым (см. Рисунок 6).
Это здорово, но это оставит вас с вопросом: что вы должны делать со старыми версиями вашего браузера?
Одним из решений является игнорировать их и оставить их в функции проверки на стороне сервера для окончательной проверки. Если браузер не распознает required атрибут, еще один удобный способ справиться с этой ситуацией-создать небольшой скрипт для проверки необходимых полей. Следующие инструкции показывают, как выполнить соответствующие операции с помощью Modernizr.
</style> <script src=js/modernizr.js></script> </head> <script> и создайте обработчик событий, как только страница загружена для облегчения выполнения кода:<script src=js/modernizr.js></script> <script> window.onload = function() { // code to execute when page loads }; </script> </head autofocus и required свойства. Способ справиться с autofocus прост:window.onload = function() { // get the form and its input elements var form = document.forms[0], inputs = form.elements; // if no autofocus, put the focus in the first field if (!Modernizr.input.autofocus) { inputs[0].focus(); } // if required not supported, emulate it } Это условие проверяет Modernizr.input.autofocus , если autofocus не поддерживается, возвращаемое значение false . Тем не менее, логический оператор не (восклицательный знак) может обратить вспять значение, поэтому, если autofocus не поддерживается, результат оценки этого условия является true , а inputs[0].focus() помещают курсор в первое входное поле.
required не поддерживать, теперь добавьте код для облегчения проверки необходимых полей. Полный код обработчика событий заключается в следующем:window.onload = function() { // get the form and its input elements var form = document.forms[0], inputs = form.elements; // if no autofocus, put the focus in the first field if (!Modernizr.input.autofocus) { inputs[0].focus(); } // if required not supported, emulate it if (!Modernizr.input.required) { form.onsubmit = function() { var required = [], att, val; // loop through input elements looking for required for (var i = 0; i < inputs.length; i++) { att = inputs[i].getAttribute('required'); // if required, get the value and trim whitespace if (att != null) { val = inputs[i].value; // if the value is empty, add to required array if (val.replace(/^/s+|/s+$/g, '') == '') { required.push(inputs[i].name); } } } // show alert if required array contains any elements if (required.length > 0) { alert('The following fields are required: ' + required.join(', ')); // prevent the form from being submitted return false; } }; } } Новый код создает функцию, которая при отправке формы может итерация через все входные элементы, чтобы найти поля с required атрибутами. Когда он находит поле, он удаляет начало и заканчивая пробелы из значения, и если результат является пустой строкой, он добавляет результат к required массиву. После того, как все поля были проверены, если некоторые элементы включены в массив, браузер отображает предупреждение, связанное с отсутствующим именем поля, и предотвращает подачу формы.
ПРИМЕЧАНИЕ. Safari 5.1 неправильно сообщил, что он поддерживает required свойство, поэтому он подчиняет форму без проверки необходимых полей. Это недостаток сафари, но в Modernizr его не существует.
Когда вы будете готовы развернуть свой веб -сайт, рекомендуется создать пользовательскую версию Modernizr, которая содержит только те элементы, которые вам действительно нужны. Это может уменьшить размер библиотеки Modernizr с 44 КБ до 2 КБ в соответствии с выбранной вами функциональностью. Диапазон текущих параметров показан на рисунке 8.
Рисунок 8. Страница загрузки Modernizr позволяет выбрать только те функции, которые вам нужныВарианты могут быть легко сгруппированы в следующих категориях: CSS3, HTML5, MISC (ELLENE) и Extra. Нажмите кнопку переключения рядом с первыми тремя названиями, чтобы выбрать или отбросить все флажки в категории выбора.
По умолчанию, дополнительная категория выберет следующие три записи:
Если вы выберете какой -либо вариант в категории CSS3, также будут выбраны параметры в следующей дополнительной категории:
Modernizr.testProp() Modernizr.testAllProps() Modernizr._domPrefixes()Не отмените выбранные эти варианты. Это автоматически отменяет любые параметры, которые вы выбрали в категории CSS3.
MQ Polyfill (repply.js) в дополнительной категории добавил сценарий, который позволяет медиа-запросам в IE 6-8 получить ограниченную поддержку. Когда вы выбираете эту опцию, он автоматически выбирает медиа -запросы и modernizr.teststyles (). Чтобы узнать больше о Media Запрошенных запросах Polyfill (repply.js), посетите https://github.com/scottjehl/resper.
Только продвинутые пользователи будут заинтересованы в других вариантах в дополнительной категории. Для получения более подробной информации о том, что они есть и как их использовать, см. Раздел расширяемости документации Modernizr.
В следующем описании описывается, как создать пользовательскую версию продукта Modernizr для образца файла. Эта пользовательская версия требуется для последующих упражнений, которые покажут, как загружать внешние файлы JavaScript с использованием Modernizr.load() .
При создании пользовательской производственной версии Modernizr опция, содержащая Modernizr.load() должна быть выбрана по умолчанию. Modernizr.load() - это псевдоним для yepnope() , который является автономным загрузчиком сценария, разработанным синхронно с Modernizr. Чтобы проиллюстрировать, как его использовать, я привожу простой пример. Я перенес соответствующий сценарий от обязательного. HTML в check_required.js и внес три незначительных изменения, чтобы облегчить удаление тестов Modernizr и присвоение его переменной, называемой init . Пересмотренный сценарий выглядит так:
var init = function() { // get the form and its input elements var form = document.forms[0], inputs = form.elements; // put the focus in the first input field inputs[0].focus(); // check required fields when the form is submitted form.onsubmit = function() { var required = [], att, val; // loop through input elements looking for required for (var i = 0; i < inputs.length; i++) { att = inputs[i].getAttribute('required'); // if required, get the value and trim whitespace if (att != null) { val = inputs[i].value; // if the value is empty, add to required array if (val.replace(/^/s+|/s+$/g, '') == '') { required.push(inputs[i].name); } } } // show alert if required array contains any elements if (required.length > 0) { alert('The following fields are required: ' + required.join(', ')); // prevent the form from being submitted return false; } }; }; Большим преимуществом Modernizr.load() является то, что он может загружать сценарии условно на основе результатов тестирования возможностей браузера, поэтому сначала он назывался yepnope() . Он может загружать внешние сценарии асинхронно - другими словами, он может загружать внешние сценарии после того, как в браузере загружают модель объекта документа (DOM) - поэтому он может помочь улучшить производительность вашего веб -сайта.
Основной синтаксис Modernizr.load() состоит в том, чтобы передать объект со следующими атрибутами:
test : собственность Modernizr, которую вы хотите обнаружить. yep : Если тест успешен, местоположение сценария, который вы хотите загрузить. Используйте многопроцветный массив. nope : Если тест не стерж, местоположение сценария, который вы хотите загрузить. Используйте многопроцветный массив. complete : функция, которая работает, как только загружается внешний сценарий (необязательно). Да yep и да, и nope необязательны, если вы предоставляете один из них.
Чтобы загрузить и выполнить сценарии в check_required.js, вам необходимо добавить следующий <script> block после модернизации.
<script> Modernizr.load({ test: Modernizr.input.required, nope: 'js/check_required.js', complete: function() { init(); } }); </script> Это точно так же, как и раньше, но это может уменьшить загрузку загрузки браузеров, которые уже поддерживают required атрибут.
Чтобы проверить несколько условий, вы можете передать набор объектов Modernizr.load() . Для получения более подробной информации см. Учебное пособие Modernizr.Load () о документации Modernizr.
Modernizr - мощный и полезный инструмент, но это не значит, что вы должны его использовать. Не все случаи необходимы для использования Modernizr для предоставления нескольких стилей в браузер. Если ваше основное внимание уделяется Internet Explorer, рассмотрите возможность использования условных комментариев IE. Вы также можете использовать стек CSS, чтобы перезаписать некоторые стили. Например, сначала используйте шестнадцатеричный цвет, а затем переопределите его rgba() или hsla() . Старые версии браузеров будут использовать первое значение и игнорировать второе значение.
Modernizr действительно становится реальностью, когда он сочетается с полифилями и другим JavaScript. Но помните, что обычно легко создать свои собственные тесты, которые подходят для поддержки функций. Например, следующее приведен весь код, который вы проверяете, поддерживает ли браузер required атрибут (код находится в redection_nomodernizr.html):
var elem = document.createElement('input'); if (typeof elem.required != 'boolean') { // required is not supported }Этот учебник охватил все основные особенности Modernizr. Для получения дополнительной информации об этих функциях, пожалуйста, обратитесь к соответствующей официальной документации, которая находится по адресу http://www.modernizr.com/docs/. Кроме того, вы можете найти следующие полезные ресурсы:
yepnope() , которое было объединено в Modernizr.load() в Modernizr. +