Modernizr что это Использование modernizr 3.0, краткий обзор


Содержание материала:

Как могут потребоваться модули Modernizr 3.x?

Я пытаюсь потребовать определенные тесты Modernizr в проекте для браузера, но я должен делать что-то неправильно.

Я использую deamdify при создании с использованием браузера.

Modernizr требуется как пакет NPM непосредственно из исходного сервера репо. Причина этого в том, что ожидающий v3.x будет доступен через npm, а последние пакеты bower не предлагают источники, а только готовые версии.

Я хочу быть гибким с тем, что модули Modernizr, которые я включаю в мое приложение, так что для моих нужд, дополнительный шаг build-modernizr неприемлем. Я хочу, чтобы один шаг сборки, браузеру.

Проблема заключается в том, что deamdify не может распознать требуемые модули Moderizr как AMD и не разрешает их зависимости или не переносит их в контейнеры AMD.

Я установил репо, которое иллюстрирует проблему:

3 ответа

1 mixel [2020-05-31 13:46:00]

Хотя вы сказали, что для вас не подходит дополнительный шаг build-modernizr (я предоставил ответ для этого случая), но все же хочу добавить еще один ответ для в случае использования браузера и Modernizr с помощью gulp.

gulp-modernizr может сканировать определенные файлы, находить использование Modernizr и создавать пользовательские сборки Modernizr:

Modernizr и HTML5/CSS3 — что и как он делает

Modernizr , это небольшая javascript библиотека, которая определяет поддерживает ли браузер те или иные функции, свойства из HTML5/CSS3 и добавляет классы к элементу на странице, которые позволяют использовать специфичную функциональность браузера в ваших таблицах стилей, без написания дополнительных скриптов.

При загрузке страницы в браузер, Modernizr добавляет созданные им классы к элементам. Это значит, что заменяется на (полный список значительно длиннее). Эти классы вы можете использовать в таблицах стилей для оформления нужных вам элементов. Так-же Modernizr дает возможность поддержки новых семантических элементов из HTML5 спецификации, при помощи вложенного скрипта, похожего на популярный HTML5shiv .

Например:
Надо, чтобы у

была тень и при этом задать определенный вид для браузеров не поддерживающих box-shadow.

.no-boxshadow и .no-boxshadow создает сам скрипт Modernizr , а не вы.

Например: для тега из HTML5:

Важно, что данные классы вы используете в CSS , а в HTML верстку вы ничего не добавляете, за вас это делает Modernizr.

Классы скрипт создает по такому принципу: если браузер поддерживает данное свойство или тег, то тогда классы выглядят так:
,
а если не поддерживает, то добавляется этот же класс, но с приставкой .no-
.

Этих классов добавляется целый список, состоящий из большинства популярных свойств HTML5/CSS3. Полный перечень того,что определяет и поддерживает Modernizr выложен на сайте .

Вот так выглядит результат работы Modernizr в двух браузерах (использовался Firebug) :

Какие плюсы для IE дает Modernizr?
Modernizr исполняя свой скрипт «заставляет работать» элементы из HTML5 в IE.
Это не означает, что IE внезапно начнет поддерживать Audio или Video элементы, это просто значит, что вы сможете использовать вместо

, а так же другие элементы, такие как , и оформлять их при помощи CSS. Как часть Modernizr 1.5, данный скрипт идентичен популярной html5shim библиотеке.

Modernizr 2 beta

Если у вас нет необходимости в создании всех классов Modernizr для html, вы можете воспользоваться Modernizr 2 beta . В новой версии вы просто отмечаете галочкой свойства, которые вы хотите, чтобы Modernizr поддерживал в браузерах. Затем скачайте или скопируйте полученный скрипт и включите его вместо стандартного .

Что Modernizr не делает

Он не добавляет функциональность браузерам, он определяет их естественную функциональность и предлагает вам решение, при помощи которого вы поддержите необходимый уровень контроля над вашим сайтом.

Таким образом Modernizr упрощает часть работы, когда мы пытаемся настроить поддержку HTML5/ CSS3 тем или иным браузером, при создании веб-сайта “по последнему слову техники”.

Информационный портал по безопасности

Modernizr: практическое применение

Автор: admin от 23-05-2012, 04:12, посмотрело: 3155

Modernizr — это javascript-библиотека, которая узнаёт, что из HTML5 и CSS3 умеет браузер пользователя. Определяя возможности браузера, разработчик может сделать откат некоторых функций для старых версий браузеров. Создатели Modernizr называют такую проверку feature detection, и это гораздо эффективнее, чем просто определить браузер, его версию и ОС.

Я был премного удивлён факту отсутствия развёрнутой статьи об этой JS-библиотеке ( анонс не в счёт). Статья составлена из перевода официальной документации проекта, переводов нескольких статей и собственных дополнений.

Первый шаг

Для начала нужно получить свежую версию библиотеки с её официального сайта: Modernizr Download Builder .
Укажи галочками те технологии, тесты которых собираешься проводить, затем создай свою персональную версию библиотеки кнопкой «Generate». Если проставить все галочки, получившегося кода хватит на пару экранов небольшого ноутбука — всего 15 КБ.
Затем просто подключи его к своей странице и проверь, как оно. Если всё работает, у элемента HTML должны появиться многочисленные классы:

Как можно легко догадаться: что добавлял галочками в библиотеку, те тесты и будут выполнены при подключении Modernizr, а потом добавлены классы в зависимости от браузера. Но не забудьте дать элементу HTML класс no-js, чтобы опираться на него, когда JS у клиента не включен.
Уже на этом этапе можно создавать очень эффективные таблицы стилей, например:

Думаю, фантазия опытного верстальщика подскажет примеры более красочные и развёрнутые.

Тесты

Проверка на присутствие той или иной технологии в браузере — тест.
На тесты, которые проводит Modernizr, можно цеплять события. Тест пройден — зацепка yep, не пройден — nope. Очень мило.

yep — подключаю сценарий, использующий геолокационные возможности браузера.
nope — пытаюсь обойтись без них в geo-polyfill.js.

Говорят, что вот так тоже можно делать:

А почему бы и нет?


Вот пример посложнее:

Не так уж и сложно, верно?
и не придирайтесь к слову в“поли-заполнитель” — MicroSoft отлично его перевели .

Одна из крутых возможностей Modernizr.load — возможность выстроить подключаемые сценарии в очередь. Многим это может ни о чём не говорить, но пользователи HTML5 Boilerplate скорее всего знакомы с запасным jQuery из Google CDN. Выглядит как-то так:

Работает так: сначала пытается загрузить jQuery в сценарии, а затем — сразу же после, проверяя, что объект jQuery доступен. Если нет, то пытается загрузить локальную копию jQuery. Это не так-то уж и просто, и Modernizr.load спешит на помощь. Следуй вот такой логике, и он возьмёт в свои руки порядок подключения сценариев:

Замечание: используй этот метод лишь для откатов, потому как последовательная загрузка сценариев вместо параллельной может сильно ударить по быстродействию.

Расширяемость

Очень кстати разработчики Modernizr дали возможность расширять библиотеку самостоятельно с помощью Modernizr.addTest.
Простейший пример:

В документации есть раздел « Extensibility », посвящённый расширяемости, где всё подробно описано. А в проекте на GitHub’е есть папка, куда складывают все годные пользовательские расширения: /feature-detects/ .

Поддержка браузеров

IE6+, Firefox 3.5+, Opera 9.6+, Safari 2+, Chrome. На мобильных устройствах — Mobile Safari на iOS, Webkit на Android’s, Opera Mobile, Firefox Mobile и есть большие надежды на поддержку Blackberry 6+.

Заключение

Отличное подспорье для проектов с плюс-минус широкой аудиторией, когда хорошая поддержка важнее времени загрузки и исполнения страницы. Впрочем, если знать меру — можно и на простые одностраничные сайты его вешать, просто для удобства или даже за делом.
Modernizr используют в довольно крупных компаниях: twitter, Google, Microsoft.

Введение в работу с Modenizr

Modenizr – это javasript-библиотека, используемая во многих популярных сайтах, включая Twitter, USMagazine, Good.is, About.com и так далее. В наших предыдущих статьях мы уже упоминали эту библиотеку несколько раз, но никогда не углублялись.

Итак, сегодня мы хотим отдельно поговорить об этой js-библиотеке.

Прежде всего, давайте ответим на самый главный вопрос: что такое Modenizr?

Судя по описанию на официальном сайте, Modenizr – это «javascript-библиотека, которая определяет HTML5 и CSS3 способности в браузере пользователя».

Несмотря на то, что HTML5 и CSS3 – великолепные технологии, многие из свойств, с которыми большинство из нас уже знакомо, не поддерживаются в старых версиях браузеров. Modenizr помогает нам справиться с этой проблемой – он тестирует браузер пользователя на предмет наличия поддержки конкретных свойств, которые вы использовали в свое проекте. Если используемый параметр не поддерживается, то у нас есть возможность предложить соответствующий запасной вариант в виде упрощенного скрипта или функции.

Топ-пост этого месяца:  Условия SQL UNION использование оператора для объединения результатов инструкций SELECT

На официальном сайте Modernizr вы можете видеть две опции скачивания файла, версии Development и Production.

Версия Development – это полноценная не сжатая версия, состоящая из основных инструментов тестирования. Версия Production позволяет нам выбирать инструменты тестирования, которые нам требуются.

Как видно, есть множество опций для выбора инструментов тестирования. В данном примере мы выберем основные инструменты. Сгенерируйте и скопируйте коды. Затем, вставьте эти коды в головную секцию «head» вашего HTML-документа.

Наконец, нам также понадобится добавить класс no-js в тег «html»:

Этот класс необходим на случай, когда браузер пользователя работает без включенной поддержки javascript. Таким образом, мы сможем предоставить запасной вариант при помощи этого класса. Если же поддерживает, то Modernizr автоматически заменит этот класс на просто – js.

И на этом мы завершаем настройку нашего Modernizr.

Работа с классами

Теперь, если мы проинспектируем элемент на веб-странице, вы увидите, что в «html»-тег было добавлено много CSS-классов. Эти классы генерируются в Modernizr, и отличаются в зависимости от способностей браузера.

Например, если браузер не поддерживает CSS3-анимации, то Modernizr сгенерирует класс no-cssanimations.

Но если поддержка все-таки имеется, скрипт исключит приставку no- и тогда класс превратится в cssanimations.

Давайте посмотрим на отрывок кода, приведенный ниже:

Вышеприведенный код взят из Internet Explorer 7 и, как видно по сгенерированным классам, этот браузер не поддерживает множество прекрасных параметров вроде CSS3 border-radius.

Так что, в случае, когда нам нужно будет заменить закругленные углы на, предположим, изображения с закругленными углами в Internet Explorer 7, нам нужно будет использовать класс no-broderradius.

Если вам интересно, насколько хорош ваш текущий браузер, и какие параметры он поддерживает, вы можете воспользоваться специальным инструментом тестирования, представленным в Modernizr. Откройте страницу ( Modernizr Test Suit ), и вам сразу станет доступен результат.

Тестирование способностей браузера

Далее, как мы уже отметили выше, Modernizr был разработан для определения или тестирования способностей браузера. Чтобы протестировать браузер, мы можем использовать следующий код:

Предположим, что нам нужно протестировать, поддерживает ли браузер WebGL :

Мы также можем инвертировать выражение, и тогда получим обратный результат. То есть «true», если браузер не поддерживает этот параметр.

Или, если нам нужно запускать разные скрипты в зависимости от результатов тестирования, мы также можем расширить код следующим образом:

Вышеприведенный код определяет, что если браузер поддерживает WebGL, то будет запущен Скрипт А, если же нет, то будет запущен Скрипт Б. Таким образом, скрипт будет загружаться только тогда, когда поддержка в браузере отвечает требованиям.

Сегодня мы также хотим рассмотреть еще одно свойство Modernizr — ‘Modernizr.load’. ‘Modernizr.load’ представляет собой условный подгрузчик ресурсов (CSS и JS), основанный на Yepnope . Давайте рассмотрим следующий код:

Наподобие предыдущего раздела, в вышеприведенном примере, мы запускаем тест, чтобы проверить, поддерживает ли браузер пользователя WebGL. Если результат положительный (поддерживает), то мы загружаем three.js , но если ответ отрицательный (не поддерживает), то мы загружаем jebgl.js .

В случае, когда нам нужно только одно условие для загрузки скрипта, мы можем исключить другие условия. Следующий пример показывает, как мы загружаем placeme.js , если пользовательский браузер не поддерживает атрибут placeholder, и мы не загружаем ничего, если поддержка имеется.

Такая практика сможет гарантировать, что пользователи вашего сайта получат более приятный опыт взаимодействия, и им не придется загружать не нужные им ресурсы.


Чтобы лучше понять процесс использования Modernizr.load, мы рекомендуем вам ознакомиться с официальной документацией, либо вы можете воспользоваться документацией Yepnope .

Modernizr уже проделал огромную работу и сэкономил кучу нашего времени, поэтому нет никаких причин не использовать эту javascript-библиотеку, когда вы работаете с кодом HTML5 и CSS3, особенно когда вам нужно залатать разрыв между новыми технологиями и старыми версиями браузеров.

Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Modernizr: практическое применение

Modernizr — это JavaScript-библиотека, которая узнаёт, что из HTML5 и CSS3 умеет браузер пользователя. Определяя возможности браузера, разработчик может сделать откат некоторых функций для старых версий браузеров. Создатели Modernizr называют такую проверку feature detection, и это гораздо эффективнее, чем просто определить браузер, его версию и ОС.

Я был премного удивлён факту отсутствия развёрнутой статьи об этой JS-библиотеке (анонс не в счёт). Статья составлена из перевода официальной документации проекта, переводов нескольких статей и собственных дополнений.

Первый шаг

Для начала нужно получить свежую версию библиотеки с её официального сайта: Modernizr Download Builder.
Укажи галочками те технологии, тесты которых собираешься проводить, затем создай свою персональную версию библиотеки кнопкой «Generate». Если проставить все галочки, получившегося кода хватит на пару экранов небольшого ноутбука – всего 15 КБ.
Затем просто подключи его к своей странице и проверь, как оно. Если всё работает, у элемента HTML должны появиться многочисленные классы:

Как можно легко догадаться: что добавлял галочками в библиотеку, те тесты и будут выполнены при подключении Modernizr, а потом добавлены классы в зависимости от браузера. Но не забудьте дать элементу HTML класс no-js , чтобы опираться на него, когда JS у клиента не включен.
Уже на этом этапе можно создавать очень эффективные таблицы стилей, например:

Думаю, фантазия опытного верстальщика подскажет примеры более красочные и развёрнутые.

Тесты

Проверка на присутствие той или иной технологии в браузере – тест.
На тесты, которые проводит Modernizr, можно цеплять события. Тест пройден — зацепка yep , не пройден — nope . Очень мило.

yep – подключаю сценарий, использующий геолокационные возможности браузера.
nope – пытаюсь обойтись без них в geo-polyfill.js.

Говорят, что вот так тоже можно делать:

А почему бы и нет?

Вот пример посложнее:

Не так уж и сложно, верно?
и не придирайтесь к слову “поли-заполнитель” – MicroSoft отлично его перевели.

Одна из крутых возможностей Modernizr.load – возможность выстроить подключаемые сценарии в очередь. Многим это может ни о чём не говорить, но пользователи HTML5 Boilerplate скорее всего знакомы с запасным jQuery из Google CDN. Выглядит как-то так:

Работает так: сначала пытается загрузить jQuery в сценарии, а затем – сразу же после, проверяя, что объект jQuery доступен. Если нет, то пытается загрузить локальную копию jQuery. Это не так-то уж и просто, и Modernizr.load спешит на помощь. Следуй вот такой логике, и он возьмёт в свои руки порядок подключения сценариев:

Замечание: используй этот метод лишь для откатов, потому как последовательная загрузка сценариев вместо параллельной может сильно ударить по быстродействию.

Расширяемость

Очень кстати разработчики Modernizr дали возможность расширять библиотеку самостоятельно с помощью Modernizr.addTest .
Простейший пример:

В документации есть раздел «Extensibility», посвящённый расширяемости, где всё подробно описано. А в проекте на GitHub’е есть папка, куда складывают все годные пользовательские расширения: /feature-detects/.

Поддержка браузеров

IE6+, Firefox 3.5+, Opera 9.6+, Safari 2+, Chrome. На мобильных устройствах – Mobile Safari на iOS, Webkit на Android’s, Opera Mobile, Firefox Mobile и есть большие надежды на поддержку Blackberry 6+.

Заключение

Отличное подспорье для проектов с плюс-минус широкой аудиторией, когда хорошая поддержка важнее времени загрузки и исполнения страницы. Впрочем, если знать меру – можно и на простые одностраничные сайты его вешать, просто для удобства или даже за делом.
Modernizr используют в довольно крупных компаниях: twitter, Google, Microsoft.

Поддержка функций и полифилы

Создание сайта может быть чрезвычайно полезным и одновременно разочаровывающим. Основные расстройства возникают от попыток получить сайт, который одинаково выглядит и работает в любом браузере. Все фронтенд-разработчики расстраиваются по этому поводу в тот или иной момент.

По правде говоря, веб-сайты не должны выглядеть или работать одинаково в любом браузере. Насколько точно веб-сайт работает в каждом браузере — тем определяется и ваш уровень комфорта для данного сайта. Если сайт получает меньше полпроцента трафика от Internet Explorer 6, то может иметь смысл отказаться от его поддержки. Если полпроцента по-прежнему содействует тысячам долларов в продажах, поддержка должна быть обязательной. Определите, что является приемлемым для данного сайта и отталкивайтесь от этого.

Есть несколько общих методов, как получить сайты, работающие должным образом во всех браузерах, некоторые из которых уже были описаны в данном руководстве. При включении свойств CSS3 рекомендуется использовать запасной вариант для поддержки старых браузеров. Другие методы включают HTML5 Shiv и полифилы. Вообще говоря, это небольшие плагины JavaScript, которые добавляют поддержку для запрошенного набора функций, изначально не поддерживаемых конкретным браузером.

HTML5 Shiv

HTML5 Shiv был создан Реми Шарпом, чтобы обеспечить возможность использовать элементы HTML5 в версиях Internet Explorer 8 и ниже. HTML5 Shiv не только создаёт поддержку элементов HTML5, но и позволяет оформлять их надлежащим образом с помощью CSS.

Топ-пост этого месяца:  Linkedin — что это такое и как ЛинкедИн может помочь в поиске работы вашей мечты

HTML5 Shiv должен быть загружен с Google, где Реми поддерживает последнюю версию, а затем размещён на вашем сервере. Для лучшей производительности ссылайтесь на JavaScript-файл внутри документа, после любых ссылок на таблицы стилей. Кроме того, вам надо ссылаться на файл внутри условного комментария, убедившись в том, что файл загружается только в версиях Internet Explorer 8 и ниже.

В этом случае условный комментарий выглядит как . .

Кроме того, когда новые элементы HTML5 создаются с помощью HTML5 Shiv, любые блочные элементы должны быть определены и обновлены с помощью декларации display: block .

И, наконец, Internet Explorer 8 и 9 неправильно определяют стили для некоторых строчно-блочных элементов HTML5. Как и прежде, эти стили должны быть указаны явно. После чего все версии Internet Explorer должны хорошо работать с любыми новыми элементами HTML5.

Определение функций браузера

Ссылка на HTML5 Shiv хорошо работает с условным комментарием, потому что намерение состоит в том, чтобы ориентироваться на конкретные браузеры, которые не поддерживают новые возможности и элементы HTML5. Кроме этого существует способ обеспечить поддержку определённых функций HTML5 и CSS3, независимо от того, какой браузер используется.

Определение функций, предлагаемое Modernizr, обеспечивает способ написания CSS и JavaScript на основе того, поддерживает браузер или нет конкретную функцию. К примеру, если браузер поддерживает скруглённые уголки, Modernizr добавит класс borderradius к элементу . Если браузер не поддерживает скруглённые уголки, Modernizr добавит к класс no-borderradius .

Загрузка Modernizr

Чтобы получить определение функций с Modernizr и запустить их в работу, просто посетите страницу загрузки и настройте, какие функции вы хотите определять или используйте версию для разработчиков. Чаще всего версия для разработчиков подходит лучше всего, однако если вы рассматриваете поддержку единственной функции, пользовательская сборка будет более подходящей. После скачивания загрузите файл JavaScript на сервер и ссылайтесь на него внутри вашего HTML-документа, ниже всех таблиц стилей.

Стоит отметить, что Modernizr может быть сконфигурирован так, чтобы включать HTML5 Shiv, в этом случае на него не нужно ссылаться после Modernizr.


Применение условных стилей

После того, как Modernizr установлен и работает, могут применяться стили CSS на основе того, поддерживает ли браузер данную функцию. Modernizr определяет большинство свойств и значений CSS3, их все можно найти в документации Modernizr.

Если вам нужно определение функций для некоторых стилей, примите во внимание один момент. К примеру, для значения цвета RGBa можно легко включить запасной вариант с шестнадцатеричным значением без использования определения функций. Когда принимается решение об использовании определения функций, важно сохранить стили организованными и помнить о производительности. Избегайте при возможности дублирования любого кода или создания дополнительных HTTP-запросов.

Демонстрация определения функций

В приведённой выше демонстрации кнопка наследует некоторые стили по умолчанию. Тем не менее, некоторые стили применяются только в зависимости от того, поддерживается или нет градиентный фон CSS3. В этом случае также включены скруглённые уголки и тень блока в условные стили. Браузеры, которые поддерживают градиенты, получат градиент, скруглённые уголки и тень под блоком. Браузеры, которые не поддерживают градиенты, получат изображение со всеми этими стилями. С помощью этого кода ни один из стилей не будет переписан и HTTP-запрос происходит только при необходимости.

При работе с определением функций CSS3, сложно сказать, как стили будут выглядеть в браузерах, которые не поддерживают возможности CSS3. К счастью, есть букмарклет с названием deCSS3, который отключает какие-либо возможности CSS3. Это позволяет увидеть, как веб-сайт будет выглядеть без CSS3 и как ваши условные стили работают. Чтобы быстро получить представление о том, что каждый браузер поддерживает, посетите haz.io через ваш браузер.

Условная загрузка файлов

Вдобавок к условной загрузке стилей, Modernizr также предоставляет возможность условной загрузки файлов, основываясь на поддержке функций. При этом могут быть загружены полифилы на JavaScript на основе определения функций. Modenizer с помощью yepnope.js может быть сконфигурирован для включения загрузчика ресурсов Modernizr.load .

Загрузчик ресурсов Modernizr.load протестирован для большинства возможностей HTML5 и CSS3, которые могут быть определены в условии test . Если условие проходит, загружаются любые файлы, указанные в блоке yep . Если условие не пройдено, загружаются любые файлы, указанные в блоке nope . Оба блока yep и nope являются необязательными, но, по меньшей мере, один из них должен быть указан. Создание этих вариантов позволяет вам загружать файлы только на основе того, включено или выключено конкретное условие.

Одной удивительной особенностью загрузчика ресурсов Modernizr.load является то, что он может загружать внешние файлы, причём не только JavaScript, но и CSS.

Несколько файлов могут быть эффективно загружены с помощью нескольких условий за счёт применения операторов && и ||. Оператор && соответствует логическому И, в то время как оператор || соответствует логическому ИЛИ. В следующем примере используются несколько условий для загрузки разных файлов, при этом загружая только необходимые файлы за один раз. Если поддержка атрибута autofocus или CSS-анимации недоступна, тогда загружается библиотека jQuery. Если доступна поддержка для каждой отдельной функции, то загружаются отдельные полифилы.

Крис Койер написал руководство по прогрессивному улучшению форм с помощью Modernizr и полифилов, в котором выгодно использует несколько различных операторов для получения профессионального кода.

Условная загрузка на основе медиа-запросов

Одним интересным условием, которое Modernizr можете проверить, являются медиа-запросы. Это даёт возможность загружать только файлы, основанные на разных условиях медиа-запросов. Отказ от загрузки ненужных файлов может быть чрезвычайно полезен для повышения производительности.

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

Условный запуск скриптов

Вдобавок к условной загрузке файлов, Modernizr также помогает условно запустить JavaScript. Все возможности HTML5 и CSS3, доступные для проверки в загрузчике ресурсов Modernizr.load , также могут быть проверены в скриптах. Например, это может быть отключаемая всплывающая подсказка на мобильных устройствах, потому что там нет возможности навести курсор мыши, вместо того чтобы показывать всплывающую подсказку на экране в виде текста. Скрипт для вызова этих всплывающих подсказок может располагаться в условии Modernizr, запрещая загрузку скрипта на маленьких экранах.

Демонстрация условного запуска скриптов

Выше приведён базовый пример того, как JavaScript может быть запущен на основе условия, заданного в Modernizr. При загрузке страницы, если ширина экрана меньше 800 пикселей, то ничего не происходит. Но если ширина экрана больше 800 пикселей, при загрузке слово «маленький» будет заменено на «большой», основываясь на выполненном JavaScript.

Полифилы для HTML5 и CSS3

В настоящее время существуют полифилы почти для всех разных функций HTML5 и CSS3. Команда Modernizr собрала довольно исчерпывающий список. Эти полифилы могут быть выброшены в случае необходимости.

Те же люди, стоящие за Modernizr, также составили список всех новых функций HTML5 и CSS3, включая инструкции о том, как использовать их соответствующим образом. Поймите, не для всех этих функций нужны полифилы. Некоторые из них могут быть использованы напрямую или с помощью запасного варианта.

Кроссбраузерное тестирование

Пожалуй, самой страшной частью веб-дизайна и разработки является кроссбраузерное тестирование, которое позволяет убедиться, что сайт хорошо работает во всех браузерах. Вообще говоря, более современные браузеры, Chrome, Firefox и Safari, всё делают очень хорошо. Самые крупные подводные камни поджидают в Internet Explorer и тестирование различных версий Internet Explorer может быть сложным.

Есть несколько сервисов, которые помогают с кроссбраузерным тестированием, некоторые интерактивные, другие нет. Те, которые позволяют взаимодействовать с браузером вместо отображения скриншота, гораздо более полезны для отладки кода. Одним из наилучших способов загрузки нескольких версий Internet Explorer является использование нескольких виртуальных машин, каждая из которых содержит свою версию Internet Explorer.

Рис. 9.01. VirtualBox работает на Mac OS X с Internet Explorer с 6 по 9 версии

Microsoft предлагает несколько VirtualPC, которые могут быть использованы исключительно для тестирования. Установка их всех может оказаться сложнейшей задачей. К счастью, Грег Торнтон написал программу автоматической установки для всех этих виртуальных машин. Установка занимает некоторое время, чтобы загрузить все эти разные виртуальные машины и требует приличное количество дискового пространства. Подготовьтесь соответственно, установив только необходимые виртуальные машины и заранее очистив необходимое дисковое пространство. В зависимости от того, насколько часто используются виртуальные машины, может быть стоит установить их на внешнем жёстком диске.

Internet Explorer 8 и выше содержит встроенные средства разработки, к сожалению у версий 7 и ниже такого нет. Веб-инспектор и все другие инструменты отладки, которые мы любим, недоступны в Internet Explorer 7 и ниже. Существует, однако, букмарклет Firebug Lite, который предлагает чрезвычайно полезный инспектор в браузере.

Рис. 9.02. Internet Explorer 7 работает внутри виртуальной машины с букмарклетом Firebug Lite, открытым для отладки

Respond to your user’s browser features.

Modernizr tells you what HTML, CSS and JavaScript features the user’s browser has to offer.

What is Modernizr?

It’s a collection of superfast tests – or “detects” as we like to call them – which run as your web page loads, then you can use the results to tailor the experience to the user.

Топ-пост этого месяца:  Как правильно подключить bootstrap 3 к wordpress

Why do I need it?

All web developers come up against differences between browsers and devices. That’s largely due to different feature sets: the latest versions of the popular browsers can do some awesome things which older browsers can’t – but we still have to support the older ones.

Modernizr makes it easy to deliver tiered experiences: make use of the latest and greatest features in browsers which support them, without leaving less fortunate users high and dry.

Прикручиваем определение поддержки формата APNG к Modernizr

Несмотря на то, что все говорят о возможностях HTML5, такой элементарный элемент дизайна сайта как прелоадер с прозрачностью до сих пор приходится делать с использование Animated GIF. Использование 8-битного анимированного GIF не даёт возможности реализовывать полупрозрачные переходы. В качестве современной альтернативы анимированному GIF можно было бы предположить два конкурирующих формата — MNG и APNG, но MNG не имеет и скорее всего уже никогда не получит нативной поддержки со стороны браузеров, а формат APNG мы уже можем использовать в Firefox и Opera ещё со второй половины 2008 года. К сожалению, Chrome, Safari и Internet Explorer, остались в стороне, для них по прежнему придется использовать угловатые картинки в старом формате GIF. Тем не менее, сегодня у нас есть такая замечательная штука как Modernizr — инструмент перехода к практике определения возможностей браузера, вместо использования порочной практики определения наименования и версии браузера.

Собственно сам APNG Modernizr Test

После нахождения небольшого кусочка javascript-кода определяющего поддержку APNG, мне как-то сразу захотелось прикрутить его к Modernizr, благо у последнего для этого есть специальное простое API:

В зависимости от того поддерживает ли браузер APNG или нет, у тега html появится дополнительный класс apng или no-apng . Из CSS мы можем это использовать так:

Программами, не понимающими анимацию, APNG отображается как статичный PNG.


За эту информацию спасибо моему коллеге SeVit`у.

Правильный способ использования Modernizr для обнаружения IE?

Это может быть глупый вопрос, но я хотел использовать библиотеку Modernizr JS для обнаружения некоторых свойств браузера, чтобы определить, какой контент показывать или не показывать.

У меня есть приложение под названием Pano2VR, которое выводит как HTML5, так и SWF. Мне нужен HTML5 для пользователей устройств iOS.

Однако IE не выводит этот вывод «HTML5» вообще. Кажется, их вывод использует 3D3-преобразования CSS3 и WebGL, один или несколько явно не поддерживаемых в IE9.

Итак, для этих пользователей мне нужно отобразить версию Flash. Я планировал использовать IFRAME и либо пропускал SRC через Modernizr script, либо document.write из кода IFRAME, в зависимости от браузера.

Все это приводит к тому, как я могу использовать Modernizr для обнаружения IE или IE? Или определить для 3D-преобразования CSS?

Или есть ли другой способ сделать это?

Modernizr не обнаруживает браузеры как таковые, он обнаруживает, какая функция и возможности присутствуют, и это весь смысл того, что он пытается сделать.

Вы можете попробовать подключиться к простому обнаружению script, как это, а затем использовать его, чтобы сделать свой выбор. Я включил версию Detection, а также в случае необходимости. Если вы хотите только проверить версию IE, вы можете просто найти навигатор .userAgent со значением «MSIE».

Затем вы можете просто проверить:

Вы можете использовать Modernizr для обнаружения просто IE или не IE, путем проверки поддержки SVG SMIL.

Если вы включили обнаружение функции SMIL в настройке Modernizr, вы можете использовать простой подход CSS и настроить класс .no-smil, который применяется в Modernizr элемент html:

В качестве альтернативы вы можете использовать Modernizr с помощью простого JavaScript-подхода, например:

Помните, что IE/Edge может когда-нибудь поддерживать SMIL, но в настоящее время нет планов сделать это.

Для справки, здесь ссылка на таблицу совместимости SMIL на caniuse.com.

Обнаружение 3D-преобразований CSS

Modernizr может обнаруживать 3D-преобразования CSS, да. Правка Modernizr.csstransforms3d сообщит вам, поддерживает ли браузер их.

Вышеупомянутая ссылка позволяет вам выбрать, какие тесты включать в сборку Modernizr, и там, где вы ищете, есть.

Обнаружение IE специально

В качестве альтернативы, как и user356990, вы можете использовать условные комментарии, если вы ищете только IE и IE. Вместо создания глобальной переменной вы можете использовать HTML5 Boilerplate условный комментарий для назначения класса:

Если вы уже инициализировали jQuery, вы можете просто проверить с помощью $(‘html’).hasClass(‘lt-ie9’) . Если вам нужно проверить версию IE, в которой вы находитесь, вы можете условно загрузить jQuery 1.x или 2.x, вы можете сделать что-то вроде этого:

N.B. IE условные комментарии поддерживаются только до IE9 включительно. Начиная с IE10, Microsoft поощряет использование обнаружения функций, а не обнаружения браузера.

Какой бы метод вы ни выбрали, вы затем проверите с помощью

Ни один браузер не забыт: стратегия внедрения HTML5

Брэндон Сэтром

Исходный код можно скачать по ссылке

В статье рассматриваются:

  • распознавание возможностей браузера;
  • надежное распознавание возможностей с помощью Modernizr;
  • применение «поли-заполнений» (polyfills) в JavaScript для имитации стандартных API;
  • использование Modernizr для поддержки корректного сокращения функциональности (graceful degradation).

В HTML5 много интересного. Благодаря новым средствам CSS, разметке и JavaScript API возможности Web расширяются семимильными шагами. Добавьте к этому упорное стремление всех поставщиков браузеров добиться преимущества, из-за чего список потрясающих функций растет едва ли не ежедневно. В итоге браузеры меняются очень быстро, а веб-разработчики все так же несутся вперед с головокружительной скоростью.

Но сколько бы сообщества веб-разработчиков и поставщики браузеров ни нагоняли ажиотажа вокруг HTML5, подавляющее большинство людей в Web не пользуется новейшими браузерами. Если вы веб-разработчик в крупной «софтверной» компании или на предприятии с большой аудиторией пользователей, то, вероятно, и сами знаете это. Даже если вы работаете в небольшой компании или «стартапе» (начинающей фирме), которая предоставляет какой-то сервис через Web, вы наверняка тратите массу времени на то, чтобы добиться корректной работы своего сайта с максимально большим количеством браузеров и их версий.

Учитывая эти реалии, легко посмотреть на HTML5 под другим углом зрения — не с позиций его готовности к широкому использованию, а с позиций того, готовы ли вы сами к его применению. Например, вы создали страницу с какими-то новыми семантическими тегами (вроде и ), добавили некие новые CSS-стили (скажем, скругление углов и тени) и даже включили элемент для прорисовки логотипа HTML5 на этой странице.

В более новых браузерах наподобие Internet Explorer 9, Firefox 4 и выше или в Google Chrome все это будет визуализировано, как на рис. 1. Но если вы попытаетесь загрузить эту страницу в Internet Explorer 8 или ниже, то получите нечто вроде показанного на рис. 2: напрочь изуродованную страницу.

, отображаемая в Internet Explorer 9″ height=»677″ src=»https://i-msdn.sec.s-msft.com/dynimg/IC531821.png» title=»Семантическая страница со стилями и HTML5-элементом , отображаемая в Internet Explorer 9″ w />
Рис. 1. Семантическая страница со стилями и HTML5-элементом , отображаемая в Internet Explorer 9

» height=»677″ src=»https://i-msdn.sec.s-msft.com/dynimg/IC531822.png» title=»Та же страница, визуализированная в Internet Explorer 8 без стилей и элемента » w />
Рис. 2. Та же страница, визуализированная в Internet Explorer 8 без стилей и элемента

Я не стал бы вас винить, если бы вы, глядя на все это великолепие HTML5 и имея некоторый опыт, сказали, что лучше всего будет просто подождать. Независимо от того, готов HTML5 к широкому внедрению или нет, очень легко прийти к заключению, что он не совсем готов для вас или ваших пользователей.

Прежде чем вы решите еще раз взглянуть на HTML5 году эдак в 2022-м, прошу вас только об одном: прочитайте эту статью до конца. Моя цель — дать вам практические стратегии того, как можно начать внедрение технологий HTML5 уже сейчас, не попав впросак, как на странице, продемонстрированной на рис. 2. В этой статье мы рассмотрим:

  • сравнение распознавания возможностей браузеров и анализа с помощью пользовательского агента [user agent (UA) sniffing];
  • поли-заполнение средствами JavaScript;
  • корректное сокращение функциональности (graceful degradation).

Это даст вам достаточное понимание того, как создавать веб-сайты для широкого круга браузеров. К тому моменту, когда мы закончим, вы получите четкую стратегию внедрения технологий HTML5. У вас также появятся некоторые инструменты, с помощью которых вы сможете постепенно расширять свои сайты для более новых браузеров и в то же время корректно сокращать функциональность для остальных.

Важность распознавания возможностей браузеров

Чтобы обеспечить стабильную и согласованную работу сайта с разными браузерами, разработчикам часто требуется получать информацию о браузере пользователя. Исторически сложилось так, что наиболее популярным способом определения этой информации стал такой вариант на основе JavaScript:

Добавить комментарий