Modernizr

Modernizr.

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

Для решения этой проблемы была разработана небольшая библиотека под названием Modernizr. Эта библиотека создает объект с именем Modernizr, включающий в себя свойства для каждой из возможностей HTML5. Эти свойства возвращают булево значение true или false в зависимости от того, доступна ли соответствующая возможность.

Данная библиотека поставляется с открытым кодом, она написана на языке программирования JavaScript, и вы можете бесплатно загрузить ее с веб-сайта http://www.modernizr.com. Всего лишь скопируйте на свой компьютер файл JavaScript и добавьте его в заголовок документа, как в следующем примере.

Листинг З.1. Добавление библиотеки Modernizr в документ

<!DOCTYPE html>

<html lang="ru">

<head>

<title>Modernizr</title>

<script src="modernizr. min. js"></script>

<script src="modernizr. js"></script>

</head>

<body>

<section id="databox"> содержимое </section>

</body>

</html>

Файл под названием modernizr. min. js — это копия файла с библиотекой Modernizr, который мы загрузили с сайта создателей Modernizr. Второй файл, указанный в «голове» HTML-документа в листинге З.1, — это наш собственный JavaScript-код, проверяющий значения свойств, которые предоставляет библиотека.

Листинг З.2. Проверка доступности CSS-стилей для создания тени поля

Function initiate(){

Var databox=document. getElementById(‘databox’);

If(Modernizr. boxshadow){

Databox. innerHTML=’Тени для полей доступны;

}else{

Databox. innerHTML=’Тени для полей недоступны;

}

}

Window. addEventListener(‘load’, initiate, false);

Как видно из кода листинга З.2, определить наличие любой возможности HTML5 можно с помощью всего лишь условного оператора if и соответствующего свойства объекта Modernizr. Для каждой возможности предусмотрено отдельное свойство.

Это всего лишь краткое знакомство с потрясающе полезной библиотекой. Используя Modernizr, вы также можете выбирать наборы CSS-стилей из файлов CSS, не прибегая к помощи JavaScript. Modernizr предоставляет специальные классы, которые можно добавлять в таблицы стилей для выбора нужных свойств CSS в соответствии с перечнем доступных возможностей. Чтобы подробнее узнать об этом, зайдите на веб-сайт создателей библиотеки http://www.modernizr.com.

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *