Modernizr — HTML5 и CSS3 уже сегодня
Прогресс не остановить! HTML5 и CSS3 уверенным шагом идут по просторам интернета. В то же время требования кроссбраузерности (в том числе и поддержку старых версий браузеров) никто не отменял.
Получается нестыковочка. С одной стороны, я хочу использовать новые мощные web-технологии. С другой стороны игнорировать посетителей со старыми браузерами нельзя! Да и среди новых браузеров поддержка HTML5 и CSS3 далеко не такая полная, как хотелось бы. Как же быть?
Вот если бы существовал способ налету проверять браузер на поддержку той или иной новой технологии, или, еще лучше, просто и удобно разделить стили по принципу «если ты понимаешь CSS3-фишку, используй ее, а если нет — вот тебе старое решение».
Что-то типа такого:
/* красивый выпуклый текст */ ДляТехКтоПонимаетCSS3 h1 < background: #999; color: #999; text-shadow: 1px 1px 3px #666, -1px -1px 3px #FFF, 1px 1px #666, -1px -1px #FFF; >/* для непонимающих браузеров заменяем картинкой */ ДляТехКтоНеПонимаетCSS3 h1 < background: url(img/pic.png) no-repeat; text-indent:-9999px; >
Эх! Мечты-мечты… А, нет! Не мечты. Реальность!
Modernizr — тест браузера на способности
Modernizr — это js библиотека, позволяющая на ходу определить поддержку web-технологий нового поколения. Реализовано два варианта проверок.
Можно ссылаться на заранее определенный класс (который автоматически присваивается элементу HTML). Этот класс будет отличаться для браузеров поддерживающих или не поддерживающих ту или иную фишку. Различие будет в префиксе «.no-«. Например «.multiplebgs/.no-multiplebgs» (перечень классов приведен ниже). Это как раз тот вариант, который я только что описывал в виде мечты. Приятно, черт возьми, когда мечты сбываются!
Второй вариант — использовать созданный плагином объект JavaScript, который называется Modernizr и содержит массу булевых свойств, сигнализирующих о поддержке конкретных HTML5 и CSS3 технологий.
HTML5 и IE
Приятное дополнение — Modernizr учит IE понимать основные элементы HTML5. Принцип такой же, как у html5shiv. Поэтому не стоит ждать чудес. Теги , и в IE6-8 не заработают. Тем не менее, использовать структурные теги типа или вполне можно.
Пример работы
Что-то вступительная речь затянулась. Пора и делом заняться. Итак, как же все это выглядит на практике?
Что качать?
- (9 Kb) — собственно библиотека.
Быстрый старт
Да вот, собственно, и все. Никакой дополнительной инициализации не требуется. Все возможности modernizr уже можно юзать.
Попробуем. Воплотим мечту. Перепишем пример про text-shadow, так чтобы он стал рабочим:
/* красивый выпуклый текст */ .textshadow h1 < background: #999; color: #999; text-shadow: 1px 1px 3px #666, -1px -1px 3px #FFF, 1px 1px #666, -1px -1px #FFF; >/* для непонимающих браузеров заменяем картинкой */ .no-textshadow h1 < background: url(img/pic.png) no-repeat; text-indent:-9999px; >
А теперь подробнее
Только что приведенный CSS сработает правильно, так как плагин действительно автоматически поставит нужный класс для элемента HTML. Например, твой код может выглядеть так:
Сколько проверок новых технологий, столько и классов. Конечно, получилось немного громоздко, но, с другой стороны, это очень скромная плата за удобство. Не забудь, классы добавляешь не ты, а скрипт!
Пример со скриптами
Как говорилось выше, кроме списка классов, Modernizr создает JavaScript объект. Давай посмотрим, как его использовать.
Например, нужно подключить нестандартный шрифт. Для этого воспользуемся @font-face, а для непонимающих его браузеров подключим cufon. Напишем простое условие:
if (!Modernizr.fontface) < getScript('cufon.withfont.min.js',function()< Cufon.now(); >); >
Таблица проверяемых технологий HTML5/CSS3
| CSS3/HTML5 свойства и методы | JavaScript значение | название класса |
|---|---|---|
| @font-face | Modernizr.fontface | .fontface .no-fontface |
| Canvas | Modernizr.canvas | .canvas .no-canvas |
| Canvas Text | Modernizr.canvastext | .canvastext .no-canvastext |
| WebGL | Modernizr.webgl | .webgl .no-webgl |
| HTML5 Audio | Modernizr.audio | .audio .no-audio |
| HTML5 Audio форматы | Modernizr.audio[format] Например Modernizr.audio.mp3 |
— |
| HTML5 Video | Modernizr.video | .video .no-video |
| HTML5 Video форматы | Modernizr.video[format] Например Modernizr.video.avi |
— |
| rgba() | Modernizr.rgba | .rgba .no-rgba |
| hsla() | Modernizr.hsla | .hsla .no-hsla |
| border-image: | Modernizr.borderimage | .borderimage .no-borderimage |
| border-radius: | Modernizr.borderradius | .borderradius .no-borderradius |
| box-shadow | Modernizr.boxshadow | .boxshadow .no-boxshadow |
| text-shadow | Modernizr.textshadow | .textshadow .no-textshadow |
| Multiple backgrounds | Modernizr.multiplebgs | .multiplebgs .no-multiplebgs |
| background-size | Modernizr.backgroundsize | .backgroundsize .no-backgroundsize |
| opacity: | Modernizr.opacity | .opacity .no-opacity |
| CSS Animations | Modernizr.cssanimations | .cssanimations .no-cssanimations |
| CSS Columns | Modernizr.csscolumns | .csscolumns .no-csscolumns |
| CSS Gradients | Modernizr.cssgradients | .cssgradients .no-cssgradients |
| CSS Reflections | Modernizr.cssreflections | .cssreflections .no-cssreflections |
| CSS 2D Transforms | Modernizr.csstransforms | .csstransforms .no-csstransforms |
| CSS 3D Transforms | Modernizr.csstransforms3d | .csstransforms3d .csstransforms3d |
| Flexible Box Model | Modernizr.flexbox | .flexbox .no-flexbox |
| CSS Transitions | Modernizr.csstransitions | .csstransitions .no-csstransitions |
| Geolocation API | Modernizr.geolocation | .geolocation .no-geolocation |
| Input Types | Modernizr.inputtypes[type] например Modernizr.inputtypes.date |
— |
| Input Attributes | Modernizr.input[attribute] например Modernizr.input.placeholder |
— |
| localStorage | Modernizr.localstorage | .localstorage .no-localstorage |
| sessionStorage | Modernizr.sessionstorage | .sessionstorage .no-sessionstorage |
| Web Workers | Modernizr.webworkers | .webworkers .no-webworkers |
| applicationCache | Modernizr.applicationcache | .applicationcache .no-applicationcache |
| SVG | Modernizr.svg | .svg .no-svg |
| Inline SVG | Modernizr.inlinesvg | .inlinesvg .no-inlinesvg |
| SVG Clip Paths | Modernizr.svgclippaths | .svgclippaths .no-svgclippaths |
| SMIL | Modernizr.smil | .smil .no-smil |
| Web SQL Database | Modernizr.websqldatabase | .websqldatabase .no-websqldatabase |
| IndexedDB | Modernizr.indexeddb | .indexeddb .no-indexeddb |
| Web Sockets | Modernizr.websockets | .websockets .no-websockets |
| Hashchange Event | Modernizr.hashchange | .hashchange .no-hashchange |
| History Management | Modernizr.history | .history .no-history |
| Drag and Drop | Modernizr.draganddrop | .draganddrop .no-draganddrop |
| Cross-window Messaging | Modernizr.postmessage | .postmessage .no-postmessage |
| Touch (прикосновение к сенсорному экрану) | Modernizr.touch | .touch .no-touch |
Функция тестирования
Разработчики позаботились и о расширяемости. Если нужно протестить какую-то фишку, которую Modernizr пока не тестирует, можно использовать специальную функцию Modernizr.addTest(str,fn).
Например, протестируем поддержку position: fixed (тест должен дать отрицательный результат для IE6):
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; >);
Тестируем свой браузер
Демо-пример позволяет проверить твой браузер на поддержку HTML5/CSS3, а заодно покажет действие Modernizr в работе (в том числе и кроссбраузерное использование HTML5 тегов и ).
Выводы
Данная библиотека позволяет уже сегодня кроссбраузерно использовать некоторые элементы HTML5, а также на лету определять поддержку того или иного метода/свойства браузером, и, в зависимости от результата, применять нужные стили или выполнять определенные действия.
Материал
- Официальный сайт Modernizr
- AJAX
- AJAX запрос
- Отмена AJAX-запроса
- CSS3 PIE
- Explorer Canvas
- html5shiv — HTML5 теги для IE
- IE и динамическая вставка canvas
- jQuery-Placeholder — замещающийся текст
- Modernizr — HTML5 и CSS3 уже сегодня
- PIE для скрытых или динамических элементов
- FancyBox — галерея и модальное окно
- Highslide JS — фотогалерея
- JCarouselLite. Прокрутка слайдов
- Spacegallery — эффектная 3D галерея
- Галерея jQuery ColorBox
- Галерея jQuery lightBox
- Галерея с неравномерным шагом
- Забавная галерея Tiny Circleslider
- Листалка слайдов Tiny Carousel
- Слайдер Coin Slider
- Слайдер jQuery Cycle
- Drag-n-Drop загрузка файлов
- jQuery UI Slider — ползунок выбора диапазона
- jQuery UI Slider — усложненный вариант выбора диапазона
- JScrollPane 2 — настраиваемый скроллбар
- JScrollPane. Делаем красивый скроллинг
- Masked Input Plugin
- Tiny Scrollbar — настраиваемый скроллбар
- UI resizable — изменение размеров
- ZeroClipboard — копируем в буфер
- Zoomy — лупа на jQuery
- Группируем инпуты
- Интерактивная SVG-карта на Raphael
- Плагин jQuery cloud-zoom (лупа)
- Плагин jQuery drag из набора Interface
- Плагин jQuery EasyDrag — проще не бывает
- Скрываем окно по клику снаружи
- CSS Multi Column
- Определение браузера и его версии
- Позиционирование блока по центру с учетом скрола
- Фиксированный блок с изменяющимся отступом сверху
- Кэширование Ajax-запросов
- Оптимизация DOM анимации
- Оптимизация jQuery.animate
- Почему jQuery лучше грузить с Google
- Программная анимация
- autoResize: textarea подстраивается под высоту текста
- cuText — нестандартный textarea на JQuery
- Фильтрация и проверка данных полей
- Изображения
- Блюр
- Вкладки и кнопка Back
- Выпадающее окошко с задержкой
- Диагональ к выпавшему меню
Modernizr — бархатный путь в HTML5
Очевидно, что нам необходим инструмент, решающий проблемы совместимости браузеров и новых технологий. И такой инструмент уже есть!
Modernizr — это небольшая библиотека JavaScript, распространяемая по лицензии MIT & BSD, призванная разрешать конфликты, вызванные разной степенью поддержки браузерами технологий HTML5 (canvas, аудио, видео, локальные хранилища и т. д.) и CSS3 (градиент, border-radius, трансформации). В настоящее время библиотека поддерживает свыше 40 различных технологий, и этот список открыт для пополнения.
Для работы с библиотекой прежде всего следует генерировать нужную конфигурацию Modernizr на сервере программы http:// modernizr. com/download/ (рис. 4). После выбора необходимых опций будет сгенерирован JavaScript-код, который следует сохранить в файл modernizr. min. js (при этом будет сформирована ссылка вида Http://www. modernizr. com/download/#-applicationcache-canvas-Canvastext-draganddrop-hashchange-history-audio-video-indexeddb — input-geolocation-inlinesvg-smil-svg-svgclippaths-touch-webgl-shiv — cssclasses-teststyles-hasevent-prefixes-domprefixes-load, перейдя по которой, можно воспроизвести процедуру генерации).
Рис. 4. Создаем собственную конфигурацию Modernizr
Использовать Modernizr очень просто. Достаточно подключить библиотеку к странице:
Все, более ничего не требуется, все функции теперь доступны. Если мы посмотрим нашу страницу посредством Mozilla Firebug или аналогичной программы, то обнаружим, что к тегу было добавлено множество классов (по классу на каждое свойство, проверку которых мы выбрали при генерации библиотеки):
Естественно, названия классов будут содержать или не содержать частицу «no-» в зависимости от того, поддерживает ли конкретный API используемый браузер. Как видите, с HTML5 элементом canvas и с geolocation API проблем в приведенном примере нет, чего не скажешь про поддержку технологий WebGL или indexeddb (я специально использую тут относительно древний FireFox 3.6).
Как с этим работать? Да очень просто — modernizr определил классы, нам осталось их использовать — например, задать в CSS-таблицах различные способы показа для поддерживаемых и неподдерживаемых элементов:
Background: url(”images/button. png”);
Background-image: linear-gradient(top, #555, #333);
Так мы задаем линейный градиент некоего элемента — в случае поддержки подобной технологии браузером — и заменяем его фоновой картинкой в противном случае. Таким образом, для корректного отображения страниц нам во многих случаях может вообще не понадобиться никакого дополнительного кода — только подключение moderizr.
Кстати, если продолжим исследовать созданный нами документ, то обнаружим, что модернизация страницы не ограничивалась дополнительными классами — у нас теперь появилась встроенная CSS:
Article, aside, details, figcaption,
Figure, footer, header, hgroup, nav, section
Тут modernizr пытается показать в пристойном виде элементы, поддержка которых может быть недостаточна.
Самый простой и, наверное, востребованный способ использования библиотеки — прямая проверка поддержки используемых технологий. Например, так мы можем удостовериться, поддерживает ли наш браузер элемент canvas:
If (Modernizr. canvas)
Alert(”canvas API доступен”);
Alert(”canvas API не доступен”);
Но это, правда, очень упрощенный случай, общий способ использования библиотеки примерно такой:
Test: Modernizr. geolocation && Modernizr. canvas, yep : [‘app. js’, ‘app. css’], nope: ‘app-polyfill. js’, both : [ ‘foo. js’, ‘style. css’ ], complete : function () < myApp. init():
Modernizr. load — это своеобразный загрузчик ресурсов (файлов с javaScript-сценариями и css-таблицами). В секции test перечисляются проверяемые технологии, затем в случае успешной проверки загружается сценарий и css из секции yep, в противном случае — из секции nope.
Ресурсы, перечисленные в секции both, будут загружены в обоих случаях, а функция из complete запустится после того, как все необходимые ресурсы будут загружены.
Нетрудно заметить, что, помимо проверок Modernizr. load, вносит в запуск веб-приложения некоторую, довольно полезную упорядоченность и структурированность. Проверять можно неприличие не только специфичных для Modernizr/HTML5 объектов, но и обычных DOM-элементов, нативных или загруженных другими средствами (например, window. JSON, window. jQuery).
Одной из интересных возможностей является выстраивание очередей — превращение серии предложенных load в полноценный диспетчер загрузки:
Хотя злоупотреблять подобными конструкциями не следует — тяжеловато.
Вернемся к секции nope — нам предполагается загрузить некий сценарий app-polyfill. js. Честно пытаясь перевести термин polyfill на русский язык, я потерпел неудачу, поэтому давайте обойдемся без перевода. Polyfill — это кроссраузерный код, который добавляет недостающий функционал в старые браузеры. Иногда реализация таких сценариев — весьма нетривиальная задача, но, счастью, эта задача, скорее всего, уже решена за вас. На сайте проекта (http s://git hub. com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills) можно выбрать и в случае необходимости подогнать под себя нужный из довольно большого структурированного списка (рис. 5).
Рис. 5. Выбираем нужный Polyfills
Для совсем комфортной работы с «полифилами» (да и вообще с проблемами функциональной совместимости) можно порекомендовать отличный сервис html5please (Http://html5please. com/), который может сам провести проверку и дать рекомендации по «страховке» кода (рис. 6).
Рис. 6. HTML5 Please подсказывает решение проблем
Впрочем, это еще не все. Библиотека, несмотря на свой небольшой размер (она даже в полной комплектации занимает чуть более 15 Кб), довольно удачно спроектирована и имеет удобный механизм расширения — метод Modernizr. addTest(). Применяется он следующим образом:
Modernizr. addTest(‘bar’, function()
Var foo = document. createElement(‘foo’); return typeof foo. addBar === ‘function’
Наверное, пример слишком абстрактен, но основной механизм проиллюстрирован. Все, правда, так просто. Модель разработки modernizr открыта, и все стоящие расширения принимаются в репозиторий (в структуре проекта на GitHub).
В заключение мо жно упомянуть, что modernizr используют Twitter, Google, Microsoft (в пакете ASP. NET MVC 3 Tools Update Modernizr поставляется в комплекте с новыми приложениями ASP. NET MVC) и множество других компаний. Так что нам тоже не грех.
Вам также могут быть интересны следующие статьи:
- Условная загрузка с помощью Modernizr
- Пользовательская веб-типографика
- Библиотеки
- Modernizr
- За каждый пиксель!
Respond to your user’s browser features.
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.
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.
Getting Started
- Modernizr explained
- What is feature detection?
- Using Modernizr with JavaScript
- Using Modernizr with CSS
Latest News
- Modernizr 3.5.0
- Modernizr 3.4.0
- Modernizr 3.3.1
- Modernizr 3.3.0
Что такое Modernizr и как с ним работать
Очень часто говорят, что при разработке программного обеспечения есть только одна константа – изменения. В среде веб-разработки есть еще одна постоянная – браузер несоответствий. Одной из самых больших проблем в веб-приложениях является постоянный рост количества платформ, браузеров и устройств.
Как же веб-дизайнеру или разработчику узнать будет ли работать определённая функция на целевых платформах и браузерах?
Ответом на этот вопрос является Modernizr, библиотека на JavaScript с открытым исходным кодом, позволяющая определять поддержку различных свойств . Modernizr предоставляет широкий спектр решений для веб-дизайнеров и разработчиков, чтобы пользоваться новыми возможностями HTML5 и CSS3, несмотря на различную поддержку браузерами.
Установка Modernizr
Первым шагам является, конечно, загрузка Modernizr. Доступны два варианта для скачивания, либо полная версия Modernizr, либо создание пользовательской версии, которая будет включать в себя только те функции, которые вы собираетесь использовать. Поскольку эту библиотеку необходимо размещать в начале страницы, лучше осуществлять ручную настройку при скачивании. Тем не менее сейчас мы скачаем полную версию, которая поддерживает все возможные функции:
Чтобы установить Modernizr необходимо добавить скрипт для каждой страницы, которая будет его использовать. Вот основной документ HTML5: