Определение поддержки HTML5 и CSS3 в браузере при помощи Modernizr

Главная

Статьи

Веб-программирование

25.01.2012 00:00

Определение поддержки HTML5 и CSS3 в браузере при помощи Modernizr

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

Modernizr - это JavaScript-библиотека, которая использует методы обнаружения, чтобы определить поддерживает ли текущий браузер те или иные CSS3 и HTML5 функций, например, таких как rgba(), border-radius, CSS transition и многое другое.

Это позволяет вам использовать pseudo IF/ELSE условия в вашем CSS и, при желании, можно писать условные операторы в JavaScript при помощи созданного "Modernizr JavaScript object".

Кроме того, Modernizr добавляет поддержку стилей HTML5-элементов. Это позволяет использовать более семантические, перспективные элементы, таких как <section>, <header> и <dialog>, не беспокоясь о том, что они не заработают в Internet Explorer.

Как это работает

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

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

Затем добавьте в ваш html-тег класс "no-js":

<html class="no-js">

Зачем добавлять этот тег? Потому что это будет состояние страницы по умолчанию. Если JavaScript (JS) не включен, то Modernizr не будет работать вообще (и, возможно, другие функции Вашего сайта также не будут работать), и этот класс нам нужен для этой проверки.

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

<html class="js canvas canvastext geolocation rgba hsla no-multiplebgs borderimage borderradius boxshadow opacity no-cssanimations csscolumns no-cssgradients no-cssreflections csstransforms no-csstransforms3d no-csstransitions  video audio cufon-active fontface cufon-ready"> 

Что это значит? Давайте посмотрим. В этом примере, я открыл страницу в Firefox 3.5. Этот браузер (к сожалению) не поддерживает множественные фоновые изображения, CSS градиенты или CSS трансформацию, поэтому Modernizr добавляет классы “no-multipebgs“, “no-cssgradients” и “no-csstransforms“. С другой стороны, он поддерживает canvas и border-radius, соответственно добавляются классы "canvas" и "borderradius". И т.д.

Как это использовать.

Предположим нам нужно задать несколько фоновых изображений для фона, css будет выглядеть так:

#nice {

 background: url(background-one.png) top left repeat-x,

 url(background-two.png) bottom left repeat-x;

}

Но старые браузеры проигнорируют эти стили, поэтому, используя Moderniz, мы определим следующие правила:

#nice {

 background: url(background-one.png) top left repeat-x;

}

.multiplebgs #nice {

 background: url(background-one.png) top left repeat-x,

 url(background-two.png) bottom left repeat-x;

}

Первое правило будет использоваться старыми браузерами, второе же правило будет переопределять первое только в современных браузерах с поддержкой множественных фонов.

Сайт: http://www.modernizr.com/