Чем больше узнаешь о возможностях веб-технологий, предоставляемые HTML5 и CSS3 тем больше желание их использовать.
В статье “Практикум – кодирование SharePoint 2010 и HTML5″ показывается, как можно интегрировать эти возможности в сайты SharePoint, использующие IE8.
И при этом возникает потребность в определении способности браузера пользователя поддерживать ту или иную новую технологию. И мечты простираются дальше – хочется иметь способ, который позволил бы заставить этот браузер использовать новую технологию, если она ему доступна, или использовать в замен ее традиционные решения.
Вот для этой цели и служит библиотека Modernizr. Она “на лету” определяет возможности браузера пользователя поддержать ту или иную технологию.
При этом библиотека присваивает проверяемому элементу класс. Если браузер не поддерживает проверяемую технологию – то к заданному наименованию класса добавляется префикс “no”. Например: “.canvas/.no-canvas”.
Сколько у одного элемента будет проверок на наличие каких-то новых свойств, столько будет у этого элемента классов. Класс соответствует свойству. При этом появляется некое загромождение классами, но с этим неудобством можно примириться.
Библиотека дает возможность также использовать яваскриптовый объект Modernizr, содержащий много булевых свойств, на основании которых можно судить о поддержке той или иной технологии HTML5 и CSS3.
Этот объектсодержит детальную информацию о поддерживаемых функциях. Например: Modernizr.video.h264 – говорит о поддержке видео и о поддержке конкретного кодека и т.д.
Ценность этой библиотека в том, что она дает возможность уже сегодня использовать элементы HTML5, причем использовать их кроссбраузерно, в том, что она дает возможность на лету определить, поддерживается то или иное свойство или метод этим конкретныым используемым браузером и в зависимости от результатов проверки или использовать те или иные стили или выполнить какие-то действия.
Приятно, когда мечты сбываются! Дополнительно эту библиотеку можно использовать вместо html5shiv, чтоб можно было использовать новые структурные элементы из HTML5, хотя, конечно с его помощью в IE6-8 теги audio, video и svg работать не будут.
Для использования – надо взять последнюю версию библиотеки с её официального сайта, отметить те технологии, которые предполагается проверить, затем создется своя версию библиотеки кнопкой «Generate». Затем библиотека подключается к странице и, если всё работает, у элемента HTML должны появиться многочисленные классы:
<html class="js flexbox flexbox-legacy canvas canvastext no-webgl no-touch geolocation postmessage websqldatabase no-indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths"><html class="js flexbox flexbox-legacy canvas canvastext no-webgl no-touch geolocation postmessage websqldatabase no-indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths">
Теперь можно в таблице стилей писать, например, так:
.multiplebgs selector { background-image: url('image.png') center 10px no-repeat, url('background.png'); } .no-multiplebgs selector { background-image: url('image.png') center 10px no-repeat lightgray; }
.multiplebgs selector {
background-image: url('image.png') center 10px no-repeat, url('background.png');
}
.no-multiplebgs selector {
background-image: url('image.png') center 10px no-repeat lightgray;
}При проведении проверки на наличие той или иной технологии в браузере Modernizr, на проверку можно цеплять события. Тест пройден — выполняется yep, не пройден — nope.
Modernizr.load({
test: Modernizr.geolocation,
yep : 'geo.js',
nope: 'geo-polyfill.js'
});Modernizr.load({
test: Modernizr.geolocation,
yep : 'geo.js',
nope: 'geo-polyfill.js'
});yep – подключаем сценарий, использующий геолокационные возможности браузера.< /p>
nope – обходимся без них в скрипте geo-polyfill.js.
Включение библиотеки Modernizr в SharePoint
Подключение Modernizr библиотеки в SharePoint сайт просто.
- Скачиваем последнюю версию библиотеки Modernizr от www.modernizr.com.
- Отмечаем нужные элементы проверки, включаем Modernizr.load.
- Добавляем полученную пользовательскую библиотеку Modernizr на ваш сайт SharePoint. В моем случае я поместил это в /Style Library/html5/scripts, и назвал мою собственную библиотеку modernizr.custom.js .
включите:
- Откройте custom master page и в разделе head добавьте тег script, относящийся к библиотеке Modernizr. По умолчанию библиотека Modernizr включает в себя скрипт html5shiv/html5shim, поэтому, если присутствует ссылка на html5hiv/html5shiv, то ее надо удалить.
- Теперь можно использовать библиотеку Modernizr.
Например, проверка поддержки audio:
if (Modernizr.audio) {
var audio = new Audio();
audio.src = Modernizr.audio.ogg ? 'background.ogg' :
Modernizr.audio.mp3 ? 'background.mp3' :
'background.m4a';
audio.play();
} if (Modernizr.audio) {
var audio = new Audio();
audio.src = Modernizr.audio.ogg ? 'background.ogg' :
Modernizr.audio.mp3 ? 'background.mp3' :
'background.m4a';
audio.play();
} А вот тест-проверка поддержки canvas:
Modernizr.load([
{
test : Modernizr.canvas,
nope : ['canvas-polyfill.js', ‘canvas-polyfill.css']
}
]);Modernizr.load([
{
test : Modernizr.canvas,
nope : ['canvas-polyfill.js', ‘canvas-polyfill.css']
}
]);Если поддержка есть, подключается один скрипт, нет – грузится другой скрипт и другой CSS файл.
Можно, например, сделать невидимыми теги видео, если элемент video недоступен. Добавьте следующие строки в таблицу стилей:
html.no-video video {
display: none;
} html.no-video video {
display: none;
}Полный список свойств, доступных для проверки, можно найти в документации Modernizr, также в интернете можно найти учебник по этому простому, но мощному инструменту.
Modernizr — тщательно протестированная, отказоустойчивая и широко применяемая библиотека.
Рубрика: 
Комментарии